Vue2常用指令

v-on：给元素绑定事件，一般常写在方法methods里面，简写形式为@

v-bind：给元素绑定属性的，简写形式为：

v-slot：插槽，分为具名插槽和匿名插槽，默认为匿名插槽。

具名插槽：父组件里面元素给上slot属性并且跟上属性值，子组件里面通过slot标签里面的name属性等于父组件里面的属性值这就是具名插槽。

具名插槽和匿名插槽里面的内容都是由父组件决定。

v-clock：该指令放在html中，样式属性为display ：none；此指令可以解决插值表达式页面闪烁问题。

v-pre：阻止预编译，如果想要输出原样的纯文本文档，可以使用v-pre阻止预编译

v-once：表示只渲染一次，当要重新渲染时，里面的元素/组件以及所有子节点将被视为静态跳过

v-html：用于更新元素的innerHTML，可以编译标签

v-text：用于更新元素的textContent，不可以编译标签

v-for：一个用于迭代的指令，可以根据数据源渲染多次渲染元素和模板

v-for里面都有一个key属性，这个key属性标识必须是唯一的且值是不可变的

key的作用：采用就地复用原则，提高渲染效率，可以避免出现数据混乱问题

v-modle：只局限于input，select 标签，能将页面控件上输入的值同步到相关绑定的data属性上

实现原理：通过Object.deineproperty里面的set和get函数实现数据的劫持

   let obj = {};

   Object.defineProperty(obj, "fu",{

   set(nvale) {

   document.getElementById('txt').value = nvale;

   document.getElementById('cd').innerHTML = nvale;

   }

   })

  document.addEventListener('keydown', function(eve){

    obj.fu = eve.target.value;

  })

这里仅仅只用啦set函数赋值实现。

v-if：根据值动态控制DOM元素的显示于隐藏。

实现方式：v-if是动态的向DOM树删除或添加元素

编译过程：v-if切换有一个局部的编译卸载过程，切换过程中会适当的销毁和重建内部的监听事件和子组件。

编译条件：v-if是惰性的；条件为假时，什么也不做，如果第一次条件为真就会局部编译

v-if有很高的性能消耗，适用于不太可能改变的情景。

v-show：根据值动态控制DOM元素的显示于隐藏。

实现方式：v-show是通过DOM元素里面display属性来达到显隐

编译过程：v-show只是简单的通过CSS样式切换

编译条件：v-show不管什么条件都会编译，然后被缓存，而且DOM元素保留

v-show有很高的初始化渲染性能消耗，适用于经常切换改变情景。