Vue基础教程（76）事件修饰符之prevent：Vue事件修饰符.prevent全解密：提交按钮的克星，链接乱跳的终结者！

原创

于 2025-09-29 08:19:31 发布 · 565 阅读

CC 4.0 BY-SA版权

文章标签：

想象一下这个场景：你熬了个通宵，终于写了一个巨帅无比的用户登录页面。有一个精致的输入框，一个酷炫的按钮。用户满怀期待地输入账号密码，深情地点击了“登录”按钮。

然后……你猜怎么着？

页面“唰”地一下，刷新了！刚刚输入的内容全没了，一切归于平静，仿佛什么都没发生过。只留下用户一脸懵逼，和你自己内心的一万头羊驼奔腾而过。

为什么会这样？

根源在于 <form> 表单的默认行为：提交表单后会刷新页面。或者，当一个 <a> 链接被点击时，它的默认行为是跳转到指定的 href 链接。

在传统的JavaScript世界里，我们要阻止这种“鲁莽”的默认行为，就得请出 event.preventDefault() 这位老朋友。你得在事件处理函数里写上这么一句：

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 关键在此！阻止刷新！
  // ... 然后才敢执行你的登录逻辑
});

痛点来了： 我们Vue开发者，追求的是数据和视图的优雅绑定，是那种“谈笑间，樯橹灰飞烟灭”的潇洒。如果每个事件处理都要我们手动去写 event.preventDefault()，那感觉就像穿着高级西装去搬砖——不得劲儿！

于是，Vue.js 的爸爸（尤雨溪）大手一挥：“爱卿们莫慌，朕为你们准备了事件修饰符！”

.prevent 就是Vue事件修饰符家族里的“文明礼貌大使”。它的毕生使命只有一件：在事件触发时，自动、无条件、优雅地调用 event.preventDefault()。

它的用法，简单到令人发指：

@事件名.prevent = "处理方法"

看，多了一个 .prevent 后缀，逼格瞬间提升，烦恼瞬间消失。

它的工作流程可以概括为：</