Vue之v-on指令和事件监听使用方式
投稿：jingxian
这篇文章主要介绍了Vue之v-on指令和事件监听使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、v-on 指令是什么？
- 作用：在 Vue 模板中监听 DOM 事件（如点击、输入、提交），触发对应方法。
- 缩写：
@是v-on:的简写，推荐用@（更简洁）。
二、基本语法：监听单个事件
1. 最简写法（无参数）
<button @click="greet">点我</button> <!-- 完全等价于 --> <button v-on:click="greet">点我</button>
2. 带参数写法
<button @click="say('Hello')">传参</button>methods: {
say(message) {
console.log(message); // 输出：Hello
}
}三、获取事件对象的两种方式
1. 自动接收（无额外参数时）
<button @click="handle">点我</button>
handle(event) {
// event 是事件对象，参数名可自定义（如 e、evt）
console.log(event.target.tagName); // 输出：BUTTON
}2. 手动传递（带额外参数时）
<button @click="handle('自定义参数', $event)">点我</button>handle(msg, event) {
console.log(msg); // 输出：自定义参数
console.log(event.type); // 输出：click
}四、常用事件名（固定写法，直接用）
| 事件名 | 触发场景 | 示例 |
|---|---|---|
| click | 鼠标点击 | <button @click="submit"> |
| input | 输入框内容变化 | <input @input="liveSearch"> |
| change | 表单元素值改变（如 select） | <select @change="update"> |
| submit | 表单提交 | <form @submit="handleSubmit"> |
| keydown | 键盘按下 | <input @keydown.enter="search"> |
五、事件修饰符：简化事件处理
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .stop | 阻止事件冒泡（相当于 event.stopPropagation()） | <button @click.stop="handle"> |
| .prevent | 阻止默认行为（相当于 event.preventDefault()） | <form @submit.prevent="submit"> |
| .once | 事件只触发一次 | <button @click.once="pay"> |
| .self | 只当事件在该元素本身触发时执行 | <div @click.self="handle"> |
组合修饰符示例：
<!-- 点击按钮提交表单，阻止冒泡且只触发一次 --> <button @click.stop.once="submitForm">提交</button>
六、按键修饰符：监听键盘事件
| 修饰符 | 对应按键 | 示例 |
|---|---|---|
| .enter | 回车键 | <input @keyup.enter="search"> |
| .esc | ESC 键 | <input @keydown.esc="cancel"> |
| .space | 空格键 | <input @keydown.space="handle"> |
示例：按下回车键触发搜索
<input @keyup.enter="search" placeholder="搜索...">
七、动态事件名（Vue 3 支持）
用方括号包裹变量，动态决定监听哪个事件：
<!-- eventType 是组件内变量，值可能是 'click' 或 'mouseover' --> <button @[eventType]="handle">动态事件</button>
八、绑定多个事件
用对象语法同时监听多个事件：
<button v-on="{
click: handleClick,
mouseover: handleHover
}">多功能按钮</button>九、总结：核心用法速查表
| 需求 | Vue 写法 |
|---|---|
| 监听点击事件 | <button @click="handle"> |
| 带参数触发方法 | <button @click="handle('参数')"> |
| 获取事件对象 | <button @click="handle($event)"> |
| 阻止事件冒泡 | <div @click.stop="handle"> |
| 表单提交不刷新页面 | <form @submit.prevent="submit"> |
| 按回车键触发事件 | <input @keyup.enter="search"> |
| 事件只触发一次 | <button @click.once="pay"> |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。