vue-事件修饰符
事件修饰符
顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。
事件修饰符有：
| .stop | 阻止冒泡 |
|---|---|
| .prevent | 阻止默认事件 |
| .capture | 添加事件侦听器时使用事件捕获模式 |
| .self | 只当事件在该元素本身(不是子元素)触发时回调 |
| .once | 事件只触发一次 |
1.阻止冒泡
<div id="app" @click=clickDiv()>
<button @click="clickButton()">点击</button>
</div>
<script>
var vm=new Vue({
el:"app",
data:{},
methods:{
clickDiv(){
console.log("点击了div")
},
clickButton(){
console.log("点击了button")
}
}
})
</script>
当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。
如果想阻止冒泡事件就需用到“.stop”修饰符。
<button @click.stop="clickButton"></button>
2.阻止默认事件
什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。
这里以a链接为例：
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent="linkclick()">有问题，问百度</a>
</div>
<script>
new Vue({
el:"app",
data：{},
methods:{
linkclick(){
console.log("点击了a链接")
}
}
})
</script>
</body>
3.事件捕获
还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后再触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？
<div id="app" @click.capture="clickDiv">
<button @click="clickButton"点击></button>
</div>
即：在事件触发中进行捕获，优先执行含有".caputre"修饰符的事件。
4.只当事件在该元素本身触发时触发回调
<div id="app" @click.self="clickDiv">
<button @click="clickButton">点击</button>
</div>
我们在父元素div里加了".self"，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他任何元素（如子元素button）都不会触发包含修饰符".self"的元素事件。
5.事件只触发一次
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent.once="clicklink">有问题，问百度</a>
</div>
<script>
el:"#app",
data:{},
methods:{
clicklink(){
console.log("点击了a链接")
}
}
</script>
</body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！