vue中如何定义及使用自定义指令,vue自定义指令两种方式
这篇文章主要介绍了vue。j自定义指令的基本使用详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下
目录
函数式对象式使用时的一些坑总结
函数式
需求1：定义一个大v指令，和虚拟文本功能类似，但会把绑定的数值放大10倍
div id=root
氘当前的n值是span v-text=n/span/h2
氘放大10倍后的n值是：span v-big=n/span/h2
button @click=n 点我一号/按钮
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
//创建某视频剪辑软件实例
新Vue({
el: #root ，
数据：{
n:1
},
指令：{
/*big:function () {
}*/
//大函数合适会被调用？
//1、指令与函数成功绑定时（一上来)
//2、指令所在的模板被重新解析时
大（元素，绑定){
元素。innerhtml=绑定。值* 10
}
}
})
/脚本
对象式
需求2：定义一个虚拟绑定指令，和v型装订功能类似，但可以让其所绑定的投入元素默认获取焦点
div id=root
input type= text v-bind:value= n br/
输入类型=text v-fbind:value=nbr/
button @click=n 点我一号/按钮
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
//创建某视频剪辑软件实例
新Vue({
el: #root ，
数据：{
n:1
},
指令：{
fbind:{
绑定(元素，绑定){
//指令与函数成功绑定时（一上来)
控制台。日志(“bind”)；
element.value=binding.value
},
已插入（元素，绑定){
//指令所在元素被插入页面时
控制台。日志(“已插入”)；
元素。焦点()
},
更新（元素，绑定){
//指令所在元素被重新解析时
console.log("更新");
element.value=binding.value
}
}
}
})
/脚本
使用时的一些坑
命名如果指令是多个单词：
氘放大10倍后的n值是：span v-big-number=n/span/h2
那么需要这样写：
大数字：函数（元素，绑定){
元素。innerhtml=绑定。值* 10
}
或者：
大数字（元素，绑定){
元素。innerhtml=绑定。值* 10
}
this
指令：{
fbind:{
绑定(元素，绑定){
//此处的这是窗户
控制台。日志(“bind”)；
element.value=binding.value
}
}
}
全局指令：
像过滤器一样，我们把刚才的两个指令改为全局指令
Vue.directive(big ，function (element，binding) {
元素。innerhtml=绑定。值* 10
})
Vue.directive(fbind ，{
绑定(元素，绑定){
element.value=binding.value
},
已插入（元素，绑定){
元素。焦点()
},
更新（元素，绑定){
element.value=binding.value
}
})
总结
一、定义语法：
(1).局部指令
新Vue({
指令：{
指令名：配置对象
}
})
或：
新Vue({
指令：{
指令名：回调函数
}
})
(2).全局指令
Vue。指令（指令名，配置对象)或Vue。指令（指令名，回调函数)
二、配置对象中常用的3个回调：
(1).绑定：指令与元素成功绑定时调用(2).已插入：指令所在元素被插入页面时调用(3).更新：指令所在模板结构被重新解析时调用三、备注：
1.定义指令时不加v-，使用时要加v-2。如果指令名多于一个单词，应该用kebab-case命名，而不是camelCase。这篇关于Vue自定义指令的基本使用细节的文章就介绍到这里。有关Vue自定义指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。