功能：
用于解析标签（包括：标签属性、标签体内容、绑定事件.....）
事件绑定
v-on
用于绑定事件，例：
<input type="text" placeholder="请输入" v-on:keyuo="showInfo">
v-on可以简写为@，即：v-on:事件名 简写为 @事件名。
@click="demo($event)" 可以传参，并且不会丢失事件对象
v-on="{事件名：方法名，事件名：方法名，.....}" 来绑定多个事件
数据绑定
v-bind
单向数据绑定，它是为标签里的某个属性绑定值用的，例：
<input type="text" v-bind:value="aname">
v-bind可以简写为 : ，即：v-bind:href="xxx" 简写为 :href="xxx"
v-model
双向数据绑定，只能应用在表单类元素（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
循环渲染
v-for
遍历
遍历普通数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
遍历对象数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项(每一个对象)
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
遍历对象
语法 : v-for="(value,item,index) in obj"
value: 属性值
item : 属性名
index : 索引值
<ul>
<li v-for="(p,index) in persons" :key="index">
id:{{p.id}} - name:{{p.name}} - age:{{p.age}}
</li>
</ul>
key的内部原理
-
虚拟DOM中key的作用 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
-
对比规则 (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM（数据不同的地方），随后替换掉页面中之前的真实 DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。
-
用index作为key可能会引发的问题
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。
-
开发中如何选择key?
- 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
条件渲染
v-show
条件渲染，v-show指令通过改变元素的css属性（display）来决定元素是显示还是隐藏。
v-show = false时，相当于设置了样式的display为none
v-if v-else-if v-else
条件渲染，与v-show类似，唯一不同的是，当v-if = false时，直接删掉DOM结构
v-else-if和v-else正常用，但是中间不能被打断
渲染文本
v-text
用于将数据填充到标签中，作用于插值语法表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将 html标签一并输出 ）
注意：
- v-text会把解析到为文本完全替换掉标签里的内容
- 不能解析字符串，v-text会把所有的字符串都当成正常的文本解析，不会当成标签，即使你的data里的str数据中有标签结构
v-html
-
作用：向指定节点中渲染包含html结构的内容。
-
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xx}}则不会。
- v-html可以识别html结构。
-
严重注意：v-html有安全性问题！！！！
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
其它指令
v-cloak指令（没有值）：
- 本质是一个特殊属性，Vue实例创建完毕并接管容易后，会删掉v-cloak属性
- 使用CSS配个v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令（没有值）：
- 所在节点在初次动态渲染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令：
- 让Vue跳过其所在节点的编译过程
- 可以利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
