【vue3入门】-【10】事件修饰符
事件修饰符
在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。
为解决这一问题，Vue为V-on提供了事件修饰符，常用有以下几个：
-
.stop -
.prevent -
.once -
.enter -
...
具体参考：
地址：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers
- 阻止默认事件
<template>
<h3>事件修饰符-阻止默认事件</h3>
<a @click="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
<br>
<a @click.prevent="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
clickHandler(e){
// 通过event事件阻止默认事件的发生
// e.preventDefault(); // 也可以不在方法里面写阻止默认事件，直接在标签属性中添加.prevent
console.log("点击了")
}
}
}
</script>
- 阻止事件冒泡
<template>
<h3>事件修饰符-阻止默认事件</h3>
<a @click="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
<br>
<a @click.prevent="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
<div @click="clickDiv">
<p @click.stop="clickp">测试冒泡</p>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
clickHandler(e){
// 通过event事件阻止默认事件的发生
// e.preventDefault(); // 也可以不在方法里面写阻止默认事件，直接在标签属性中写.prevent
console.log("点击了")
},
clickDiv(e){
console.log("点击了Div标签");
},
clickp(e){
// 也可以直接在标签中直接写.stop，作用是一样的
// e.stopPropagation(); // 不设置时，点击“测试冒泡”后会同时作用到父级标签，设置后，仅作用到本级标签
console.log("点击了p标签");
}
}
}
</script>
以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9
