17

1. 前言

本小节我们介绍 Vue 中的自定义指令。包括全局指令的注册、局部指令的注册、指令钩子函数的使用以及动态指令传参。其中，指令钩子函数和动态指令参数是本节的难点。

同学们需要充分理解每个指令钩子函数执行的时机、对动态指令参数多加练习才能对指令的使用得心应手。

2. 慕课解释

Vue 除了提供了默认内置的指令外，还允许开发人员根据实际情况自定义指令，它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行底层操作的时候。 – 官方定义

在之前的章节中我们学习了指令 v-show，他的实现原理就是操作 DOM 元素的样式 display，使之实现隐藏、显示的效果。在日常开发中，我们经常把一些对 DOM 大量相同的操作封装成指令。学好指令可以给我们的开发带来便利、提高效率。同学们需要总结业务中的各种场景，多加练习。

3. 注册自定义指令

Vue 自定义指令和组件一样存在着全局注册和局部注册两种方式。全局注册的自定义指令可以在项目中的所有组件中使用，局部注册的指令只能在当前组件内部使用。接下来我们分步介绍全局指令和局部指令的注册方式。

3.1 全局注册

我们可以通过调用 Vue.directive 的方式来定义全局指令， 它接收两个参数：1. 指令名，2. 指令的钩子函数对象。

命名：

• 短横线：<my-directive>
• 驼峰式：<MyDirective> 使用驼峰命名指令时，首字母最好以大写字母开头。

钩子函数对象：指令的钩子函数对象我们将在下面段落 4 中详细介绍。

注意：注册指令时，指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上 v- 前缀。

// 注册
// 驼峰命名
Vue.directive('MyDirective', {/\* \*/})
// 短横线命名
Vue.directive('my-directive', {/\* \*/})

// 使用
<div v-my-directive></div>

下面我们注册一个全局指令 v-focus，该指令的功能是在页面加载时，使得元素获得焦点。