Vue.js directive自定义指令详解

自定义一个demo指令

Vue自定义指令语法如下：

Vue.directive(id, definition)

传入的两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数。

    
{{msg}}

对象字面量

    
{{colours.text}}

生命周期钩子

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

1. bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2. inserted：被绑定元素插入父节点(div#app)时调用（父节点存在即可调用，不必存在于document中）。
3. update：当绑定指令的元素(VNode-虚拟节点)状态发生改变时触发（包括样式、内容、vue数据…）
4. componentUpdated：指令所在的组件的VNode以及其子VNode 全部更新后调用。
5. unbind：只调用一次，指令与元素解绑（元素从DOM中删除）时调用。

    
{{num}}
    增加
    解绑

初始化触发方法1和2，点击增加按钮触发方法3和4，点击解绑按钮触发方法5，如下图：

到此这篇关于Vue.js directive自定义指令详解的文章就介绍到这了,更多相关Vue.js directive自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！