徐州网站平台,百度推广开户流程,荣成网站建设,怎么做网上卖菜网站内置指令 | Vue.js
在vue的api里#xff0c;关于v-on有stop和once两个事件标签。
.stop - 调用 event.stopPropagation()。.once - 最多触发一次处理函数。
原有主要代码和页面效果 #xff08;无stop和once#xff09;: ...div classdiv clickdi…内置指令 | Vue.js
在vue的api里关于v-on有stop和once两个事件标签。
.stop - 调用 event.stopPropagation()。.once - 最多触发一次处理函数。
原有主要代码和页面效果 无stop和once: ...div classdiv clickdivClick()p classp clickpClick()/p/div...script...divClick(){console.log(div点击了);},pClick(){console.log(p点击了);}.../script .stop
stop用于在页面表单中只触发子元素不触发父元素的操作。例如 div classdiv clickdivClick()p classp click.stoppClick()/p/div
效果如下。p元素绿区绑定了pClick的指令p元素是div元素背景红区的子元素div也绑定了一个事件。点击p元素div所绑定的事件没有被触发。 .once
once用于在页面表单中只触发子元素不触发父元素的操作。例如
div classdiv clickdivClick()p classp click.oncepClick()/p/div
效果如下。p元素绿区绑定了pClick的指令p元素是div元素背景红区的子元素div也绑定了一个事件。点击p元素两次p所绑定的事件只触发了一次div所绑定的事件两次被触发。 .stop.once或者.once.stop
代码如下 div classdiv clickdivClick()p classp click.stop.oncepClick()/p/div
效果如下
第一次点击绿区p只触发了绿区p的事件没有触发红区div的事件。 第二次点击绿区p没有触发了绿区p的事件但是触发了红区div的事件。 点击绿区p第三次同样只触发红区div的事件不触发绿区p的事件。 将.stop.once改成.once.stop得到的也是一样的结果。 ...div classdiv clickdivClick()p classp click.once.stoppClick()/p/div......pClick(){console.log(p点击了 .once.stop);},... 猜想 stop的作用是不触发当前处理函数所在元素的父级元素处理函数once的作用是最多触发一次处理函数。当.stop.once混用的时候第一次点击stop和once都对当前元素的函数其作用范围只在当前元素上。但是第二次点击的时候stop不再起作用了父级元素可以被多次触发。 因此我猜测once这个修饰符在第一次点击执行后对当前元素做了去除操作不知道是逻辑去除还是物理去除个人偏向物理。这个操作不仅会去除该元素绑定的处理函数还会去除该元素上带有的其他修饰符。
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title事件/titlescript src../../public/script/vue_2.2.2.min.js/scriptstyle.div{width: 200px;height: 200px;background-color: red;margin-top: 20px;}.div2{width: 200px;height: 200px;background-color: yellow;margin-top: 20px;}.p{width: 100px;height: 100px;background-color: green;}/style
/head
bodydiv idappbutton clickadd(horse,$event)加一马/buttoninput typetext :valueage /button clicksub()减一马/buttondiv classdiv clickdivClick()p classp click.once.stoppClick()/p/divdiv classdiv2 clickdivClick()p click.stop.onceaClick() target_blankBaidu一下/p/div/divscriptconst vm new Vue({el: #app,data: {name: Calven,age: 24,wechat: CalvenZeng},methods: {add(msg, event){this.age;console.log(msg);console.log(event);},sub(){this.age--;},divClick(){console.log(div点击了);},pClick(){console.log(p点击了 .once.stop);},aClick(){console.log(a点击了);window.open(https://www.baidu.com, baidu);}}});/script
/body
/html
