指令，如v-show ,v-if等等都有各自的功能，然而我们经常会感觉这些指令不够用，所以我们需要自己定义一些指令：
Vue.directive("click-fang",{
update:function(el,binding,vnode , oldVnode){
console.log(el,binding,vnode,oldVnode)
el.style.backgroundColor="red"
}
})
var component1={
data:function(){
return{
count:1
}
},
template:`
模板一绑定事件{{count}}
`
}
如上是一个简单的指令，作用很简单，就是点击后将背景变成红色。从上面我们可以看到一个钩子函数update，代表组件内容有更新的时候会触发，执行内部代码——
钩子函数
一个指令对象可以提供如下几个钩子：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
一般来说，我们只需要前两个，即bind和update即可。
钩子函数的参数
可以看到钩子函数有四个参数，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钩子中可用。
了解了这些我们就可以写一写指令了：
Vue.directive("click-fang",{
update:function(el,binding,vnode , oldVnode){
console.log(el,binding,vnode,oldVnode)
el.style.backgroundColor="red"
}
})
Vue.directive("font-fang",{
bind:function(el,binding,vnode,oldVnode){
el.style.fontSize=binding.value+"px"
},
update:function(el,binding,vnode,oldVnode){
el.style.fontSize=binding.value+"px"
}
})
Vue.directive("height-fang",function(el,binding){
el.style.height=binding.value*20+"px"
})
var component1={
data:function(){
return{
count:1
}
},
template:`
模板一绑定事件{{count}}
`
}
var vue=new Vue({
el:".app",
components:{
component1
}
})
如上，我们添加了三个组件，分别控制：
click-fang:点击后背景变红
font-fang:点击后根据count的值变更字体大小
height-fang:点击后变更元素高度
其中，font-fang中使用了bind和update两种钩子，使得组件得到了初始化和随着组件内容的更新而变化。
可以看到el拿到后我们可以将其当做html元素直接修改css。
简写组件
Vue.directive("height-fang",function(el,binding){
el.style.height=binding.value*20+"px"
})
如上就是一个简写的指令，他会执行bind和update，并且执行同样的方法。
局部指令
指令也可以直接在组件中定义：
var component1={
data:function(){
return{
count:1
}
},
template:`
模板一绑定事件{{count}}
`,
directives:{
fontcolorFang:{
inserted:function(el){
el.style.color="green"
}
}
}
}