当前位置: 首页 > Web前端 > vue.js

Vue3.x--Customdirectivesuse

时间:2023-03-31 19:47:34 vue.js

vue3.x:Customdirectives根据文档可以知道,3.x的指令相对于2.x做了一些改动,自定义指令的API也发生了变化它的名字,更接近Componentlifecycle这个名字。创建-新!在应用元素的属性或事件侦听器之前调用。bind→beforeMountinserted→mountedbefore更新:新!这是在元素本身更新之前调用的,很像组件生命周期挂钩。更新→删除!update相似点太多,所以这个是多余的,改用updated。componentUpdated→updatedbeforeUnmount:新!类似于组件生命周期钩子,它会在元素卸载之前被调用。unbind->unmounted在2.x中对自定义指令中的一些方法名称和底层进行了一些更改。3.x中的自定义指令对象如下所示。constMyDirective={beforeMount(el,binding,vnode,prevVnode){},mounted(){},beforeUpdate(){},//newupdated(){},beforeUnmount(){},//newunmounted(){}}下面是一个官方的实现入口页面自动焦点输入的例子directive组件声明在组件内部,和data同级使用全局声明声明在main.jsNote:import{createApp}from'vue'importAppfrom'./Appbeforemounting.vue'constapp=createApp(App)app.directive('focus',{//当绑定元素挂载在DOM...mounted(el){//焦点元素el.focus()}})app.mount('#app')//createApp(App).mount('#app')