单独实现vue指令

实现自定义 Vue 指令

在 Vue 中自定义指令可以通过全局或局部方式注册，用于直接操作 DOM 或添加特定行为。以下是实现方法：

全局注册指令

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

局部注册指令

new Vue({
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

指令钩子函数

自定义指令包含以下生命周期钩子：

• bind：指令第一次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用
• update：所在组件 VNode 更新时调用
• componentUpdated：所在组件及子组件 VNode 更新后调用
• unbind：指令与元素解绑时调用

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    // 初始化设置
  },
  update: function (el, binding, vnode, oldVnode) {
    // 根据变化更新
  }
})

指令参数说明

钩子函数接收以下参数：

• el：指令绑定的 DOM 元素
• binding：包含以下属性的对象
  • name：指令名（不含 v- 前缀）
  • value：指令的绑定值
  • oldValue：指令绑定的前一个值
  • expression：字符串形式的指令表达式
  • arg：传给指令的参数
  • modifiers：包含修饰符的对象
• vnode：Vue 编译生成的虚拟节点
• oldVnode：上一个虚拟节点

动态指令参数

指令可以接收动态参数：

<div v-mydirective:[argument]="value"></div>

函数简写

当需要在 bind 和 update 触发相同行为时，可以使用简写：

Vue.directive('color', function (el, binding) {
  el.style.color = binding.value
})

实际应用示例

实现一个改变元素颜色的指令：

Vue.directive('color', {
  bind: function (el, binding) {
    el.style.color = binding.value
  },
  update: function (el, binding) {
    el.style.color = binding.value
  }
})

<p v-color="'red'">这段文字会显示红色</p>

注意事项

• 指令名应全部小写
• 避免在指令中进行复杂的业务逻辑处理
• 指令主要应用于 DOM 操作
• 组件更新可能触发多次 update 钩子