community/video_tutorials/vue_js/custom_directives

自定义指令指南 💡

Vue.js 的自定义指令功能允许开发者扩展 HTML 标签的行为，是实现交互逻辑的重要工具。以下是核心用法与示例：

全局自定义指令 ✅

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.backgroundColor = binding.value;
  }
})

使用示例：
<p v-highlight="yellow">高亮文本</p>
图片：

局部自定义指令 📌

在组件选项中定义：

directives: {
  focus: {
    update(el) {
      el.focus();
    }
  }
}

使用示例：
<input v-focus>
图片：

指令钩子函数 🔌

• bind: 指令第一次绑定到元素时调用
• insert: 插入到 DOM 时调用
• update: 所绑定的元素更新时调用
• componentUpdated: 组件更新时调用
• unbind: 指令与元素解绑时调用
  图片：

深入学习官方文档：Vue.js 指令系统
拓展案例：动态指令参数