自定义指令(vue2)

157 阅读1分钟

自定义指令的5个钩子函数:

bind

只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。

inserted

被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)

update

被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。

componentUpdated

被绑定元素所在模板完成一次更新周期时调用

unbind

只调用一次,指令与元素解绑时调用

举例:用自定义指令,设置默认图片

1.在 App.vue 中,准备好默认的图片,进行打包

image.png

2.注册自定义指令,有两种方法

2.1在 main.js 中全局注册

image.png

2.2在 App.vue 中局部注册

image.png

3.打开页面看效果

image.png

image.png