杭州网站建设电话,定制网站的价格低,企业营销策划实训报告,怎样查看网站开发语言Vue 2自定义指令入门
Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。
一个自定义指令需要一个名称和一个定义对象。在定义对象中#xff0c;你可以使用一些钩子函数来控制指令的行为#xff1a;
bind#xff1a;在指令被绑定到元素上时使用#…Vue 2自定义指令入门
Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。
一个自定义指令需要一个名称和一个定义对象。在定义对象中你可以使用一些钩子函数来控制指令的行为
bind在指令被绑定到元素上时使用只调用一次。可以用来初始化一些值。inserted在被绑定元素插入父节点时调用。可以用来执行初始的DOM操作比如设置焦点/绑定事件。update在被绑定元素的值更新时调用无论绑定值是否改变。可以用来响应值的更新。可能发生在其子VNode更新之前。componentUpdated指令所在组件的VNode及其子VNode全部更新后调用。unbind指令与元素解绑时调用清除绑定的一些事件监听器。
下面给出一个简单的示例
!DOCTYPE html
htmlheadtitleVue Custom Directive Demo/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/headbodydiv idappinput v-modelcolorValue v-change-color stylewidth: 50px; //divscriptVue.directive(change-color, {inserted: function (el) {el.addEventListener(input, function () {el.style.color el.value})}})var vm new Vue({el: #app,data: {colorValue: black}});/script
/body/htmlVue自定义指令的钩子函数接受一些参数这些参数提供了有关指令的上下文信息及对应的DOM元素
bind(el,binding,vnode): el绑定指令的元素。binding一个对象包含以下属性 name指令名称不包括v-前缀。value指令的绑定值可以是一个表达式或变量。oldValue指令之前的绑定值。expression绑定值的表达式字符串形式。arg指令参数例如v-my-directive:arg中的arg。modifiers修饰符对象例如v-my-directive.modifier1.modifier2中修饰符对象为{modifier1:true,modifier2:true}。 vnodeVue编译生成的虚拟节点。 inserted(el,binding,vnode)update(el,binding,vnode,oldVnode): oldVnode之前的虚拟节点用于比较更新。 componentUpdated(el,binding,vnode,oldVnode)unbind(el,binding,vnode) 我们也可以使用v-my-directive:[arg]value的形式来使用动态参数。
!DOCTYPE html
htmlheadtitleVue Custom Directive with Dynamic Argument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/headbodydiv idappp v-mydirective:[arg1]Hello World/p/divscriptVue.directive(mydirective, {bind: function(el, binding, vnode) {console.log(binding.arg);el.style[binding.arg] 5px solid red;}});var vm new Vue({el: #app,data: {arg1: border}});/script
/body/htmlbind和update的函数简写
同时定义bind和update而不考虑其他钩子函数
Vue.directive(mydirective,function(el,binding){//...
})
