自定义指令

一、基本用法

全局注册和局部注册，和组件类似，区别是把component 换成了 directive

二、钩子函数

1､bind
只调用一次 (和@click类似)，指定第一次绑定到元素时调用
用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

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

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

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

5､unbind
只调用一次，指令与元素解绑时调用

三、钩子函数的参数

1､el ：指令所绑定的元素，可以用来直接操作DOM

2、binding：一个对象，包含属性有:

2.1､name：指令名，不包括v- 前缀

2.2､value：指令的绑定值，如： v-my-directive="1+1",value值是2

2.3､oldValue：指令绑定的前一个值，仅在update 和 componentUpdated中用，无论值是否改变都可用

2.4､expression：绑定值的字符串形式（绑定值的属性名，也叫值的表达式)
​ 如：v-my-directive="1+1"，expression值是"1+1"

2.5､arg：传给指令的参数，如：v-my-directive:foo，arg的值是"foo"

2.6､modifiers：一个包含修饰符的对象
​ 如：v-my-directive.foo.bar，修饰符对象modifiers的值是 {foo: true, bar:true}

3､vnode：Vue 编译生成的虚拟节点

4､oldVnode：上一个虚拟节点，仅在update 和 componentUpdated中

【Demo实例 https://jsbin.com/zovozoz/edit?html,output】