指令

v-bind：单向绑定命令

　　　　可以绑定样式，v-bind:style="{k:v,k2,v2...}"

　　　　　　　　　　　v-bind:class ="{'类1':boolean或表达式，’2‘：...}"

　　　　　

v-on：绑定事件监听器。

　　　v-on:事件 = “事件处理函数”

　　　事件对象 $event

　　　修饰符 self 只有本身响应事件

　　　　　　 stop 阻止冒泡

　　　　　　　　　　几乎等同于  @click = "two"

　　　　　　　　　　　　　　　　two(e){

　　　　　　　　　　　　　　　　　　e.canceBubble = true;

　　　　　　　　　　　　　　　　}

　　　　　 　prevent 阻止默认行为

 

v-model：双向绑定命令 视图变化 数据变化，数据变化，视图变化

　　　　修饰符 number 输入字符串转为有效数字

　　　　　　 　trim 输入首尾空格过滤

　　　　　　　 lazy  取代 input 监听 change 事件

　　　　

v-text：渲染文本到标签，会覆盖标签内原有内容trim

　　　　更新元素的textContent，如果要更新部分的textContent，需trim要使用{{}}

 

v-html：更新元素的innerHTML

 

v-if：条件渲染，初始渲染条件为false，什么都不做，为true，渲染条件块

 

v-show：根据表达式的真假切换元素的display css属性，与v-if不同的是不管初始条件是什么都会被渲染出来，之切换css操作

频繁切换用v-show，条件很少改变用v-if

 

v-else：与编程语言中的else一样

 

v-else-if：与编程语言中的else-if一样

 

v-for： 遍历数组  ：key = "唯一的值"

　　

   //被迭代数组别名 in 源数组数据，当前项索引  可用of代替in
for="item in items" :key="item.id">

  {{ item.name }}

 

 

v-pre：跳过这个元素和他子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译

 

v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

 

v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。