Vue 模板语法——事件监听（2）全面升级，直击事件响应核心！

2023-09-20 19:32:16

引言

在 Vue.js 中，事件监听是实现用户交互不可或缺的关键功能，它允许我们在用户执行特定动作时对页面元素做出响应，从而构建出具有动态交互能力的 Web 应用程序。在上一篇文章中，我们介绍了 Vue 模板语法中事件监听的基础知识，了解了如何为 HTML 元素绑定事件处理函数。在本篇文章中，我们将深入探究事件监听的更多细节，涵盖参数传递、修饰符、键盘事件、表单事件以及自定义事件等方面，帮助你全面掌握事件监听的精髓。

参数传递

当通过在 methods 中定义方法，以供 @事件调用时，需要注意参数问题：

如果定义的方法不需要传递参数 ，那么调用时可以直接写成 @click="methodName"。
如果定义的方法需要传递参数 ，那么调用时需要使用 @click="methodName(arg1, arg2, ...)" 的形式，其中 arg1, arg2, ... 是要传递的参数。

修饰符

Vue 为事件监听提供了丰富的修饰符，可以帮助我们轻松实现一些常用的事件行为，这些修饰符包括：

.stop ：阻止事件冒泡。
.prevent ：阻止事件的默认行为。
.capture ：在捕获阶段触发事件。
.self ：只在元素自身触发事件，而不冒泡到父元素。
.once ：只触发一次事件，然后自动解除事件监听。

键盘事件

Vue 也提供了对键盘事件的监听，可以通过 v-on:keyup.enter 或 @keyup.enter="methodName" 的方式为元素绑定键盘事件处理函数。在这里，keyup 表示键盘按键松开时触发事件，enter 表示键盘上的回车键，因此当用户按下回车键时，就会触发该事件。

表单事件

Vue 还提供了对表单事件的监听，可以通过 v-on:submit.prevent 或 @submit.prevent="methodName" 的方式为表单元素绑定表单事件处理函数。在这里，submit 表示表单被提交时触发事件，.prevent 修饰符用于阻止表单的默认提交行为。