vue自定义指令

Vue.js 提供了自定义指令的功能，可以用来封装常用的 DOM 操作或者添加特定的行为。自定义指令分为全局指令和局部指令两种。

## 全局指令

在 Vue 实例化之前定义一个全局指令，这个指令可以在任何 Vue 实例中使用。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 指令的定义
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在上面的例子中，我们定义了一个名为 `v-focus` 的全局指令，用于将元素聚焦。这个指令的定义包含 `inserted` 钩子函数，它会在绑定元素插入到父节点时调用。

接下来，在模板中使用这个指令：

<input v-focus>

这样，当这个输入框被插入到页面中时，它会自动获取焦点。

## 局部指令

局部指令只能在当前组件中使用，它的定义方式与全局指令有所不同。

Vue.component('my-component', {
  template: '<input v-model="message" v-focus>',
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})

在上面的例子中，我们在组件的选项中定义了一个局部指令 `v-focus`，它的定义方式与全局指令相同，只不过是在 `directives` 选项中定义而已。

接下来，在模板中使用这个指令：

<my-component></my-component>

这样，当 `my-component` 组件被插入到页面中时，它的输入框元素会自动获取焦点。

以上就是 Vue.js 自定义指令的基本用法。需要注意的是，指令的钩子函数可以有多个，每个钩子函数都有特定的用途，具体可以参考 Vue.js 的官方文档。