Vue基础教程（71）事件修饰符：Vue事件修饰符防“手残”指南：.stop、.prevent，让你的代码不再“冒泡”和“搞事”！

嘿，Vue的初学者们！有没有觉得，当我们兴高采烈地给按钮绑定了@click，准备大展拳脚时，一些“灵异事件”就开始频频发生：

• 你只是想点个按钮，结果它爸、它爷爷，甚至它祖宗十八级的div都被一起触发了！
• 你只是想提交个表单，页面却“嗖”地一下刷新了，所有数据瞬间清零，功亏一篑。
• 你给键盘事件绑了个方法，用户按任何键都能触发，而你只想要回车键……

如果你在疯狂点头，或者曾经被这些问题困扰过，那么恭喜你，你来对地方了！今天我们要聊的，就是Vue里专门用来对付这些“幺蛾子”的秘密武器——事件修饰符。

这玩意儿不是什么高深莫测的黑魔法，它就像是给你的代码加装的“防手残”盾牌和“快捷键”，能让你的逻辑变得无比清晰和优雅。

第一幕：初识修饰符——为啥需要它？

在传统JS里，我们要阻止事件冒泡或者默认行为，得这么干：

document.getElementById('myButton').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  event.stopPropagation(); // 阻止事件冒泡
  // ... 你的业务逻辑
});

又是event，又是各种方法调用，代码显得有点啰嗦。而在Vue的模板里，我们的理想是逻辑与视图清晰分离。如果还在模板里写@click="someMethod($event)"，然后在方法里再去操作$event，感觉还是差了点意思。

Vue事件修饰符的诞生，就是为了让你能在模板里直接声明我们想要的事件行为，真正做到“所想即所得”。

它的语法超级简单，就像给指令加个“后缀”：
v-on:click.修饰符="handler" 或者更简洁的 @click.修饰符="handler"。

下面，就让我们请出修饰符家族的几位核心成员，并给他们配上生动的人设！

第二幕：核心成员闪亮登场 & 实战示例

1. .stop - “点到为止”侠

• 人设解读：这位大侠的座右铭是“到此为止，别再外传！”。他专门负责阻止事件的冒泡。什么是事件冒泡？简单说，就是事件会从触发元素开始，像水泡一样一层一层地往父级元素传递。
• 经典场景：一个按钮放在一个可点击的卡片里，你点击按钮时，可不希望卡片的点击事件也被触发。

<!-- 没有.stop的灾难现场 -->
<div @click="alert('我是卡片，被点了！')">