在 vue 模板中阻止表单默认提交最直接方式是使用 @submit.prevent 修饰符，无需手动调用 e.preventdefault()；可与 .stop、.once 组合实现防冒泡、防重复提交；适用于各类表单场景，且需避免与原生 action 等属性混用。
在 Vue 模板中阻止表单默认提交，最直接的方式就是用 @submit.prevent 修饰符，不用写 JavaScript 里的 e.preventDefault()，一行模板代码就能解决。
直接加 .prevent 修饰符
给表单的 submit 事件绑定时，在事件名后加上 .prevent 即可：
<form></form>- 提交时不会刷新页面，也不会跳转，只执行你定义的
handleSubmit方法 - 适用于所有表单场景，比如登录、搜索、注册等
配合 .stop 或 .once 组合使用
实际开发中常需要叠加控制逻辑：
-
@submit.prevent.stop：既阻止默认提交，又防止事件冒泡到父容器（比如表单嵌在弹窗里，避免误触背景关闭） -
@submit.prevent.once：首次提交后自动失效，适合防重复提交（如支付按钮） - 多个修饰符按从左到右顺序生效，.prevent 和 .stop 位置互换不影响功能
注意 input type="submit" 不是必须的
只要触发了 form 的 submit 事件，修饰符就起作用：
- 可以是
<button type="submit"></button>，也可以是普通<button></button> - 甚至用回车键提交：
<input>，同样能阻止默认行为 - 不需要手动调用
event.preventDefault()，也不用在方法里做额外判断
别和原生属性混用
避免同时设置 action 或 method 属性造成干扰：
- 删掉
action=""或action="#"，它们可能引发意外跳转 - 保持表单语义清晰，仅靠 Vue 控制行为即可
- 如果用了
fetch或axios提交，.prevent 就是前提保障
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
