一、基本用法
全局注册和局部注册,和组件类似,区别是把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中
<div v-test:xwu.e.f="word"></div>