Vue自定义指令详解

inserted: function(){
//...
},
update: function(){
//根据获得的新值执行对应的更新
//对于初始值也会调用一次
},
componentUpdated: function(){
//...
},
unbind: function(){
//做清理操作
//比如移除bind时绑定的事件监听器
}
})

在注册之后，便可以在 Vue.js 模板中这样写（记得添加前缀 v-）:

<div v-my-directive = 'someValue'></div>

当只需要 update 函数时，可以传入函数替代定义对象：

Vue.directive( 'my-directive',function (value) {
  // 这个函数作用 update()
})

2. 指令实例属性

所有钩子函数都将被赋值到实际的指令对象中，在钩子内 this 指向这个指令对象。
这个对象暴露了一些有用的属性：
钩子函数的参数：

el — 指令绑定的元素，可以用来直接操作 DOM 。

binding — 一个对象，包含以下属性：
name — 指令的名字，不包含前缀
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 }。
vm — 拥有该指令上下文 ViemModel
vnode — Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

desciiptor — 一个对象，包含指令的解析结果

注意：我们应当将这些属性视为只读，不要修改它们，我们也可以给指令对象添加自定义属性，但是注意不要覆盖已有的内部属性

下面将讲解一个简单的例子，当页面加载时，input输入框将自动聚焦。
代码如下：

//注册一个全局自定义指令v-focus
// 当绑定元素插入到DOM中
// 聚焦元素
 <div id="app">
   <input v-focus>
 /div>
Vue.directive('focus', {
  inserted: function (el) {
    el.focus() }
  });
 var app = new Vue({
        el: '#app'
      });

下面将讲解一个使用钩子函数参数的例子，将元素的字体色设置为 #fff，将背景色设置为传入指令的参数 red，并将指令名指令绑定值，指令绑定值的表达式，传入指令的参数显示在中。