1.什么是自定义指令
自定义指令是Vue提供的能力,用于注册自定义的指令,从而实现一些自定义的dom操作
2.vue2中自定义指令
在Vue2中,自定义指令通过全局方法Vue directive()进行注册:
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
使用:
<input v-focus>
也可以局部注册:
directives: {
focus: {
inserted: function(el) {
el.focus()
}
}
}
然后在模版中通过v-xxx方式使用
3.Vue3中自定义指令
在vue3中,自定义指令通过全局方法app.directive()注册
// 注册全局指令v-focus
app.directive('focus', {
mounted(el) {
el.focus()
}
})
使用:
<input v-focus>
局部注册:
directives: {
focus: {
mounted(el) {
el.focus()
}
}
}
4.vue2与vue3自定义指令区别:注册方式不同,钩子函数变化,钩子函数参数变化,实现机制不同,渲染函数处理不同。