Vue框架
后面会持续更新...（第二次更新内容有：v-on、v-model、v-for、v-if v-show,理解重绘和回流）
目录
一、Vue简介
1、概述
2、Vue的开发模式
二、Vue入门
1、初识Vue框架
1.1、使用Vue输出“hello world”
1.2、热启动插件安装
1.3、vue devtools工具安装
2、Vue插值
3、不常用的指令
3.1、v-text
3.2、v-html
3.3、v-cloak
3.4、v-once
4、常用的指令（重点）
4.1、v-bind
4.2、v-on
4.2.1、基本使用
4.2.2、事件修饰符
4.2.3、enter按键事件
4.3、v-model
4.3.1、双向数据绑定
4.3.2、基本使用
4.3.3、修饰符
4.4、v-for
4.4.1、数组循环
4.4.2、对象循环
4.5、v-if v-show
4.5.1、基本使用
4.5.2、理解重绘和回流（重要）
一、Vue简介
官网：Vue.js (vuejs.org)
1、概述
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
声明式渲染和组件系统是Vue的核心库所包含内容。
2、Vue的开发模式
M-V-VM
M(model)：普通的javascript数据对象（其实就是一个对象，对象里放了数据）。
V(view)：html内容，也就是前端展示页面。
VM(ViewModel)：用于双向绑定数据与页面，也就是Vue的实例。
也就是说，在这种模式下，页面数据发生改变，相应的前端渲染页面也会发生改变。
二、Vue入门
1、初识Vue框架
我们还是在H5页面，进行操作，
1.1、使用Vue输出“hello world”
第一步：先有一个div容器，并且一个项目里有且只有一个div,我们后续所有的工作都要放在着一个div中。
第二步：引入vue框架
第三步：书写js代码
如下所示：
Document
{{ msg }}
1.2、热启动插件安装
第一步：在根目录下，初始化文件 npm init -y
第二步:全局安装 cnpm i -g browser-sync
第三步：package.json 添加自定义命令 "start": "browser-sync start -s -f **/* --directory --watch"
第四步：启动，http://localhost:3000 访问即可，或者，在对应文件目录下，输入命令npm run start
即可进入如下页面：
1.3、vue devtools工具安装
我这里提供一个精简版的安装
第一步：
第二步 
第三步：选择该文件，这个文件资源已上传，有需要可以下载 
2、Vue插值
插值表达式的写法支持使用：变量·、部分表达式、链接且、链接或、函数
{{ }}括起来的区域，就是一个JS语法区域，但是只可以写部分的JS语法
Document
{{ msg }}
{{ b ? '王昭没有君啊' : '王昭君' }}
{{ 1+1}}
{{ b && '王昭没有君啊' }}
{{ b || '王昭没有君啊' }}
{{ getData() }}
3、不常用的指令
3.1、v-text
相当于原生JS中的innerText，和插值差不多，没有闪屏。
3.2、v-html
相当于原生JS中的innerHTML，会解析标签。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
3.3、v-cloak
解决白屏问题。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
3.4、v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
Document
{{ msg }}
{{ msg }}
4、常用的指令（重点）
4.1、v-bind
作用：动态设置标签属性
关键代码，如下所示：
王昭没有君啊
王昭没有君啊
王昭没有君啊
王昭没有君啊
王昭没有君啊
王昭没有君啊
王昭没有君啊
王昭没有君啊
4.2、v-on
作用：绑定事件
4.2.1、基本使用
常规写法：
简写：
事件对象event
点击事件不传参
点击事件传参
案例：
html省略，关键代码：
{{ msg }}
4.2.2、事件修饰符
.self .stop .once .prevent
@.click.self 触发事件源时才会触发，可用于阻止事件冒泡@click.stop 阻止事件冒泡@click.once 事件只会执行一次@click.prevent 阻止默认行为案例：
html省略，关键代码：
4.2.3、enter按键事件
.enter 回车键的时候调用
案例：
html省略，关键代码：
4.3、v-model
作用：双向数据绑定，用于表单（input、textarea、select、checkbox、radio）
4.3.1、双向数据绑定
4.3.2、基本使用
input、textarea、select ，v-model绑定的是value
checkbox、radio，v-model绑定的是checked属性
案例：
html省略，关键代码：
{{msg}}
{{text}}
{{selectvalue}}
{{checkvalue}}
王者荣耀
英雄联盟
和平精英
原神
{{radiovalue}}
4.3.3、修饰符
.lazy .number .trim
懒加载 把oninput事件变成onblur事件 把当前变量转换成number类型,v-model绑定的变量是自动转换字符串的 去除前后的空白案例：
html省略，关键代码：
{{msg}}
{{msg2}}
{{msg3}}
4.4、v-for
作用：循环遍历
注意：v-for循环要加key，提高性能，key取唯一值，有id取id，没有可以用index下标。
4.4.1、数组循环
4.4.2、对象循环
案例：
html省略，关键代码：
-
下标：{{index}}， 元素：{{item}}
-
id：{{item.id}}，姓名：{{item.name}}，年龄：{{item.age}}
-
下标：{{index}}，属性：{{key}}，属性值：{{val}}
4.5、v-if v-show
作用：根据表达式的布尔值(true/false)进行判断是否渲染显示该元素。
4.5.1、基本使用
v-if v-else-if v-else，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。
v-show控制元素是不是要显示，元素是肯定要渲染的，false是通过行内样式进行隐藏的，但是节点是存在的。
北京
上海
true渲染，false不渲染
案例：
html省略，关键代码：
北京
上海
广州
深圳
北京
上海
广州
深圳
4.5.2、理解重绘和回流（重要）
如果说我们不涉及到节点的删除和渲染的话，使用v-if。
如果说频繁切换，我们就要用v-show。
针对上面代码，如果我让num=1,num1=2，v-if会先销毁
广州
，然后重新生成上海
，然后重新渲染生成页面，此时v-if会造成页面的重绘和回流；v-show会给深圳
添加样式：,给取消样式：广州
，v-show,只会造成页面的重绘。
从字面上理解，重绘，重新绘画，画到一半颜色发现不对，然后重新上色。
一个页面加载到完成，会同时加载html,css,js,比如说我们增加或者删除DOM节点，此时html发生变化，就如同绘画一样，画到一半，我发现我不想要画这个房子了，我想画个鸟，此时我就要先把房子擦掉，然后重新绘画，这就会极大的浪费性能，页面加载也是这样，加载到一半发现html发生变化，然后从头再加载html,css,js，重新渲染生成页面。
页面优化也是考核一个开发者能力的关键之一，所以在平时的工作中，我们尽量减少回流。所以我们就有必要要理解重绘和回流。
修改一个元素的宽高，增删DOM节点，页面布局发生变化，html结构发生变化，那么肯定就会先销毁之前的html,然后重新构建新的html，新的html构建完成，随之对页面进行再次渲染，这个过程就是回流。
给一个元素修改颜色，这样的改动并不会影响页面布局的，html结构也不会发生变化，但是颜色变了，就需要重新渲染页面，这就是重绘。
回流的代价会远大于重绘，会极大的浪费性能，回流必然会造成重绘，但重绘不一定会造成回流。