我们在学习vue的时候会学习多个指令，如v-show,v-text,v-pre等等。但如果我们想要完成一些现有指令无法完成的操作的时候，就应该使用自定义指令来实现我们想要的操作。所以现在我们就来简单讲解Vue自定义指令directives。
目录
自定义指令有全局指令和局部指令。
自定义指令directives
全局指令
全局指令不在 new Vue里面写， 脱离 new Vue()。
Vue.directive() 他是一个函数，它拥有两个参数。参数1: 自定义指令的名字，参数2是一个对象。
Vue.directive(参数1,参数2)
Vue.directive( '自定义指令的名字' ,{
//内容，自定义指令的钩子函数与其要实现的功能的代码块
})
案例：自定义指令之输入框的聚焦指令
结合案例讲解会清楚易懂，代码如下：
<div id="app">
<input type="text" v-focus>
</div>我们为这个自定义指令取名为focus，用v-名字的办法使用它。在自定义指令的第二个参数里面，使用自定义指令的钩子函数inserted(){}，写一个函数，传参是el，指令绑定的那个元素。在函数内使用el.focus()来使得输入框聚焦。
在使用自定义指令的时候，我们需要使用到自定义指令的钩子函数。在最后我们会有解释。
//指令
//全局指令-不在vue里面写，
//局部指令- 在vue里面写
Vue.directive('focus', {
//inserted 被绑定原生插入节点时候调用的钩子函数，可以看成一个普通函数
//在调用focus的时候就是在调用inserted，然后执行的focus这个方法
inserted(el) {// inserted是函数，不可更改，否则不执行不聚焦
console.log(el);
// el 表示指令所绑定的元素,用来操作我们的dom，他是一个方法
// el 会自动把input里面焦点自动获取出来，相当于给input绑定一个事件
//focus 式原生的获取焦点事件名称
el.focus()
}
})
new Vue({
el: '#app',
data: {
},
methods: {
},
}) 效果如图：在打开页面的时候就完成了输入框聚焦。
局部指令
局部指令- 在vue实例里面写
new Vue({
el:'#app',
data:{},
directives:{//这个就是局部指令
自定义指令名字：{
//代码块
}
}
})
我们尝试使用局部指令完成输入框的聚焦指令。
代码如下：
new Vue({
el: '#app',
data: {
},
methods: {
},
directives: {
focus: {
inserted(el) {
console.log(el);
el.focus()
}
}
}
})带参数的自定义指令
自定义指令是可以传递参数的，比如说v-指令名="携带的参数",这个携带的参数，就是会从我们vue实例的data里面去寻找的数据。
直接上案例,我们写了一个div，想用自定义指令的方式把这个div里面的文字变成红色，然后写了一个h1标签，想为这个h1标签的背景颜色变成蓝色：
<div id="app">
<div v-color="redss">内容</div>
<h1 v-background-color="back">hahaha</h1>
</div>首先我们在vue实例data里面写好相应的数据，在后面在自定义指令里面当作参数进行传递。
然后我们在局部自定义指令里面，使用bind这个钩子函数，参数是el(自定义绑定的元素)和binding(含有传递参数的信息，是一个对象，建议打印一下这个binding仔细看看)。
最后在函数代码块内，把 binding.value.color(参数里面所需要的数据)赋值给el.style.color(元素的具体样式) 就好了。
new Vue({
el: '#app',
data: {
redss: {
color: 'red'
},
back:{
backgroundcolor:'blue'
}
},
methods: {
},
directives: {//局部的自定义指令
color: {//color是一个对象
bind(el, binding) {//binging是参数，也是一个对象
console.log(binding);
el.style.color = binding.value.color
}
},
backgroundColor:{
bind(el, binding) {//binging是参数，也是一个对象
// console.log(binding);
el.style.background = binding.value.backgroundcolor
}
}
},
})效果：
全局指令的传参与此类似，不多赘述。
自定义指令directives的钩子函数
在使用自定义指令的时候我们都会使用到自定义指令的钩子函数，就是分别在自定义指令绑定元素生效到解绑失效时候，分别会在不同时间执行的普通函数。我们代码的书写，就是写这几个钩子函数里面，配合钩子函数不同的执行时间来实现不同的，我们想要的效果。
(1) bind()绑定指令到元素上，只执行1次。
(2) inserted ()绑定 了指令的元素插入到页面中展示时调用，很常用。
(3) update ()所有组件节 点更新时调用
(4) componentUpdated() 指令所在的节点及其子节点全部更新完成后调用。
(5)unbind () 解除指令和元素的绑定，只执行1次。