Vue自定义指令

Vue自定义指令的注册方法和组件很像，也分为全局注册和局部注册，写法和组件也基本差不多，只是方法名由component改为了directive。

自定义指令的选项都是由几个钩子函数组成的，每个都可以选择。

（1）bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

（2）inserted：被绑定元素插入父节点时调用（父节点存在既可调用，不必存在于document中）。

（3）update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

（4）componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

（5）unbind：只调用一次，指令与元素解绑时调用。

为了便于理解，我们来自定义v-focus功能，在<input>、<textarea>元素初始化时自动获取焦点，代码如下：

<div id="app">
	<input type="text" v-focus>
</div>

<script>
Vue.directive('focus', {
	inserted: function(el) {
		//聚焦元素
	    el.focus();
	}
});

</script>

 每个钩子都有几个参数可用，比如上面我们就用到了el。它们的含义如下：

（1）el:指令所绑定的元素，可以用来直接操作DOM。

（2）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。

                    modifers:一个包含修饰符的对象。例如：v-my-directive.foo.bar,修饰符对象modifers的值是{foo：true，bar：true}

   （3）vnode:Vue编译生成的虚拟节点。

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