vue自定义指令有几种方式,vue自定义命令
本文主要介绍Vue.js指令自定义指令的详细说明。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
自定义一个demo指令
Vue自定义指令语法如下：
Vue.directive(id，定义)
传入两个参数，id指指令ID，definition指定义对象。其中，定义对象可以提供一些钩子函数。
div id=应用程序
！-输入输入框获得焦点-
输入类型=text v-focus/
/div
脚本
//注册全局自定义指令v-focus
Vue.directive(focus ，{
//当绑定元素插入DOM时。
插入(el，装订){
//焦点元素
El . focus()；
}
})
/脚本
div id=应用程序
p v-demo:red=msg{{msg}}/p
/div
脚本
//全局指令
Vue.directive(demo ，function (el，binding) {
Console.log(el) //p选项卡
Console.log(binding) //输出是一个对象obj
Console.log(指令名： binding.name)//指令名
Console.log(指令的绑定值： binding.value)//指令的绑定值
Console.log(字符串形式的绑定值： binding.expression) //字符串形式的绑定值
Console.log(传递给指令的参数： binding.arg)//传递给指令的参数
})
var vm=new Vue({
埃尔： #app ，
数据：{
味精：‘你好！’
},
//本地指令
指令：{
演示：{
插入：函数(el) {
console.log(el)
}
}
}
})
/脚本
对象字面量
div id=应用程序
p v-demo= colours { { colours . text } }/p
/div
脚本
Vue.directive(demo ，function (el，binding) {
Console.log(el) //p选项卡
Console.log(binding) //输出是一个对象obj
console . log(binding . value)//{ color: blue ，text: hello！}
console . log(binding . value . color)// blue
console . log(binding . value . text)// hello！
El . style= color: binding . value . color
})
var vm=new Vue({
埃尔： #app ，
数据：{
颜色：{
颜色：蓝色，
短信：“你好！”
}
}
})
/脚本
生命周期钩子
指令定义函数提供了几个钩子函数（可选）：
Bind:只调用一次。指令在第一次绑定到元素时被调用。使用这个钩子函数，您可以定义在执行绑定时执行一次的初始化操作。
Inserted:当绑定元素插入父节点(div#app)时调用(父节点存在时可以调用，但不一定要存在于文档中)。
更新：当绑定指令的元素(VNode- virtual node)的状态改变时触发(包括样式、内容、vue数据…)
ComponentUpdated:指令所在组件的VNode及其子VNode都被更新和调用。
Unbind:只调用一次，当指令与元素解除绑定时(元素从DOM中删除)。
div id=应用程序
p v-demo= color“{ num } }/p
Button @click=add 添加/button
button onclick= Unbind() Unbind/button
/div
脚本
函数unbind() {
vm。$ destroy()；//使用其他方法解除绑定。
}
Vue.directive(demo ，{//钩子函数的五个注册指令
Bind: function () {//1。被绑定
//为绑定做准备。例如添加事件侦听器，或者只需要执行一次的其他复杂操作。
console . log( 1-bind )；
},
已插入：function () {//2。绑定到节点
console . log(“2-inserted”)；
},
更新：function () {//3。组件更新
//根据获取的新值进行相应的更新。它还会为初始值调用一次。
console.log(3 -更新)；
},
已更新：function () {//4。组件更新已完成
console . log( 4-component updated )；
},
Unbind: function () {//5。解放
//进行清洗操作。例如，移除绑定时绑定的事件侦听器。
console . log( 5-bind )；
}
})
var vm=new Vue({
埃尔： #app ，
数据：{
数字：10，
颜色：红色
},
方法：{
add: function () {
this.num
}
}
})
/脚本
初始化方法1和2，点击Add按钮触发方法3和4，点击Unbind按钮触发方法5，如下图：
关于Vue.js指令的详细解释，本文到此结束。有关Vue.js指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。