示例
import { createApp } from 'vue'
const app = createApp({})
// 注册
app.directive('my-directive', {
// 指令具有一组生命周期钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 在绑定元素的父组件挂载之后调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 在绑定元素的父组件卸载之后调用
unmounted() {}
})
// 注册 (函数指令)
app.directive('my-directive', () => {
// 这将被作为 `mounted` 和 `updated` 调用
})
// getter, 如果已注册,则返回指令定义
const myDirective = app.directive('my-directive')
vue中示例代码
<script> // lang="ts" setup
function LogIn_Click() {
// window.open("https://www.baidu.com"); /* 打开新页面 */
window.location.href="/#/login"; /* 切换当前页面 */
}
export default {
// 指令具有一组生命周期钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {
console.log("created");
},
// 在绑定元素的父组件挂载之前调用
beforeMount() {
console.log("beforeMount");
},
// 在绑定元素的父组件挂载之后调用
mounted() {
console.log("mounted");
},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {
console.log("beforeUpdate");
},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {
console.log("updated");
},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {
console.log("beforeUnmount");
},
// 在绑定元素的父组件卸载之后调用
unmounted() {
console.log("unmounted");
}
}
</script>