1、注册全局指令
虽然 Vue 提供了很多内置指令可以实现动态数据渲染(v-model)、事件绑定(v-on)、流程控制(v-if/v-for)等，但是在实际开发过程中，如果遇到经常发生的功能场景，可以自己注册一个全局指令或在当前组件中组成一个自定义指令。
基础语法
Vue 提供的全局 API 中一个用于注册全局指令的方法 Vue.driective() ，通过这个方法可以注册全局使用的自定义指令，语法如下：
Vue.directive('name', {
inserted: function (el) {
// ...
}
})
Vue.directive(name, options) 全局函数有两个参数，第一个参数是自定义指令的名字，第二个参数是配置项对象（或函数），配置对象中可以定义一些钩子函数，示例代码如下：
Vue.directive('directiveName', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
钩子函数
这些钩子函数会在指定的时机被自定调用，具体执行时机包括：
bind()：当指令第一次绑定到元素时被调用，并且只会被调用一次，一般用于初始化配置；inserted()：当绑定的元素被插入到父元素时被调用；update()：当绑定的组件被更新时调用，但会在其子组件更新之前被调用；componentUpdated()：当绑定的组件及其子组件全部更新之后被调用；unbind()：当指令和绑定的元素解绑时被调用，并且只会被调用一次；
在 Vue.directive() 的第二个配置项参数中可以声明一个或多个钩子函数，这些钩子函数会在不同的时机被执行，这些钩子函数中都有相同的参数，这些参数被称为“钩子函数参数”。
钩子函数参数包括：
el：被绑定的元素 DOM 对象，与Document.getElementById('')获取到的 DOM 对象是一样的；binding：与指令信息相关的对象；vnode：Vue 编译生成的虚拟节点；oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
自定义指令案例
如果想设计一个指令，只要绑定了该指令的元素，其内部的文本节点样式都改为红色。注册全局指令的示例代码如下：
<div id="app">
<p v-red>{{msg}}</p>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.directive('red', {
inserted(el) {
el.style.color = 'red'
}
})
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
在浏览器中运行的效果如下：
我们再来升级一下自定义指令的功能，如果要定义一个修改颜色的指令，通过指令绑定的值来设置元素的文本节点颜色。示例代码如下：
<div id="app">
<p v-color="styleColor">{{msg}}</p>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.directive('color', {
inserted(el,binding) {
el.style.color = binding.value
}
})
new Vue({
el: '#app',
data: {
msg: 'hello',
styleColor: '#37f'
}
})
</script>
在浏览器中运行的效果如下：
上面案例中使用的自定义指令的钩子函数是 inserted ，我们也可以使用其他的钩子函数完成上面的案例，很多时候为了简化代码，可能不太考虑使用哪个钩子函数，如果想在 bind 和 update 时触发相同的功能，可以使用函数简写的方式。示例代码如下：
Vue.directive('color', function(el, binding) {
// ...
})
2、注册局部指令
Vue 的全局 API 函数注册的指令可以被当前项目中所有的组件所使用，如果只想为一个组件注册自定义指令的话，可以在 Vue 实例对象中注册自定义指令。
我们还以上面的案例为示例，如果要在 Vue 实例组件中注册，代码如下：
<div id="app">
<p v-color="styleColor">{{msg}}</p>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello',
styleColor: '#f56'
},
directives: {
color: {
inserted(el, binding) {
el.style.color = binding.value
}
}
}
})
</script>
在浏览器中运行的效果如下：
