vue3自定义指令 +js

### Vue 3 自定义指令的创建与使用

#### 创建自定义指令

在 Vue 3 中，可以通过 `app.directive` 方法注册全局自定义指令。这使得该指令可以在整个应用程序中的任意模板内使用。

对于简单的逻辑，可以直接传递一个函数作为参数给 `directive` 方法：

// 函数形式的简单指令
app.directive('focus', (el, binding) => {
    if (binding.value === true) {
        el.focus();
    }
});

更复杂的场景下，则可以传入一个对象，此对象包含了多个生命周期钩子函数，如 `mounted`, `updated` 和 `beforeUnmount` 等。这些钩子允许对指令行为进行更加精细控制[^5]。

// 对象形式的复杂指令
app.directive('highlight', {
    mounted(el, binding) {
        let color = binding.arg || 'yellow';
        el.style.backgroundColor = color;
    },
    updated(el, binding) {
        // 更新时重新设置背景色
        let newColor = binding.newValue ? binding.newValue : 'yellow';
        el.style.backgroundColor = newColor;
    }
});

#### 使用自定义指令

一旦完成了自定义指令的定义，在模板里就可以像使用其他内置指令一样轻松调用了。只需以 `v-` 开头加上之前命名的名字即可[^1]。

<!-- 应用 focus 指令 -->
<input v-focus="true" placeholder="点击这里获得焦点"/>

<!-- 应用 highlight 指令并指定颜色参数 -->
<p v-highlight="'red'">这段文字会高亮显示</p>

此外还可以利用绑定的对象属性来动态改变样式或其他特性[^2]。

<div id="example">
  <!-- 动态绑定值到 directive -->
  <span v-highlight="{color: dynamicColor}">{{ message }}</span>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      message: "Hello!",
      dynamicColor: "blue"
    };
  }
});

// 注册 highlight 指令处理程序...
app.mount('#example');
</script>