Vue实战时用到的API(四)：directives

前言

我们在使用vue开发的时候经常用到一些指令，v-for，v-model，v-if 等等，这些都是vue的内置指令，除了这些，其实我们也可以去自定义指令，这里用到的就是 directives 。

自定义指令

首先自定义指令也是分成全局指令和局部指令。 全局指令如下：

Vue.directives('name',{
 fun:function(){
   //钩子函数
 }
})

局部指令即在组件里添加如下选项：

directives:{
	name:{
  	fun:function(){
      //钩子函数
    }
  }
}

如上我们就实现了一个 v-name 的指令，至于这个指令的作用就需要你在钩子函数 fun 里写清楚了。接下来让我们再看看钩子函数有哪些？

自定义指令的钩子函数

常见的自定义钩子函数见官方文档如下：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

再看下官方文档对钩子函数的参数介绍：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

实战

在项目里希望实现，进入页面时，其中一个输入框聚焦并把提示信息等显示出来，这里聚焦就可以用自定义指令去完成，如下：

directives: {
  focus: {
    inserted: function(el) {
      el.focus()
    }
  }
}

然后在想要一开始就聚焦的输入框加上指令 v-foucs 即可实现效果。这是我对自定义指令的第一次应用。