vue.directive 用法,vue-directive
vue内置了很多指令，但是有时候这些指令并不能满足我们，或者我们想在元素中加入一些特殊的功能。这时候我们就需要用到vue中一个非常强大的功能——自定义指令。本文主要介绍指令在Vue中的基本用法，有需要的可以参考一下。
目录
前言正文1。全球注册2。本地注册3。钩子函数和参数设置4。用法灵活(1)动态指令参数(2)函数速记(3)对象字面方式5。使用场景写在最后。
前言
在vue项目中，我们经常使用v-show、v-if、v-for等内置指令。此外，vue还提供了非常方便的自定义指令，让我们可以对常见的dom元素执行底层操作。让我们的日常发展更加方便快捷。本文将总结自定义命令的用法和常见场景。
正文
1.全局注册
这里全局注册了一个指令，用来使用带有红色边框的指令的元素，通过指令操作样式。
div id=应用程序
H1 type=text v-red我是H1元素/h1
红色我是一个元素
P v-red，这是p元素/pbr。
输入类型=text v-redbr
/div
脚本
Vue.directive(red ，{
//指令的定义
插入：函数(el) {
console . log(111)；
el.style.border=1px纯红
}
})
新Vue({
埃尔： #app ，
data() {
返回{
}
},
方法：{
}
})
/脚本
运行结果如下：
在上面的代码中，全局指令是通过Vue.directive方法注册的。这个函数接收两个参数。第一个参数是指令名，通过 v- name 绑定元素，第二个参数是处理绑定元素的钩子函数，后面会详细描述。
2.局部注册
它与全局寄存器指令基本相同，但范围不同。这里，在组件内部注册了一个自定义指令，为组件内部的绑定元素设置蓝色边框。
div id=应用程序
边界项目/边界项目
/div
脚本
Vue.directive(red ，{
//指令的定义
插入：函数(el) {
console . log(111)；
el.style.border=1px纯红
}
})
//定义子组件
Vue.component(border-item ，{
指令：{
蓝色：{
//指令的定义
插入：函数(el) {
el.style.border=1px纯蓝
}
}
},
模板：` div
H1 v-蓝I是H1元素/h1的子成分
我是一个子组件
P v-blue我是一个子组件p元素/pbr
组件输入类型=text v-bluebr
P v-blue我是子组件h1元素，我同时使用全局和局部自定义指令/p。
/div ` 1
})
新Vue({
埃尔： #app ，
data() {
返回{
}
},
方法：{
}
})
/脚本
运行结果如下：
通过上面的代码，通过directives对象在子组件中注册了一个为绑定元素设置蓝色边框的组件，并向对象中传入了一个key-value对，其中key表示指令名，由 v- name 使用，其值对应一个对象，对象内部是与指令相关的hook函数。钩子函数将在后面详细解释。
注意：当同一个元素和全局指令、局部指令被用来操作统一属性时，局部自定义指令优先。这里采用邻近原则，局部指令将优先于全局指令调用统一属性操作。
3.钩子函数及参数设置
看了上面的介绍，我们都知道了directive的用法，但是其中的hook函数需要明确。只有知道钩子函数的调用时间，才能定义更完善的指令。
指令定义对象可以提供以下挂钩函数(都是可选的):
* bind:仅调用一次，当指令第一次绑定到元素时。可以在这里执行一次性初始化。
* inserted:当绑定元素插入父节点时调用(只保证父节点存在，但不一定插入文档)。
* update:当组件的VNode更新时调用，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是，通过比较更新前后的值，可以忽略不必要的模板更新(详细的钩子函数参数见下文)。
* componentUpdated:在指令所在组件的VNode及其子VNode全部更新后调用。
* unbind:当指令从元素解除绑定时，只调用一次。
钩子参数指令钩子函数将在下面的参数中传递：
* el:指令绑定的元素，可以用来直接操作DOM。
* binding:包含以下属性的对象：
* name:指令的名称，不包括v前缀。
* value:指令的绑定值，例如在v-my-directive=1 1 中，绑定值为2。
* oldValue:指令绑定的前一个值，仅在update和componentUpdated挂钩中可用。无论值是否改变都可用。
*表达式：字符串形式的指令表达式。例如，在v-my-directive=1 1 中，表达式为 1 1 。
* arg:传递给指令的参数，可选。例如，在v-my-directive:foo中，参数是 foo 。
*修饰符：包含修饰符的对象。例如：在v-my-directive.foo.bar中，修饰符对象是{foo:true，bar:true}。
* vnode:Vue编译生成的虚拟节点。
* oldVnode:前一个虚拟节点，仅在update和componentUpdated挂钩中可用。
4.灵活用法
（1）动态指令参数
指令的参数可以是动态的。比如在v-mydirective中：[argument]= value ，argument参数可以根据组件实例数据进行更新！这使得用户定义的指令可以在应用中灵活使用。在下面的例子中，分别设置了指令实现元素的边框绑定和元素的后台属性绑定。
div id=应用程序
H1-border= redborder I是动态指令参数1/h1的元素
H1 v-color:[pro]=redBg 我是动态指令参数2/h1的元素
/div
脚本
Vue.directive(border ，{
bind: function (el，binding，vnode) {
console.log(el ，El)；
console.log(binding ，绑定)；
console.log(vnode ，vnode)；
el.style.border=binding.value
}
})
Vue.directive(color ，{
bind: function (el，binding，vnode) {
console.log(el ，El)；
console.log(binding ，绑定)；
console.log(vnode ，vnode)；
El . style[binding . arg]=binding . value
}
})
新Vue({
埃尔： #app ，
data() {
返回{
红色边框：“1px纯红”，
亲：背景颜色，
红色背景：“绿色”
}
},
方法：{
}
})
/脚本
运行结果如下：
顺便看看打印的参数：
在上面的代码中，通过两种方式介绍了动态参数自定义指令的方法，使用起来非常灵活。根据实际需要选择合适的方式。
（2）函数简写方式
在许多情况下，您可能希望在绑定和更新期间触发相同的行为，而不考虑其他挂钩。这样写：
Vue.directive(border ，
函数(el，binding，vnode) {
el.style.border=binding.value
}
)
（3）对象字面量方式
在绑定自定义指令的元素red中，对象格式的数据被传入，然后在函数速记模式中使用。
div id=应用程序
h1 v-color={ color: red ，text:你好！} 我是对象的文字形式/h1
/div
脚本
//对象文字
Vue.directive(color ，function (el，binding) {
console . log(binding . value . color)//= red
console . log(binding . value . text)//= hello！
El . style . color=binding . value . color
El . innerhtml=binding . value . text
})
新Vue({
埃尔： #app ，
data() {
返回{
}
},
方法：{
}
})
/脚本
运行结果如下：
5.使用场景
除了上面的使用场景，比如我们通过项目中的一个自定义指令来控制一个前端页面的权限，在指令中设置一个参数。当页面加载或提交事件被触发时，首先会执行自定义指令的事件，并请求自定义指令检查其是否有此权限，并进行相应的操作。还有很多地方要用，需要在项目中不断实践，可能还有其他替代方法没有用上。这就需要我们不断学习和巩固这些基础知识，并应用最佳解决方案来完成项目。
写在最后
关于指令在vue中的基本用法的文章到此结束。有关在vue中使用该指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。