在vue中除了一些内置指令（v-if，v-model）外，我们还可以自定义一些指令，例如:
html结构层
<p v-class=“ ‘red’ ”>我是全局自定义指令</p>
js行为层
<script>
// 注册一个全局自定义指令 v-class
Vue.directive('class', {
// 当绑定元素插入到 DOM 中。
inserted: function (el,value) {
el.style.color=value.value;
}
})
</script>
效果图：
<div>
<input v-focus>
</div>
new Vue({
el:"#app",
// 注册一个局部自定义指令 v-focus
directives:{
// 当绑定元素插入到 DOM 中。
focus:{
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
效果图：
补充:钩子函数
指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated: 所在组件的 VNode及其孩子的 VNode全部更新时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (包括el，binding，vnode，oldVnode) 。
在vue中除了一些内置指令（v-if，v-model）外，我们还可以自定义一些指令，例如:
