1 自定义指令
- 指令可以在全局或局部定义。
- 组件是html和代码的复用,而指令是对DOM的扩展复用。
1.1 全局自定义指令
Vue.directive('mydirective',{
//...
})
在组件中使用时无需引用,直接使用v-mydirective
即可。
也可以先定义指令,再用Vue.ues()方法注册。
var myDirective= {};
myDirective.install = function(){
Vue.directive('mydirective',{
//...
})
}
export default myDirective;
引入后在入口文件main.js中使用Vue.use()注册即可全局使用。
1.2 局部自定义指令
//组件选项
directive:{
mydirective:{
//...
}
}
而后在组件的模版中使用v-mydirective
来使用指令。
2 钩子函数
指令定义了以下5个钩子函数:
钩子 | 说明 |
---|---|
bind | 只在指令第一次绑定到元素时调用一次,用来定义一个绑定时执行一次的初始化动作。 |
inserted | 被绑定元素插入父节点时调用(父节点存在即可,不必存在document中) |
update | 被绑定元素所在模版更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模版更新。 |
componentUpdated | 被绑定元素所在模版完成一次更新周期时调用。 |
unbind | 只在指令与元素解绑时调用一次 |
2.1 钩子函数参数
- el:指令绑定的元素。
- binding:包含以下属性的对象:
- name:指令名;
- value:指令的绑定值;(
v-mydir=" 1 + 1"
值为2) - oldValue:指令绑定的前yield值,仅在update和componentUpdated钩子中可用,无论值是否改变。
- expression:绑定值的字符串形式;(
v-mydir=" 1 + 1"
值为1 + 1
) - arg:传给指令的参数;(
v-mydir="foo"
值为”foo”) - modifiers:一个包含修饰符的对象。(
v-my-directive.foo.bar
, 修饰符对象 modifiers 的值是{ foo: true, bar: true }
)
- vnode:Vue编译生成的虚拟节点。
- oldVnode:上一个虚拟节点,仅在update和componentUpdated钩子中可用。
2.2 函数简写
若指向在bind
和update
钩子上做重复动作,可以这样写:
Vue.directive('mydirective',function(el,binging){
//...
})