一、构建指令
1. 生命周期
const myDirective = {
created(el, binding, vnode) {
console.log("指令创建");
},
beforeMount(el, binding, vnode) {
console.log("指令在元素插入 DOM 前");
},
mounted(el, binding, vnode) {
console.log("指令在元素插入 DOM 后");
},
beforeUpdate(el, binding, vnode, prevVnode) {
console.log("指令在组件更新前");
},
updated(el, binding, vnode, prevVnode) {
console.log("指令在组件更新后");
},
beforeUnmount(el, binding, vnode) {
console.log("指令在元素移除 DOM 前");
},
unmounted(el, binding, vnode) {
console.log("指令在元素移除 DOM 后");
},
};
export default myDirective;2. 生命周期参数
生命周期函数参数 el、binding、vnode、prevNode，分别表示：
<input v-focus:a.b="10" />
<!--
{
value: 10,
arg: 'a',
modifiers: { b: true },
oldValue: /* 上一次更新时 value 的值 */
} -->3. 创建指令
在 src/directive 下创建一个 Focus.js 文件，用来自动 input 获取焦点。
// Focus.js
const Focus = {
mounted: (el) => el.focus(),
};
export default Focus;二、引入指令
在 src/main.js 中引入指令
// main.js
import { createApp } from "vue";
import App from "./App.vue";
/** 指令 */
import Focus from "@/directive/Focus.js";
const app = createApp(App);
app.directive("focus", Focus);
app.mount("#app");三、使用指令
在组件中使用指令
<input v-focus v-model="value" />
