Vue 自定义指令

学习创建自己的Vue指令：v-focus、v-color等，封装可复用的DOM操作 · 难度：进阶 · +20XP

什么时候需要自定义指令？

当你有需要直接操作DOM的逻辑，而且这个逻辑要在多个组件中复用时，就适合自定义指令。

常见例子：自动聚焦输入框、点击外部关闭弹窗、图片懒加载、拖拽排序。

创建一个指令

// 全局注册
app.directive("focus", {
  mounted(el) {
    el.focus();  // 指令绑定的元素挂载后自动聚焦
  }
});
// 使用
<input v-focus />

指令的钩子函数

钩子	时机
created	元素创建时
mounted	元素挂载到DOM ⭐最常用
updated	组件更新后
unmounted	元素卸载后

接收参数和值

// v-color:arg="value"
app.directive("color", {
  mounted(el, binding) {
    el.style.color = binding.value;     // 指令的值
    console.log(binding.arg);            // 指令的参数
    console.log(binding.modifiers);      // 修饰符对象
  }
});
// 使用：<p v-color="red">红色文字</p>

常用简写

如果只需要 mounted 和 updated，可以直接写函数：

app.directive("color", (el, binding) => {
  el.style.color = binding.value;
});

动手试试

右边演示了三个自定义指令：v-focus、v-color、v-highlight。