Vue.js前端开发技术-自定义指令 - 图文

第6章 自定义指令

课程目标

nVue 除了基本指令外，允许用户自 定义指令，自定义指令是对基本指令的扩展与补充。

n本章介绍自定义指令，注册全局以及局部自定义指令。

n通过学习自定义指令更加深入了解钩子函数的作用，钩子函数参数在自定义指令的使用。

2

n 自定义指令

n 注册全局

n 局部自定义指令n 钩子函数 n 钩子函数参数 n 指令参数 n 对象字面量

课程内容

3

6.1 自定义指令概述

n除了 Vue 提供的基本指令外(如 v-model 和 v-show ), Vue 也允许注册自定义指令。自定义指令是用来操作 DOM 的。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的 DOM 操作，并且是可复用的。

n自定义指令分为全局指令和局部指令。

4

6.1.1 自定义全局指令

n打开百度首页，搜索输入框就是直接获取焦点的。如图 6-1 所示。该功能其实可以通过注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点。

图 6-1 获取焦点

5