Vue入门 - 自定义指令

1 自定义指令

  1. 指令可以在全局或局部定义。
  2. 组件是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 钩子函数参数

  1. el:指令绑定的元素。
  2. 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 })
  3. vnode:Vue编译生成的虚拟节点。
  4. oldVnode:上一个虚拟节点,仅在update和componentUpdated钩子中可用。

2.2 函数简写

若指向在bindupdate钩子上做重复动作,可以这样写:

Vue.directive('mydirective',function(el,binging){
    //...
})

你可能感兴趣的:(vue)