简介
除了核心功能中我们可以直接使用的 v-show和v-model等，我们还可以进行注册自定义指令。
在vue2.0中，代码的复用和抽象的主要形式就是组件。
然而有的时候，我们还是需要对底层的dom元素进行操作。这时候就会需要用到自定义指令。
举例如下：
当页面加载完毕时，输入框自动获得焦点，注意：autofocus在移动版的safari上不工作。事实上，只要在你打开页面后还没有点击任何内容的情况下，这个输入框就应该是处于聚焦状态的。我们现在尝试使用指令来实现这个功能。
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注册局部指令，也可以在vue 的选项中新添加一项 directives：
<template>
<div class="test">
<h2>vue practise</h2>
<input v-focus type="text" placeholder="hahahha">
</div>
</template>
<script>
export default{
data(){
return{
}
},
directives:{
focus:{
inserted(el){
el.focus();
}
}
}
}
</script>
这里是在指令 directives选项中设置指令的名称，我们这里语义化的设置为focus，在focus中执行方法。所传入的el参数就是当前的元素。
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>
钩子函数
在 directives 指令选项中，可以定义如下几个钩子函数：
1.bind:只能够调用一次，在指令刚被绑定到元素上的时候开始滴啊用，我们也可以用它在进行一次性的初始化设置。
2.inserted:被绑定的元素插入父节点的时候调用，只是保证父节点还存在，但是不一定已经被插入文档中了。
3.update:所在的组件vnode更新时调用，但是可能发现在其子vnode更新之前，指令的值可能发生改变，但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
4.componentUpdate:指令所在的组件和他的子组件全部更新之后执行。
5.unbind:指定也只会执行一次，指令和他的元素解绑的时候调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数的参数
指令的钩子函数会被传入以下的参数：
-
el：指令所绑定的元素，可以用来直接操作 DOM 。 -
binding：一个对象，包含以下属性：-
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 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了el之外，其他参数都是只读的，一般不建议修改。如果需要在钩子函数之间共享数据，建议通过 dataset 来修改。
