前言
Vue 允许注册自定义指令
1、例子1 获取输入框焦点
<template> <div> <input type='text' v-focus/> </div> </template> <script> export default { name: 'HelloWorld', directives:{ focus:{ mounted(el){ el.focus(); } } } } </script>
1.1、钩子函数
指令定义函数提供了几个钩子函数（可选）
| 钩子函数 | 作用 |
| created | : 在绑定元素的属性或事件监听器被应用之前调用。 |
| beforeMount | : 指令第一次绑定到元素并且在挂载父组件之前调用。 |
| mounted | : 在绑定元素的父组件被挂载后调用。 |
| beforeUpdate | : 在更新包含组件的 VNode 之前调用。。 |
| updated | : 在包含组件的 VNode 及其子组件的 VNode 更新后调用。 |
| beforeUnmount | : 当指令与在绑定元素父组件卸载之前时，只调用一次。 |
| unmounted | : 当指令与元素解除绑定且父组件已卸载时，只调用一次。 |
1.1.1、钩子函数参数
钩子函数的参数有：
1、el
el 指令绑定到的元素。这可用于直接操作 DOM。
2、binding
binding 是一个对象，包含以下属性：
- instance：使用指令的组件实例。
- value：传递给指令的值。例如，在v-my-directive=“1 + 1” 中，该值为 2。
- oldValue：先前的值，仅在beforeUpdate 和updated 中可用。值是否已更改都可用。
- arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为"foo"。
- modifiers：包含修饰符 (如果有) 的对象。例如在v-my-directive.foo.bar 中，修饰符对象为{foo: true，bar: true}。
- dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中
{ mounted(el) { el.focus() } }
3、vnode
作为 el 参数收到的真实 DOM 元素的蓝图。
4、prevNode
上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。
