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. 钩子函数

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