https://blog.csdn.net/smlljet/article/details/91874728
指令是带有 v- 前缀的特殊属性。指令的作用是当表达值发生变化时将副作用反应性地应用于 DOM。Vue.js 提供了大量的指令供你使用。你可能已经使用过 v-if、v-repeat、v-model 和 v-show 等指令。
<div v-test='name'></div>
局部自定义指令
directives:{
test:{
inserted: function (el,binding) {// 指令的定义
/ /el为绑定元素，可以对其进行dom操作
console.log(binding) //一个对象，包含很多属性属性
},
bind: function (el, binding, vnode) {
el.innerHTML =binding.value
}
}
},
我们可以***全局自定义一个指令v-red，来修改HTML元素的背景色为红色:
<div id="box">
hello<span v-red> welcome</span>
</div>
<script type="text/javascript">
Vue.directive('red',{
inserted:function(el){
el.style.background = 'red';
}
});
var vm = new Vue({
data:{
},
}).$mount('#box');
</script>
指令名
最基本的自定义指令只有一个名称。它不接受任何参数也没有任何修饰符。如果不传递值，这将不是很灵活，但是你仍旧可以拥有DOM元素的一些功能。您可能熟悉的一个示例是v-else指令。 以下是我们即将创建的自定义指令的示例：
<app-navigation v-sticky></app-navigation>
传值给指令 例如v-if 与参数的区别？
你可以将值传给自定义指令。这是一个***例子：
<div v-if="isVisible">Show this</div>
在这个例子中，如果属性值为 true 的话则显示 v-if 指令。 我们知道这是在***寻找属性值，因为它包含在***引号中。相反，如果我们想将一个***字符串当成值传给指令，你可以执行以下操作：
<div v-color="'red'">Show this</div>
创建自定义指令
现在你了解了 Vue.js 中指令的基础知识。 除了核心中提供的默认指令集外，Vue 还允许您注册自己的自定义指令。 让我们创建自己的自定义指令吧。
在它的基础上，我们可以使用 Vue.directive 创建一个全局指令并为其命名。 以下是使用名称 sticky 创建自定义指令的示例。
Vue.directive('sticky');
当我们想在DOM元素上使用这个自定义指令时：
<app-navigation v-sticky></app-navigation>
现在我们已经创建了我们的第一个自定义指令，现在我们需要在它后面创建代码。在创建之前，我们需要了解 Vue 为我们在自定义指令中提供的值。
Vue.directive('sticky');
当我们想在DOM元素上使用这个自定义指令时：
<app-navigation v-sticky></app-navigation>
v-sticky
让我们编写我们想要的 v-sticky 指令所具有的行为。 当该指令应用于DOM元素时，我们希望在屏幕上定位该元素。 这是我们的 v-sticky 指令的自定义代码：
Vue.directive('sticky',
function(el, binding, vnode) {
el.style.position = 'fixed';
}
));
<div v-color="'red'">Show this</div>
v-orange
我们将创建的下一个自定义指令是v-orange。 该指令将文本颜色设置为橙色。 以下是此指令的代码：
Vue.directive("orange", function(el, binding, vnode) {
el.style.color = "orange";
});
我们可以将此指令应用于 HelloWorld 组件中显示的消息。 应用后，欢迎消息现在为橙色。
v-color
之前的指令不是很***通用。 如果您希望文本为蓝色而不是橙色，则必须编写另一个自定义指令。 我们将创建一个名为 v-color 的新自定义指令。 此自定义指令将采用将传递给它的值。 此值是我们要应用于欢迎消息的颜色。
前面我提到绑定是一个对象，它包含传递给指令的参数。 该对象中包含的一个项是传入的值。我们将在代码中使用它来将文本设置为该值。
Vue.directive("color", function(el, binding, vnode) {
el.style.color = binding.value;
});
现在我们的指令更加灵活。 您可以传入任何众所周知的颜色字符串，如“红色”或“蓝色”，并传入有效的十六进制颜色，如＃ffff00。 这是我们新的 v-color 指令的图像被应用三次。 第一次颜色为红色，第二次颜色为蓝色，最后一次颜色为黄色，使用＃ffff00的十六进制代码。
参数
自定义指令可以在指令名称后面加上冒号表示参数。这是一个例子：
<app-navigation v-sticky:bottom></app-navigation>
在上面的例子中，自定义指令的名称是 sticky,参数是 bottom。
指令只可以携带一个参数。
带参数的v-sticky 应用场景 导航 页脚 ：传参给指令
您可以为自定义指令提供参数。 我们将修改我们之前创建的 v-sticky 代码以接受参数。 大多数网站的屏幕顶部都有导航，屏幕底部有一个页脚。
我们将使用该参数告诉我们导航是否应固定在屏幕的顶部或底部。 绑定对象将包含一个名为 arg 的值，该值包含我们传递给自定义指令的参数。
为了简化操作，如果没有参数传递给指令，我假设导航应该固定在屏幕的顶部。 如果我收到一个参数，那么导航将固定在屏幕的底部。
为了区分顶部和底部导航，我在顶部导航中添加了灰色的背景颜色，在底部导航中添加了棕褐色。 这是代码：
Vue.directive("sticky", function(el, binding, vnode) {
const loc = binding.arg === "bottom" ? "bottom" : "top";
el.style.position = "fixed";
el.style[loc] = 0;
if (loc === "bottom") {
el.style.background = "burlywood";
} else {
el.style.background = "#7e7e7e";
}
});
修饰符
修饰符是由***点表示的特殊后缀，表示指令应该以某种特殊方式被绑定。修饰符控制指令的行为。以下是我们创建自定义指令的实例：
<span v-format.underline>guide</span>
在上面的例子中，.underline修饰符告诉 v-format 指令对文本应用下划线。
你可以使用链接指令在指令上使用***多个修饰符，这是一个例子：
<span v-format.bold.highlight.underline>guide</span>
在上面的例子中，文本将会加粗、高亮、下划线显示。
v-format 使用修饰符
您可以根据需要向自定义指令添加任意数量的修饰符。 我们将创建一个名为 format 的新自定义指令。 此自定义指令将接受以下一个或多个修饰符：
underline
bold
highlight
绑定参数是一个对象。 该对象包含自定义指令的所有修饰符。 绑定上的修饰符实际上也是一个对象。 该对象将包含已应用的每个修改器的键。 我们将使用它来应用不同的文本格式。 这是代码：
Vue.directive("format", function(el, binding, vnode) {
const modifiers = binding.modifiers;
if (modifiers.underline) {
el.style.textDecoration = "underline";
}
if (modifiers.bold) {
el.style.fontWeight = "bold";
}
if (modifiers.highlight) {
el.style.background = "#ffff00";
}
});
在上面的代码中，我们获取修饰符对象并将其分配给名为修饰符的变量。 然后我们检查我们支持的每个可能的修饰符。 如果存在该修饰符，则我们应用相应的文本修饰。
我们已将下划线修改器应用于单词指南。 我们将粗体修饰符应用于配置/自定义。 我已将高亮修饰符应用于单词 check out。
为了表明您可以将多个修饰符应用于自定义指令，我已将所有三个修饰符应用于文本 Installed CLI Plugins。
v-hook-demo 显示生命周期钩子
之前我在您的自定义指令中讨论了可用的生命周期钩子。 如果希望自定义指令基于生命周期钩子工作，则需要为代码使用不同的格式。 您将拥有一个对象，而不是在自定义指令的名称后面使用函数。 该对象上的键将是一个或多个可用的生命周期钩子。
在代码中，我在 About 视图中添加了一些代码。 代码有一个按钮。 单击按钮时，数字会更新。 在 HelloWorld 组件中，我已将 v-hook-demo 组件应用于第一个 div。
这是 v-hook-demo 组件的代码：
Vue.directive("hook-demo", {
bind(el, binding, vnode) {
console.log("bind");
},
inserted(el, binding, vndoe) {
console.log("inserted");
},
updated(el, binding, vnode) {
console.log("updated");
},
componentUpdated(el, binding, vnode, oldVnode) {
console.log("componentUpdated");
}
});
如果刷新屏幕并查看控制台，您会注意到已实现绑定和插入的生命周期挂钩。 如果您转到 “About” 页面并单击该按钮，您将看到实现了 componentUpdated 生命周期钩子。
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
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编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。