Vue3 自定义指令

在 Vue 3 中，自定义指令允许你在 DOM 元素上创建自定义的行为或效果。这些指令可以与 Vue 内置指令（如 v-if、v-for）一起使用，来增强 Vue 组件的功能。下面是如何在 Vue 3 中定义和使用自定义指令的步骤和示例。

定义自定义指令 - 修改元素颜色

自定义指令是通过 app.directive 方法注册的。指令的生命周期钩子函数与 Vue 的生命周期钩子类似，常用的钩子函数有 created、beforeMount、mounted、beforeUpdate、updated 和 unmounted。

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

// 注册自定义指令
app.directive('my-directive', {
    // 当指令绑定到元素上时调用
    created(el, binding, vnode) {
        el.style.color = binding.value; // 设置颜色
    },