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,该指令的功能是在页面加载时,使得元素获得焦点。

实例演示
预览 复制