做视频网站的方法,wordpress怎么加入站长统计代码,阿里云域名注册登录,域名手机网站源码一、自定义指令简介
自定义指令是Vue提供的能力,用于注册自定义的指令,从而实现一些自定义的DOM操作。
二、Vue2中自定义指令
在Vue2中,自定义指令通过全局方法Vue.directive()进行注册:
// 注册全局指令v-focus
Vue.directive(focus, {inserted: function(el) {el.focus()…
一、自定义指令简介
自定义指令是Vue提供的能力,用于注册自定义的指令,从而实现一些自定义的DOM操作。
二、Vue2中自定义指令
在Vue2中,自定义指令通过全局方法Vue.directive()进行注册:
// 注册全局指令v-focus
Vue.directive(focus, {inserted: function(el) {el.focus() }
})使用 input v-focus 也可以局部注册:
directives: {focus: {inserted: function(el) {el.focus()}}
}然后在模板中通过v-xxx方式使用。
三、Vue3中自定义指令
在Vue3中,自定义指令通过全局方法app.directive()注册:
// 注册全局指令v-focus
app.directive(focus, {mounted(el) {el.focus() }
})使用
input v-focus局部注册:
directives: {focus: {mounted(el) {el.focus() }}
}四、Vue2与Vue3自定义指令区别
vue3中的自定义指令在源码实现上与vue2有以下主要不同:
注册方式不同
vue2是通过Vue.directive()注册全局自定义指令,组件内通过directives选项注册局部自定义指令。
vue3是通过app.directive()注册全局自定义指令,组件内通过directives选项注册局部自定义指令。
钩子函数变化
vue2的钩子函数有bind、inserted、update等。
vue3只提供了beforeMount和mounted两个钩子函数。
钩子函数参数变化
vue2的钩子函数默认会传入el、binding等参数。
vue3的钩子函数不再默认传入任何参数,需要手动指定需要的参数。
实现机制不同
vue2中的自定义指令是通过Directive类实现的。
vue3中不再有Directive类,自定义指令直接通过钩子函数实现。
渲染函数处理不同
vue2的编译阶段会处理自定义指令,生成自定义指令的渲染函数。
vue3的编译阶段不再处理自定义指令,自定义指令逻辑全部在钩子函数中实现。 vue3对自定义指令的实现做了大幅精简,通过钩子函数直接实现自定义逻辑,渲染层面不再处理自定义指令,以此简化了内部逻辑 五、示例
输入框获取焦点示例:
Vue2:
Vue.directive(focus, {inserted: function(el) {el.focus()}
}) Vue3:
app.directive(focus, {mounted(el) {el.focus() }
})
