20200515 Vue 自定义指令

自定义组件的用法：

与组件类似，也分全局注册和局部注册，区别就是component换成了directive

        // Vue.directive ,第一个参数：自定义指令的名称，第二个参数，指令的一些选项
        Vue.directive('focus', {
            //指令的选项
        })

钩子函数

自定义指令定义函数提供了一下几个钩子函数（可选）：

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在与document中。）
update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数：

el：指令所绑定的元素，可以用来直接操作DOM
binding：一个对象，包含以下属性：

• name：指令名，不包括 v-前缀。

• value：指令的绑定值，例如：v-my-directivre="1+1",value的值是2。

• old Value：指令绑定的求安一个值，仅在update的component Updated钩子函数中可用。无论值是否改变都可用。

• expression：绑定值的字符串形式。例如：v-my-directive="1+1"，expression的值是"1+1"。

• arg：传给指令的参数。例如：v-my-directive：foo ，arg 的值是 "foo"。

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

• vnode：Vue编译生成的虚拟节点。

• lodVnode：上一个虚拟节点，仅在 update和component Updated钩子中可用

1.png