vue指令

指令

v-model

数据双向绑定，用于表单元素

v-text

渲染文本内容的插值｛｛｝｝等价

v-html

渲染dom片段，且拥有v-text全部特性(防注入攻击，自动过滤)

v-noce

让元素只显示第一次渲染的内容，之后不再受数据更新的影响

v-if

有三条同组指令：v-if v-else-if v-else,控制元素加载与销毁，v-if可以单独使用，后面两个必须跟在v-if后面才能生效
如果链式使用v-if则其中一条规则符合条件剩余的判断不会执行

v-show

控制元素的显示与与隐藏，底层原理是修改的css样式的display的属性（如果频繁切换应使用v-show）
[注意]频繁切换显示隐藏优先显示v-show，这样可以避免页面的回流，减少浏览器的性能开销

v-for

语法:<div v-for='(value值,index下标) in arr' v-bind:key='index'>{{value}}</div>
–特性必须在被循环的元素上加key，且key的值对元素是隐藏的，只是给diff算法用的；
【不要在循环元素使用v-if】
–循环渲染为什么要加key：v-for语法中循环渲染虚拟dom时使用diff算法计算中用于优化算法的。key必须保证在作用域中每一个值都是唯一不可重复的。
官方不推荐使用下标，且不可以使用时间戳，随机数
–作用：每个元素拥有独立的key值，key相当于人类的身份证(key值是唯一的)
推荐使用value+sshkey，sshkey=index || value+value2

v-for渲染值类型

数组，对象（value，key，index），字符串，数字
渲染对象 v-for=’(value值,key属性名,index下标) in obj’ v-bind:key=‘index’

diff算法

渲染快的原理：当数据发生改变的时候会生成新的虚拟dom树（object）。层层对比，用新的节点对比旧的节点，一旦发现不一样的节点就直接用新的替换旧的

v-bind

绑定属性指令，简写 : ，它用来给元素绑定动态属性,一旦使用，里面的值必须是一个数据变量，如果是字符串必须使用引号引起来，它既可以绑定原生属性，也可以绑定自定义属性，一般情况下，自定义属性用来组件通讯

v-on

绑定事件指令，简写@