Vue自定义全局指令

当我们使用 Vue 构建应用时，经常需要在模板中添加一些自定义的指令，来实现期望的功能，这些指令可以全局定义，也可以定义在组件内。

全局指令是指在应用的 main.js 文件或其他入口文件中注册的指令，可以在应用的任何组件中使用。定义全局指令只需要在 Vue 对象上调用 directive 方法，语法如下：

Vue.directive('directiveName', {

  // 指令相关逻辑

})

其中 directiveName 是指令的名称，第二个参数是一个对象，其中包含了指令的配置选项，常用的钩子函数有 bind、inserted、update、componentUpdated 和 unbind，这些函数会在指令与元素绑定、插入到 DOM 中、数据更新、组件重新渲染和解绑等不同阶段触发。

例如，我们可以创建一个全局指令 v-focus，它在元素插入到 DOM 中后自动获得焦点：

Vue.directive('focus', {

  inserted: function (el) {

    el.focus()

  }

})

然后在组件的模板中使用 v-focus 指令即可：

<input v-focus>