vue3中使用自定义指令，js的写法

### 如何在 Vue 3 中使用 JavaScript 编写自定义指令

在 Vue 3 中，编写自定义指令允许开发者扩展 HTML 的功能并封装 DOM 操作逻辑。这可以通过全局注册或局部注册来完成。

#### 创建自定义指令

为了创建一个简单的自定义指令，在应用实例上通过 `app.directive` 方法进行全局注册：

import { createApp } from 'vue';
const app = createApp({});

// 注册名为 focus 的全局指令
app.directive('focus', {
    mounted(el) {
        el.focus();
    }
});

此代码片段展示了如何创建一个使元素自动聚焦的简单指令[^1]。

对于更复杂的场景，可以利用钩子函数提供更多的控制能力。这些钩子包括但不限于 `beforeMount`, `mounted`, `updated`, 和 `unmounted`:

app.directive('color-swatch', {
    beforeMount(el, binding) {
        // 设置初始颜色
        el.style.backgroundColor = binding.value;
    },
    updated(el, binding) {
        // 更新颜色当绑定值改变时
        el.style.backgroundColor = binding.value;
    }
});

这里展示了一个用于设置背景颜色变化的例子。

#### 使用自定义指令

一旦定义好指令，则可以在模板中像下面这样轻松地使用它：

<div v-color-swatch="'red'">红色方块</div>
<input v-focus />

上述例子中的第一个 div 将会有一个红色背景，而 input 输入框会在页面加载完成后获得焦点。