15vue学习——自定义指令

15vue学习——自定义指令

前言

当我们需要让一个文本框默认获得焦点的时候，我们应该怎么做呢？我们可能会想直接给这个文本框设置一个 id ，然后通过 id 获取该元素并设置 focus 属性。但是这样子的做法是和 vue 的思想相违背的， vue 并不提倡我们去操作 DOM 元素，那我们应该怎么做呢？接下来让我们一起来学习吧。

1. 自定义指令——在Vue 中可以把一系列复杂的操作包装为一个指令

（1）什么是复杂的操作呢？—— 复杂逻辑功能的包装、违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等。我们总是期望以操作数据的形式来实现功能逻辑。
（2）自定义指令的种类：全局指令 和 私有指令。

2. 自定义指令

2.1 全局指令
在所有的 vue 实例外部，Vue.directive(‘指令的名称’,{ 包含多个钩子函数的对象 })，如：

注意：
（1）第一个参数是该指令的名称，需用引号包裹起来，名称在定义的时候不需要加 v- 的前缀，但在调用的时候需要加上这个 v-for 前缀才可以生效
（2）第二个参数是一个对象，在该对象中包含了多个钩子函数

2.2 私有指令
在某个 vue 实例内部，新建一个directives 对象

注意：
（1）名称作为键，名称在定义的时候不需要加 v- 的前缀，但在调用的时候需要加上这个 v-for 前缀才可以生效
（2）值是一个对象，在该对象中包含了多个钩子函数

3. 钩子函数

3.1.1 钩子函数的执行时机
（1）bind：每当指令绑定到元素上的时候，就会立即执行这个 bind 函数，只执行一次
（2）inserted：表示元素插入到 DOM 中的时候，就会触发这个 inserted 函数，只执行一次
（3）update：当 DOM 元素更新前，就会触发 update 函数，可能会触发多次
（4）componentUpdated：当 DOM 元素更新后，就会触发 update 函数，可能会触发多次
（5）unbind：只调用一次，指令与元素解绑时调用，只执行一次
3.1.2 总结：
（1）和样式相关的操作，一般都可以在 bind 执行——样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
（2）和 js 相关的操作，一般都可以在 inserted 执行——在元素绑定指令的时候，还没有插入到 DOM 中去，这时候调用 focus 这种和行为相关的方法是没有作用的。因为只有当一个元素插入DOM之后，才能有获取焦点这些行为

3.2 钩子函数的参数
（1）第一个参数：el——表示了绑定了该指令的那个元素，该el是一个原生的 js 对象
（2）第二个参数：binding——其中最主要的三个属性就是 name value expression

4. 钩子函数的简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

该函数只会在 bind 和 inserted 时触发