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 函数简写

若指向在bind和update钩子上做重复动作，可以这样写：

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