自定义指令分为全局指令和局部指令。全局指令可在任意vue组件内生效，局部指令仅在注册了指令的组件内生效。
全局指令和局部指令写法几乎相同。全局指令是在main.js内使用Vue.directive注册，局部指令是在组件的directives选项写入。
下面介绍一下指令的具体用法。
指令，常用于封装一些涉及dom的公共功能，比如表单的自动获取焦点，列表的下拉收缩等。
一、指令的钩子函数
指令对象共有五个钩子函数：bind、inserted、update、componentUpdated、unbind。这些参数均可选。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用
二、钩子函数的参数
-
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 编译生成的虚拟节点。移步 [dataset](https://cn.vuejs.org/v2/api/>VNode API</a> 来了解更多详情。 - <code>oldVnode</code>：上一个虚拟节点，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。
三.简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>directive自定义指令</title>
</head>
<body>
<div id="app">
<h2 v-text='msg'></h2>
<h2 v-upper-text='msg'></h2>
<h2 v-lower-case="msg"></h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
/*
需求：自定义两个指令
1.功能类似于v-text,但是转换为全大写:v-uppper-text
2.功能类似于v-text,但是转换为全小写:v-lower-text
*/
//1.全局的自定义指令
Vue.directive('upper-text', function (el, binding) { //el是真实的DOM，binding是传过来的数值
el.innerText = binding.value.toUpperCase();
})
new Vue({
el: "#app",
data() {
return {
msg: "helloWorld",
}
},
directives: {
'lower-case': function (el, binding) {
el.innerText = binding.value.toLowerCase()
}
}
})
</script>
</html>
image-20210702122201924
