自定义指令（el代表绑定这个指令的节点对象：DOM）：directives：{x：{inserted（el）{}}}。
在Vue中，指令就是标签中v-打头的一种自定义的属性，它在vue运行了以后，就具有封装好了的功能，使用时非常简洁。
指令定义函数提供了几个钩子函数（可选） 。
1.bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
2.inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
3.update：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。
4.componentUpdated:所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
5.unbind:只调用一次， 指令与元素解绑时调用。
注意区别：
bind与inserted：bind时父节点为null，inserted时父节点存在；
update 与 componentUpdated：update是数据更新前，componentUpdated是数据更新后。
钩子函数参数
1.el:指令所绑定的元素，可以用来直接操作 DOM。
2.binding:一个对象，包含指令名称及该指令所绑定的表达式信息。
-
name:指令名 -
value:指令的绑定值，不包括v-前缀 -
oldvalue:指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用 -
expression:字符串形式的指令表达式。 -
arg：传给指令的参数
3.vnode:Vue 编译生成的虚拟节点。
4.oldVnode:上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
注意：除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
<body>
<div class="app">
<!-- 在Vue中，指令就是标签中v-打头的一种自定义的属性，它在vue运行了以后，就具有封装好了的功能，使用时非常简洁 -->
<p v-html="msg"></p>
<input type="text" v-model="count">
<!-- 这里的v-red是自定义指令 -->
<div v-red>hello</div>
<h2 v-color="`blue`">122</h2>
<input type="text" v-focus>
</div>
<script>
new Vue({
el:".app",
data:{
msg:"<b>hello</b>",
count:123
},
methods:{
},
directives:{
// 自定义指令
red:{
// inserted：绑定节点以后
inserted(el){
// 绑定这个指令的节点对象：DOM
console.log(el)
el.style.color="red"
}
},
color:{
inserted(el,option){
// option:代表绑定这个color属性等号后面的值（也就是这里的blue）
console.log(el,option)
el.style.color=option.value
}
},
focus:{
inserted(el){
// 获取焦点
el.focus()
}
}
}
})
</script>
