一、在 main.js 文件中创建自定义指令，并绑定到 app 实例上。
// ...... const app = createApp(App); // 全局自定义指令【完整写法】 app.directive("big", { // 绑定的元素挂载时执行 mounted: (el, binding) => { console.log(el); // 绑定指令的 DOM 元素 console.log(binding); // 绑定指令的对象 el.innerText = binding.value * 10; }, // 绑定的值更新时执行 updated: (el, binding) => { console.log(el); // 绑定指令的 DOM 元素 console.log(binding); // 绑定指令的对象 el.innerText = binding.value * 10; }, }); // 全局自定义指令【简写】 // app.directive("big", (el, binding) => { // console.log(el); // 绑定指令的 DOM 元素 // console.log(binding); // 绑定指令的对象 // el.innerText = binding.value * 10; // }); // ...... app.mount("#app");
二、在需要的页面中，直接使用即可。
<template> <p>当前的num值是：<span v-text="num"></span></p> <p>放大10倍的num值是：<span v-big="num"></span></p> <button @click="num++">点击num+1</button> </template> <script setup> import { ref } from 'vue' let num = ref(1); </script>
效果：
自定义指令【生命周期】：
const 指令名 = { // 绑定的元素创建时执行 created(el, binding) { }, // 绑定的元素挂载前执行 beforeMount(el, binding, vnode) { }, // 绑定的元素挂载后执行【常用于修改 DOM 元素】 mounted(el, binding, vnode) { }, // 绑定的数据更新前执行 beforeUpdate(el, binding, vnode, prevVnode) { }, // 绑定的数据更新后执行【常用于修改绑定的数据】 updated(el, binding, vnode, prevVnode) { }, // 绑定的元素卸载前执行 beforeUnmount(el, binding, vnode) { }, // 绑定的元素卸载后执行 unmounted(el, binding, vnode) { } }
自定义指令【参数详情】：
el: 绑定的 DOM 元素
binding: 绑定的对象，包含以下属性。
value: 当前值（新值）。
oldValue: 修改前的值（旧值）。
arg: 传递的参数。例如 v-big:foo 中的参数是 foo 。
modifers: 修饰符对象。例如 v-big.bar 中的修饰符是 { bar: true } 。
instance: 组件实例对象。
dir: 指令对象。
vnode: 绑定的底层虚拟 DOM （新的）。
prevNode: 修改前的底层虚拟 DOM （旧的）。
