vue 如何设置自定义指令

1. vue 自定义指令

在 Vue.js 中，你可以创建自定义指令（Custom Directive）来封装可重用的 DOM 操作。

Vue 提供了一种机制来扩展其内置指令的功能，允许你定义自己的指令并使用它们。

下面是如何定义和使用一个自定义指令的基本步骤：

1.1. 定义自定义指令

你可以在 Vue 实例或 Vue 组件中定义一个自定义指令。

定义时需要提供一个或多个钩子函数，这些函数会在特定时刻被调用。

例如，我们定义一个 v-focus 指令，用于让元素在页面加载后获得焦点：

// 在 Vue 实例中注册全局指令
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});

或者在组件内部注册局部指令：

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
}

1.2. 使用自定义指令

定义了自定义指令后，你可以在模板中像使用内置指令一样使用它：

<input v-focus placeholder="Focus me!">

1.3. 钩子函数

自定义指令可以有以下钩子函数：

• bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted: 被绑定元素插入到 DOM 中时调用。

• update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

• componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind: 只调用一次，指令与元素解绑时调用。

每个钩子函数接收以下参数：

• el: 指令绑定的元素，可以用来直接操作 DOM。

• binding: 一个对象，包含：

  • value: 指令的传递值，例如：v-my-directive="1 + 1" 中，binding.value 将会是 2。

  • oldValue: 上一个值，仅在 update 和 componentUpdated 钩子中可用。

  • expression: 字符串形式的未解析的绑定表达式，例如 v-my-directive="1 + 1" 中，expression 是 "1 + 1"。

  • arg: 传给指令的参数，如 v-my-directive:foo 中的 "foo"。

• vnode: Vue 编译生成的虚拟节点。

• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

这就是在 Vue.js 中创建和使用自定义指令的基本流程。