当前位置：网站首页 > 技术文章 > 正文

Vue 之 @submit.prevent 指令（vuejs指令）

zhezhongyun 2025-05-08 08:04 41 浏览

小伙伴们，此文一起学学 @submit.prevent 指令吧～

@submit.prevent 是 Vue.js 中用于处理表单提交事件的指令。它是 Vue 模板语法的一部分，结合了事件监听和事件修饰符的功能。

1. 具体含义：

1.1. @submit：这是 Vue 的事件监听语法，等同于原生 JavaScript 的 addEventListener('submit', ...)。它监听表单的 submit 事件。

1.2. .prevent：这是 Vue 的事件修饰符，等同于在事件处理函数中调用 event.preventDefault()。它会阻止表单的默认提交行为（即阻止页面刷新或跳转）。

2. 使用场景：

在 Vue.js 中，通常使用 @submit.prevent 来处理表单提交，避免页面刷新，同时执行自定义的提交逻辑（例如发送异步请求）。

示例代码：

</form>

</template>

export default {

data() {

return {

username: '' // 绑定输入框的值

};

methods: {

handleSubmit() {

// 自定义的提交逻辑

console.log('提交的用户名是:', this.username);

// 这里可以发送异步请求，例如调用 API

}

};

</script>

代码解析：

@submit.prevent="handleSubmit"：

监听表单的 submit 事件。
使用 .prevent 阻止表单的默认提交行为（页面刷新）。
当表单提交时，调用 handleSubmit 方法。

v-model="username"：

将输入框的值与 Vue 组件的 username 数据属性双向绑定。

handleSubmit 方法：

在这里可以编写自定义的提交逻辑，例如验证表单数据、发送异步请求等。

3. 其他常用事件修饰符：

.stop：阻止事件冒泡（等同于 event.stopPropagation()）。
.capture：使用事件捕获模式。
.self：只有当事件是从元素本身触发时才触发回调。
.once：事件只触发一次。

4. 做一下小结：

@submit.prevent 是 Vue.js 中处理表单提交的常用方式，能够避免页面刷新，同时实现自定义的提交逻辑。它是 Vue 事件系统和模板语法的重要组成部分。

好了，爱学习的小伙伴，关注不迷路哟～

HTML button type 属性

上一篇：Spring Boot+CAS 默认登录页面太丑了，怎么办?
下一篇：Flutter——按钮（flutter_thrio）

Vue 之 @submit.prevent 指令（vuejs指令）

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）