Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为:
钩子函数
定义对象的钩子函数如下:
| 钩子函数 | 描述 |
|---|---|
| bind | 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作 |
| inserted | 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中） |
| update | 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新 |
| componentUpdated | 被绑定元素所在模板完成一次更新周期时调用 |
| unbind | 只调用一次，指令与元素解绑时使用钩子函数参数 |
钩子函数参数如下：
定义对象的钩子函数参数如下：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1"，value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
Vue.directive('my-directive', {bind: function(){//做绑定的准备工作//比如添加事件监听器，或是其他只需要执行一次的复杂操作},inserted: function(){//...},update: function(){//根据获得的新值执行对应的更新//对于初始值也会调用一次},componentUpdated: function(){//...},unbind: function(){//做清理操作//比如移除bind时绑定的事件监听器}
})举个栗子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box" v-red>{
{msg}}</div><!--<script src="lib/vue 2.1.10.js"></script>--><script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script><script>Vue.directive('red',{inserted:function(el){el.style.background="red";}})window.οnlοad=function(){var vm=new Vue({data:{msg:"abcde"}}).$mount("#box");}</script>
</body>
</html>