码云 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://unpkg.com/vue@next" ></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。下节我们讲解按键修饰符。
以上关于20. [基础]Vue绑定事件详讲-事件修饰符的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 20. [基础]Vue绑定事件详讲-事件修饰符
