20. [基础]Vue绑定事件详讲-事件修饰符
绑定事件中的修饰符有很多种,这些修饰符各有各的用处。本节课将讲解6种Vue中的事件修饰符,分别是;stop
、prevent
、capture
、self
、once
和passive
。
通过修饰符解决冒泡事件
在JavaScript中冒泡事件是最长处理的事件,先写一段代码,手动创造一个冒泡事件。新建一个文件Demo20.html,复制Demo19的内容,然后稍作修改。
- 修改模板
template
部分,在最外层增加一个<div>
并添加click事件。 - 修改方法
methods
部分,删除无用方法,保留两个方法,增加alter提示。 - 形成冒泡效果,就是有嵌套的DOM元素时,两个都有绑定事件,JS会自动向上传递事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo19</title> <script src="https:[email protected]" ></script> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data(){ return{ count:0 } }, methods:{ addCountClick(){ this.count++ }, handleBtnClick1(){ alert(1) }, }, template:` <div @click="handleBtnClick1"> <div>目前已点报名的小伙伴数量{{count}}.</div> <button @click=" addCountClick()">增加一位小伙伴</button> </div> ` }) const vm=app.mount("#app") </script> </html>
stop修饰符
在Vue中要停止冒泡是非常简单的,只要加加一个事件修饰符stop
就可以了。
<button @click.stop=" addCountClick()">增加一位小伙伴</button>
self修饰符
除了使用.stop
修饰符,还有一种修饰符self
,意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。
template:` <div @click.self="handleBtnClick1"> <div>目前已点报名的小伙伴数量{{count}}.</div> <button @click=" addCountClick()">增加一位小伙伴</button> </div> `
这时候你会发现点击那里,都没办法触发hanldeBtnClick1
方法了,这是因为目前最外层div下都是独立的DOM元素,就是都有成对标签出现,都不属于最外自己,都是他们的子元素。
可以编写一段专属最外层DIV的文字。
template:` <div @click.self="handleBtnClick1"> 我是最外层的DIV文字 <div>目前已点报名的小伙伴数量{{count}}.</div> <button @click=" addCountClick()">增加一位小伙伴</button> </div> `
这样当点击我是最外层的DIV文字
时,就会触犯handleBtnClick1
方法了。
其它常用修饰符
prevent修饰符:阻止默然行为的修饰符,这个以前讲过,例如阻止form
表单的默认提交行为。(不在重复介绍,如果你还没有掌握,可以复习以前课程)
capture修饰符:改成捕获模式,默认的模式都是冒泡模式,也就是从下到上,但是你用capture
后,是从上到下的。
修改一下模板部分的代码,不在使用修饰符,而是让事件存在冒泡。
methods:{ addCountClick(){ this.count++ alert(0) //修改了此处 }, handleBtnClick1(){ alert(1) }, }, template:` <div @click.capture="handleBtnClick1"> //修改了此处 我是最外层的DIV文字 <div>目前已点报名的小伙伴数量{{count}}.</div> <button @click=" addCountClick()">增加一位小伙伴</button> </div> `
once修饰符:事件只执行一次。
template:` <div @click.self="handleBtnClick1"> 我是最外层的DIV文字 <div>目前已点报名的小伙伴数量{{count}}.</div> <button @click.once=" addCountClick()">增加一位小伙伴</button> </div> `
此时再点击按钮,事件只执行一次。这时候我们修改了两个地方,最外层的事件加了self
修饰符,button上加了once
修饰符。
passive修饰符:解决滚动时性能的修饰符,不太好演示,等以后用到我们会再详细讲解。
本文就先到这里了,我们学习了6种修饰符:stop
、prevent
、capture
、self
、once
、passive
。下节我们讲解按键修饰符。
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 20. [基础]Vue绑定事件详讲-事件修饰符