.prevent修饰符用于阻止事件默认行为，等价于event.preventDefault()，常见于表单提交、链接跳转等场景，语法为@事件名.prevent，可与.stop等修饰符链式组合。
在 Vue 模板中使用 .prevent 修饰符，核心就一条：加在事件指令后面，告诉 Vue “别让浏览器按它自己的规则走”。它等价于在原生事件处理函数里调用 event.preventDefault()，但写法更简洁、意图更明确。
什么时候必须用 .prevent
以下情况不加 .prevent，页面大概率会意外刷新或跳转：
- 表单提交（
<form></form>内点击<button type="submit"></button>或回车） - 链接点击（
<a href="xxx"></a>），你本意是执行 JS 逻辑而非跳转 - 输入框内按回车，触发表单默认提交
- 右键菜单、空格键滚动等浏览器默认交互，需要自定义响应时
怎么写才正确
语法统一：在 @事件名.prevent 中直接添加，位置固定在事件名之后、引号之前。支持链式组合（如 .prevent.stop）。
常见写法示例：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
-
<form>...</form>—— 表单提交不刷新 -
<a href="/login">登录</a>—— 点击不跳转，只弹窗 -
<input>—— 回车触发搜索，不提交父表单
和 .stop 的关键区别别搞混
.prevent 管的是“浏览器自己要干的事”，比如跳转、刷新、弹菜单；.stop 管的是“事件往上传给父元素”的过程。两者解决的问题完全不在一个层面。
典型误用场景：
- 只加
.stop而不加.prevent：表单点了还是刷新——因为冒泡被拦了，但默认提交没拦住 - 只加
.prevent而不加.stop：弹窗里的按钮点完，外层遮罩也响应了关闭——因为默认行为拦住了，但事件冒泡没拦，父级监听器照样执行
调试小技巧
如果加了 .prevent 还是刷新或跳转，先检查这几点：
- 是否写成了
@click.prevent.stop却绑在了非原生可交互元素上（比如<div> 上用 <code>@submit.prevent是无效的） - 是否事件名写错，比如把
@submit.prevent误写成@click.prevent在 form 上 - 是否用了原生
submit按钮但没设type="button"，导致浏览器仍按 submit 类型触发默认行为
