什么是自定义指令

vue 官方提供了 v-for、v-model、v-if 等常用的内置指令，如果内置指令无法满足需求，vue 还允许开发者根据需要来自定义指令。

vue 中的自定义指令分为两类，分别是：

• 私有自定义指令：在某个组件下声明的指令，叫做私有指令
• 全局自定义指令：在main.js入口文件中声明的指令，叫做全局指令

声明私有自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令，示例代码如下：

使用自定义指令

如上图所示，定义了一个名字为 focus 的自定义指令，功能是让使用的标签产生聚焦行为，在使用自定义指令时，需要加上 v- 前缀，示例代码如下：

注意：自定义指令在使用时，必须以 v- 前缀开头，在声明自定义指令时，不需要加 v- 前缀。

声明全局自定义指令

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明，在 main.js 入口文件中，拿到 app 应用实例后，调用这个实例所提供的 directive 方法，它可以接收两个参数，一个是自定义指令名称，一个是配置对象，根组件挂载到 DOM 且所有子组件挂载完成后自动触发mounted方法。

示例代码如下：

全局自定义指令可以多次声明：

updated函数

mounted 函数只在元素第一次插入 DOM 时被调用，当 DOM 更新时 mounted 函数不会被触发。

updated 函数会在每次 DOM  更新完成后被调用。

比如：默认对 input 聚焦，当点击页面中的 button，页面信息发生变化时，此时 button 将被聚焦，input 将失去焦点，若依然想让 input 聚焦，此时需要用到 updated 函数，即：页面中的任意 DOM 发生变化时，只要标签上绑定了自定义指令，都会触发自定义指令中的 updated 函数。

自定义指令的优先级

私有自定义指令优先级高于全局自定义指令。

当私有自定义指令和全局自定义指令名称相同时，全局自定义指令将被覆盖，无论自定义指令中的函数是否相同（比如全局使用了 mounted 方法，私有使用了 updated 方法），全局自定义指令都将失效。

验证一下，当页面中的任意 DOM 发生变化时，仅会触发私有自定指令中的 updated 函数：

函数简写

如果 mounted 和 updated 函数中的逻辑完全相同，则可以简写成如下格式：

指令的参数值

在绑定指令时，可以通过“等号”的形式，为指令绑定具体的参数值：

声明自定义指令时，通过第二个形参，接收参数值：