vlambda博客
学习文章列表

Vue简介及如何搭建vue开发环境

一、Vue简介
Vue是一套用于 构建用户界面 渐进式 JavaScript框架。
  • 构建用户界面:就是把拿到的数据通过某种办法变成用户可以看到的界面。(至于怎么拿到数据,是发送请求还是模拟数据,vue不关注,vue关注的是你把数据给我之后,我如何把它变成界面)

  • 渐进式如果我们的应用很简单,只需要引入一个轻量小巧的核心库就可以了,如果是个复杂应用,可以引入vue中各式各样的插件库,所以渐有逐渐的意思,进有递进的意思,从一个轻量小巧的核心库逐步递进到使用各式各样的插件库

1、Vue的特点

  • 采用组件化模式,提高代码复用率、且让代码更好维护。

  • 声明式编码,让编码人员无需直接操作DOM,提高开发效率。

  • 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点




2、扩展知识:

a、命令式&声明式

举个生活中的例子说明下这两种区别

  • 命令式:若你在餐厅口渴了需要喝水,则在命令式的风格下,你需要对服务员下达包括口渴、行走至饮水机、拿杯子接水、回头返程等多个细节动作,缺少一步你都将喝不到水

  • 声明式:在声明式的风格下,也许你只需向服务员使个眼神,并咳嗽两声,他便会将水递到你身前

举个代码示例,把人员信息变成li渲染到页面中

  • 使用命令式编码写法如下:

  • 使用声明式编码:

    Vue简介及如何搭建vue开发环境




b、虚拟DOM+Diff算法:
Vue简介及如何搭建vue开发环境



二、搭建vue开发环境
从最基础开始,我们上来不使用vue-cli脚手架来搭建,而是使用最传统的方式来搭建,在html文件里引入vue.js文件
1、安装vue的方式:
在官方文档上https://cn.vuejs.org/v2/guide/installation.html,下载开发版本的,因为包含了完整的警告和调试模式
下载并创建如下文件,然后直接用script引入,引入之后我们可以在控制台输入Vue,会看到Vue构造函数
Vue简介及如何搭建vue开发环境
此时打开页面访问,控制台下方会有两个善意的小提示

Vue简介及如何搭建vue开发环境

红色框提示 意思是:推荐在浏览器上安装  Vue Devtools 。它允许你在一个更友好的界面中审查和调试 Vue 应用,安装方式:
下载插件:地址:https://devtools.vuejs.org/guide/installation.html

Vue简介及如何搭建vue开发环境

或者 点击右上角 --->选择更多工具按钮 --->选择扩展程序

Vue简介及如何搭建vue开发环境
然后将之前解压的Vue.js Devtools_x.x.x_chrome.zzzmh.cn.crx文件拖拽到扩展程序界面,按照对应提示点击确认即可。



蓝色这个提示 意思是:悠着点,引入的这个vue.js文件体积有点大呀,里面还包含着警告和提示,这个东西没上线吧,如果上线的话用这个不太好,可别用这个,这个会影响我们,那怎么解决呢?

Vue简介及如何搭建vue开发环境

我们可以把productionTip设置为 false 以阻止 vue 在启动时生成生产提示。

Vue.config.productionTipfalse 



2、写个hello world示例
推荐一个VsCode里比较好用的插件,Live Server
功能 启动一个服务预览 html
使用方法 :先下载插件,在VsCode扩展商店里搜索Live Server,进行安装

Vue简介及如何搭建vue开发环境

操作方法:选中要打开的页面鼠标右键,选择Open with Live Server,网页会直接打开

Vue简介及如何搭建vue开发环境

工作特点:选中的一瞬间,它就在电脑本机5500端口号上开了一台内置的小服务器,并且把工程中所有的文件及文件夹都作为这台服务器的根资源去使用

Vue简介及如何搭建vue开发环境




运行之后会有这个错误信息,为什么会报错呢,这是浏览器的一个默认行为,浏览器打开任何一个网站的时候,都会默认请求页签图标,我们这边没有,所以就404了

解决方案是我们在根目录下放一个favicon.ico图标就行



开始写hello world
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初始Vue</title> <script src="../js/vue.js"></script></head><body> <div id="app">       {{msg}} </div> <script> Vue.config.productionTip = false // 创建Vue实例 const vm = new Vue({ el:"#app", data:{ msg:"Hello World" } })</script></body></html>
代码说明:
el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data中用于存储数据,数据供el所指定的容器去使用
综上而知:
  • 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象

  • app容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

  • app容器里的代码被成为Vue模板