vue 支持开发者自定义诸如v-for、v-bind之类的指令，下面记录下学习结果以作备忘。官方介绍如下：

vue - 自定义指令

注册指令

可以在vue挂载前使用directive()方法注册指令，该方法接收两个参数，第一个是指令名，第二个是触发该指令后执行的方法。如下代码将在全局注册一个v-focus指令，调用该指令将使调用组件获取焦点：

Vue.directive('focus', (el, binding) => {
  el.focus()
})

执行方法也有两个参数，其余参数见官方文档，第一个参数为调用该指令的组件，第二个参数包含了该指令的一些信息。

调用

在任意组件中都可以使用该指令。使用后，该组件会在页面加载时自动获取焦点

<template >
  <input v-focus>
</template>

调用时携带参数

我们知道在使用vue内置指令时是可以给其发送指定的参数，如下：

<template v-bind:data="someParams">
  ...
</template>

我们自己注册的指令也可以使用参数，并且不需要进行任何修改，使用指令时传递的参数会被vue放在指令触发方法的第二个参数binding中，参数名放在binding.arg中，参数值放在binding.value中，如下：

// 指令注册处
Vue.directive('focus', (el, binding) => {
  console.log(binding.arg)
  console.log(binding.value)
  el.focus()
})

// 调用指令
<input v-focus:test="123">

// 控制台输出
> test
> 123

vue会将参数值自动解析为一个js表达式

钩子函数

我们可以利用钩子函数来指定自定义指令被调用后应该在何时执行对应的代码。如下，focus指令将在调用组件插入（inserted）父节点后执行代码：

Vue.directive('focus', {
  inserted: (el, binding) => {
    el.focus()
  }
})

vue支持多个钩子函数，详情见 vue - 自定义指令钩子，本文开头的简单写法会在绑定bind 和 组件更新update时调用