Vue - 自定义指令

这篇文章介绍Vue自定义指令的方式，以input控件的自动聚焦为例。

定义一个全局指令的自动聚焦例子：
html代码：

定义一个局部指令的自动聚焦例子：
html代码：

自定义指令的钩子函数（生命周期函数）有bind、inserted、update、componentUpdated、unbind：
bind：在指令绑定到元素上时调用，只执行一次。可以在这里进行初始化设置。
inserted：在被绑定元素插入到父元素上时调用。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：与元素解绑时调用。

钩子函数（生命周期函数）中常用参数el、binding：
el：被绑定的元素的DOM对象，可以直接进行原生JS操作
binding：使用其中的value可以获取指令的绑定值（绑定的属性的属性值）

结论：
（1）如果要实现钩子函数之间的数据交互，可以使用el.dataset来设置
（2）在元素上进行绑定自定义指令时，必须使用v-开头