Vue指令（Directive）

Vue指令（Directive）--基于vue2.x

1. v-bind
   1. <a href="#" v-bind:title="msg">链接</a>
   2. 将这个元素节点的 title 特性和 Vue 实例的 msg 属性保持一致
   3. v-bind:title=“msg” 使用语法糖后 :title="msg" 即：<a href="#" :title="msg">链接</a>
   4. :class、:style、
2. v-on
   1. <button v-on:click="handleClose"> 点击隐藏 </button>
   2. 为该按钮增加一个点击事件
   3. 使用语法糖@ 即：<button @click="handleClose">点击隐藏</button>
   4. @click、@dbclick、@keyup、@mousemove
   5. handleClose是方法名，定义在methods属性内
   6. 除了方法名，也可以是一个内联语句 <button @click="show=false">点击隐藏</button>
   7. 调用的方法名后面可以不跟括号
3. v-if/v-else-if/v-else
   1. 与JavaScript中的 if、else if 、else 类似
   2. 表达式为真时，当前元素或组件及其所有子节点将被渲染，为假时被移除
4. v-for
   1. <ul> <li v-for="book in books">{{book.name}}</li> </ul>
   2. 遍历books，渲染li
   3. 可以用of代替in 即：<li v-for="book of books">{{book.name}}</li>
   4. 数组下标 <li v-for="(book,idx) in books">{{idx}} - {{book.name}}</li>
   5. 数组中相同元素的项不会被重新渲染
5. v-cloak
   1. <div id="app" v-cloak>{{msg}}</div>
   2. Vue实例结束编译时从绑定的HTML元素上移除，经常和css的display:none;配合使用
   3. 工程化的项目中很少使用
6. v-once
   1. <span v-once>{{msg}}</span>
   2. 元素或组件只渲染一次，包括元素或组件的所有子节点
   3. 业务中很少使用，当你需要进一步优化性能时，可能会用到
7. v-show
   1. 与v-if 的用法基本一致
   2. v-show是改变元素的css属性display
   3. v-if 会销毁或重建元素、开销大，适用于条件不经常改变的场景、v-show适用于频繁切换条件
8. v-model
   1. <input type="text" v-model="msg"> <p>输入的内容是：{{ msg }}<p>
   2. 实现数据的双向绑定
   3. 单选按钮、复选框、选择列表
   4. 修饰符：.lazy: .number: .trim:
9. v-html
   1. 解析html标签
10. v-pre
    1. 原样输出