# 事件修饰符
# 实例代码
<body>
<div id="root">
<h2>事件修饰符</h2>
<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name: "xxx",
},
methods: {
showInfo(e) {
// e.preventDefault();
alert(this.name);
},
},
});
</script>
# 总结
# Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕