- 指令生命周期关键字变更
在3.0中指令的注册和其生命周期是这样的
import { createApp } from 'vue'
const app = createApp({})
// 注册
app.directive('my-directive', {
// Directive has a set of lifecycle hooks:
// called before bound element's parent component is mounted
beforeMount() {},
// called when bound element's parent component is mounted
mounted() {},
// called before the containing component's VNode is updated
beforeUpdate() {},
// called after the containing component's VNode and the VNodes of its children // have updated
updated() {},
// called before the bound element's parent component is unmounted
beforeUnmount() {},
// called when the bound element's parent component is unmounted
unmounted() {}
})
在2.x中指令的注册和其生命周期是这样的
import Vue from 'vue'
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
- 全局directive
与Vue 2.x的使用方法基本相同
在main.js中添加全局directive。
在3.0中创建vue实例的方式不再是new Vue,而是使用createApp方法进行创建
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('focus', {
// When the bound element is mounted into the DOM...
mounted(el) {
// Focus the element
console.log(el);
el.focus()
}
})
app.mount('#app')
在其他单文件组件调用全局directive
<template>
<input type="text" name="" id="" v-focus>
</template>
- 局部使用directive
与Vue 2.x的使用方法基本相同
在单文件组件中使用directive
<template>
<input type="text" name="" id="" v-focus>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() { return { };},
directives: {
focus: {
// 参数 el, binding, vnode, oldVnode
mounted: function (el) {
el.focus()
}
}
}
}
</script>
————————————————
版权声明:本文为CSDN博主「GuoyeZhang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/aa390481978/article/details/108510753