【Vue.js基础教程】第8章 v-on 事件的监听与处理
Vue.js基础教程 第8章 v-on 事件的监听与处理
欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中
在这里插入图片描述
在前端开发中，事件监听与处理是至关重要的一部分，尤其是在用户交互中。每次点击按钮、输入文字或者滚动页面，都会触发不同的事件。而如何高效地捕捉并处理这些事件，成了我们提升用户体验的重要环节。作为前端开发的基础之一，Vue.js 提供了极其方便的方式来处理这些事件。
我记得在学习 Vue.js 的时候，刚开始接触事件监听时有点懵，明明只是简单的点击事件，为什么 Vue.js 会提供这么多不同的修饰符和语法？但是，随着深入学习，我渐渐发现 Vue.js 提供的这些特性真的能让我们轻松管理复杂的事件处理逻辑。在这一章中，我将带你一起探讨 Vue.js 中事件监听与处理的方方面面，让我们从基础开始，逐步掌握更高级的用法。
事件处理
监听事件
Vue.js 提供了 v-on 指令来监听 DOM 事件，并在事件触发时执行 JavaScript 代码。我们可以通过这种方式实现交互效果。
示例：
<div id="example-1">
<button v-on:click="counter += 1">增加 1</button>
<p>按钮被点击了 {{ counter }} 次。</p>
</div>var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})输出结果：
按钮被点击了 0 次。事件处理方法
当事件处理逻辑变得复杂时，直接将 JavaScript 代码写入 v-on 指令中就不太合适了。此时，可以让 v-on 指令调用一个方法。
示例：
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">问候</button>
</div>var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
// `this` 在方法中指向当前 Vue 实例
alert('你好，' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})内联处理器中的方法
除了直接绑定方法，我们还可以在内联 JavaScript 语句中调用方法：
<div id="example-3">
<button v-on:click="say('你好')">说你好</button>
<button v-on:click="say('什么')">说什么</button>
</div>new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})此外，有时我们需要在内联语句中访问原生 DOM 事件。这时可以使用特殊变量 $event 来传递原生事件：
<button v-on:click="warn('表单还不能提交', $event)">提交</button>// methods: {
warn: function (message, event) {
// 现在可以访问原生事件对象
if (event) {
event.preventDefault() // 阻止默认行为
}
alert(message)
}事件修饰符
事件处理程序中经常需要调用 event.preventDefault() 或 event.stopPropagation()，虽然我们可以在方法中手动调用这些函数，但更好的方式是使用 Vue.js 提供的事件修饰符。通过事件修饰符，我们可以让代码更加简洁、清晰。
Vue.js 为 v-on 指令提供了以下几种常用的事件修饰符：
.stop：阻止事件传播.prevent：阻止默认行为.capture：使用事件捕获模式.self：事件必须来自当前元素.once：事件触发一次后移除监听.passive：事件不会阻止默认行为，提升滚动性能
例如：
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符串联使用 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 事件只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 事件必须来自当前元素 -->
<div v-on:click.self="doThat">...</div>使用修饰符时，顺序很重要。如果用 v-on:click.prevent.self，它会阻止所有点击事件；而 v-on:click.self.prevent 只会阻止点击当前元素。
按键修饰符
在监听键盘事件时，Vue 提供了按键修饰符，可以让你指定某个特定的按键触发事件。
<!-- 只有按下 Enter 键时触发 -->
<input v-on:keyup.enter="submit">你还可以使用键盘事件的 key 属性来触发其他按键的事件：
<input v-on:keyup.page-down="onPageDown">如果要支持旧版浏览器，可以使用按键码的别名，例如：
<input v-on:keyup.13="submit">常用的按键别名包括：
.enter.tab.delete（捕获“删除”和“退格”键）.esc.space.up.down.left.right
系统修饰键
如果你希望事件只在按下某个系统修饰键（如 Ctrl、Alt、Shift 或 Meta）时触发，可以使用以下修饰符：
<!-- 按住 Ctrl 键并点击 -->
<div v-on:click.ctrl="doSomething">点击我</div>
<!-- 按住 Alt 键并按下 C 键 -->
<input v-on:keyup.alt.67="clear">.exact 修饰符
.exact 修饰符可以确保事件仅在精确按下特定的系统修饰键组合时触发。
<!-- 只有按下 Ctrl 键时才触发 -->
<button v-on:click.ctrl.exact="onClick">点击我</button>鼠标按钮修饰符
Vue 还提供了鼠标按钮修饰符，可以限制事件仅在点击特定鼠标按钮时触发：
.left：左键.right：右键.middle：中键
例如：
<!-- 只有左键点击时触发 -->
<button v-on:click.left="onLeftClick">左键点击</button>
<!-- 只有右键点击时触发 -->
<button v-on:click.right="onRightClick">右键点击</button>为什么在 HTML 中监听事件？
在 Vue.js 中，事件处理方法直接写在模板中，虽然有时看起来违背了关注点分离的原则，但其实这种做法带来了很多好处：
- 可以直接在 HTML 模板中找到对应的 JavaScript 方法。
- Vue 的事件绑定让 ViewModel 代码更加纯粹，和 DOM 解耦，便于测试。
- 当 ViewModel 销毁时，事件处理器会自动移除，不需要手动清理。
希望这篇文章对你学习 Vue.js 事件处理有所帮助！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号