Vue 除了核心功能默认内置的指令 (例如 v-model
和 v-show
),Vue 也允许注册自定义指令。
- 注意,在 Vue 中,代码复用和抽象的主要形式是组件。
- 然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
Vue自定义指令分为两种:
- 自定义局部指令
- 自定义全局指令
通过自定义指令 v-focus 来举例 Vue3中某个元素挂载完成后获取输入框焦点:
1. 局部指令的实现方式
<script setup>
// 自定义指令名称的方式: vNameOfDirective
const vFocus = {
mounted: (el) => {
console.log("v-focus mounted");
el.focus()
}
}
</script>
<template>
<div>
<input type="text" v-focus>
</div>
</template>
<style scoped>
</style>
2.全局指令的实现方式
// mian.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).directive("focus", {
mounted: (el) => {
console.log("v-focus mounted");
el.focus()
}
}).mount('#app')
贴上自定义指令的生命周期
// 注册
app.directive('my-directive', {
// 指令具有一组生命周期钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 在绑定元素的父组件挂载之后调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 在绑定元素的父组件卸载之后调用
unmounted() {}
})