Vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上，尽量不去操作增删改 DOM。通过了解如何去自定义指令，可以想象内置指令是如何完成的。
内置指令
指令名称
描述
使用
v-model
绑定数据
<\input v-model="message">
v-text
输出文本,不能解析标签
<\p v-text="message"></p>
v-html
输出文本,可解析标签
<\p v-html="message">/p>
v-once
只绑定一次数据
<\p v-once >{{message}}</p>
v-bind
绑定属性
<\img v-bind:src="imgurl"> 或 <\img :src="imgurl">
v-if
控制是否显示容器 值转为布尔为false时 注释该容器，反之显示
<\div v-if="true"></div>
v-show
控制是否显容器，改变的时display:none/block
<\div v-show="true"></diiv>
v-for
循环遍历数组、对象
<\li v-for="(val,key) in arr">{{val}}</li>
v-cloak
在还没有执行到vue代码的时候隐藏元素,可解决‘闪烁'问题
<\p v-cloak>{{message}}</p>
自定义指令
在需要特殊功能时，使用自定义指令对 DOM 进行底层操作
注册
自定义指令的注册分为全局注册和局部注册，类似组件的注册，只是方法名为 directive，写法如下：
// 全局注册 自定义指令 Vue.directive(‘mydir',{ // 指令选项 }); // 全局注册 自定义指令函数 Vue.directive('mydir', function () { // 这里将会被 `bind` 和 `update` 调用 }) // 局部注册（只针对组件内元素） export default { directives: { mydir: { // 指令选项 } } }
需要注意的是：Vue.directive( ) 注册指令要在实例初始化 new Vue( ) 之前才能全局注册指令。定义指令时驼峰式写法会报错，所以一般小写。
指令选项
自定义指令的选项是由几个钩子函数（可选）组成，可以根据需求选择不同的钩子，例如使用全局注册一个指令时：
Vue.directive('mydir', { bind: function () { // 只调用一次，指令第一次绑定到元素时调用，用于在绑定元素时执行一次的初始化动作。 }, update: function () { // 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值， // 之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化，可以忽略不必要的模板更新。 }, inserted: function () { // 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 }, componentUpdated: function () { // 被绑定元素所在模板完成一次更新周期时调用。 }, unbind: function () { // 只调用一次， 指令与元素解绑时调用。 } })
以上每个钩子函数都有几个参数可用：
el：指令所绑定的元素，可以用来直接操作 DOM；
binding：包含指令信息的一个对象；
vnode：Vue 编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
示例
// 一个带自定义指令的元素 <div v-mytest:foo.m1.m2="1+1">MyDirective</div> // 部分 JS 代码 export default { directives:{ mytest: { bind: function (el, binding, vnode) { console.log(el) console.log(binding) console.log(vnode) } } } }
控制台输出截图：
其中对于 binding 对象输出的属性有：
rawName: "v-mytest:foo.m1.m2" // 自定义指令
name: "mytest" // 指令名称
arg: "foo" // 指令的参数
modifiers: {m1: true, m2: true} // 指令的修饰符
expression: "1+1" // 指令绑定值的字符串形式
value: 2 // 指令的绑定值
v-bind || : 绑定属性
Vue 内置指令 v-bind 用于动态更新 HTML 元素属性，使用 v-bind:someAttr = "someData"或者语法糖 :someAttr = "someData"就可以在 someData 改变时更新绑定的 someAttr 属性。
基本用法
绑定单一的属性值
<a :href="url" :id="linkID">链接</a>
测试 data 如下：
// js data : { url: 'https://www.baidu.com/', linkID : 'myid' }
元素渲染输出：
<a href="https://www.baidu.com/">链接</a>
对象语法
v-bind 最常用的是绑定 class 或 style 属性来动态改变样式。例如可以给 :class 设置一个对象来动态切换 class 的值：
<!-- class 绑定 --> <div :class="{colorRed: isRed}"></div>
当 isRed:true 时渲染输出：
<div></div>
对象中可以传入多个属性值来动态切换 class：
<!-- class 绑定，传入多个属性 --> <div :class="{ classA: isA, classB: isB }">
当 isA、isB 变化时 classA、classB 会动态更新，当都为 true 时显然渲染结果为：
<div></div>
同理对于 style 可以传入对象属性，并且可以使用字符串拼接：
<!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div>
对于元素中的各个对象可以统一用 v-bind 绑定：
<!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
数组语法
class 可以传入多值，给 :class 绑定一个数组就可以使用 class 列表
<div :class="[activeA, activeB]"></div>
例如当 {activeA: 'class1', activeB: 'class2'} 时渲染结果为：
<div></div>
还可以在数组语法中使用三元表达式切换 class，例如：
<div :class="[isA ? activeA : '', activeB]">
在 class 有多个条件时使用三元表达式比较繁琐，可以在数组语法中使用对象语法：
<div :class="[{activeA: isA}, activeB]">
修饰符
v-bind 的修饰符很少，API 中只提供.prop、.camel和.sync，并且多用于组件，使用方式示例：