Vue之v-on指令和事件監(jiān)聽使用方式
更新時間：2025年06月17日 15:47:12 投稿：jingxian
這篇文章主要介紹了Vue之v-on指令和事件監(jiān)聽使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、v-on 指令是什么？
- 作用：在 Vue 模板中監(jiān)聽 DOM 事件（如點擊、輸入、提交），觸發(fā)對應方法。
- 縮寫：
@是v-on:的簡寫，推薦用@（更簡潔）。
二、基本語法：監(jiān)聽單個事件
1. 最簡寫法（無參數(shù)）
<button @click="greet">點我</button> <!-- 完全等價于 --> <button v-on:click="greet">點我</button>
2. 帶參數(shù)寫法
<button @click="say('Hello')">傳參</button>methods: {
say(message) {
console.log(message); // 輸出：Hello
}
}三、獲取事件對象的兩種方式
1. 自動接收（無額外參數(shù)時）
<button @click="handle">點我</button>
handle(event) {
// event 是事件對象，參數(shù)名可自定義（如 e、evt）
console.log(event.target.tagName); // 輸出：BUTTON
}2. 手動傳遞（帶額外參數(shù)時）
<button @click="handle('自定義參數(shù)', $event)">點我</button>handle(msg, event) {
console.log(msg); // 輸出：自定義參數(shù)
console.log(event.type); // 輸出：click
}四、常用事件名（固定寫法，直接用）
| 事件名 | 觸發(fā)場景 | 示例 |
|---|---|---|
| click | 鼠標點擊 | <button @click="submit"> |
| input | 輸入框內(nèi)容變化 | <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 | 事件只觸發(fā)一次 | <button @click.once="pay"> |
| .self | 只當事件在該元素本身觸發(fā)時執(zhí)行 | <div @click.self="handle"> |
組合修飾符示例：
<!-- 點擊按鈕提交表單，阻止冒泡且只觸發(fā)一次 --> <button @click.stop.once="submitForm">提交</button>
六、按鍵修飾符：監(jiān)聽鍵盤事件
| 修飾符 | 對應按鍵 | 示例 |
|---|---|---|
| .enter | 回車鍵 | <input @keyup.enter="search"> |
| .esc | ESC 鍵 | <input @keydown.esc="cancel"> |
| .space | 空格鍵 | <input @keydown.space="handle"> |
示例：按下回車鍵觸發(fā)搜索
<input @keyup.enter="search" placeholder="搜索...">
七、動態(tài)事件名（Vue 3 支持）
用方括號包裹變量，動態(tài)決定監(jiān)聽哪個事件：
<!-- eventType 是組件內(nèi)變量，值可能是 'click' 或 'mouseover' --> <button @[eventType]="handle">動態(tài)事件</button>
八、綁定多個事件
用對象語法同時監(jiān)聽多個事件：
<button v-on="{
click: handleClick,
mouseover: handleHover
}">多功能按鈕</button>九、總結(jié)：核心用法速查表
| 需求 | Vue 寫法 |
|---|---|
| 監(jiān)聽點擊事件 | <button @click="handle"> |
| 帶參數(shù)觸發(fā)方法 | <button @click="handle('參數(shù)')"> |
| 獲取事件對象 | <button @click="handle($event)"> |
| 阻止事件冒泡 | <div @click.stop="handle"> |
| 表單提交不刷新頁面 | <form @submit.prevent="submit"> |
| 按回車鍵觸發(fā)事件 | <input @keyup.enter="search"> |
| 事件只觸發(fā)一次 | <button @click.once="pay"> |
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3寫echarts不能根據(jù)屏幕大小縮的解決辦法
這篇文章主要介紹了vue3寫echarts不能根據(jù)屏幕大小縮的解決辦法,文中通過代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2025-04-04
我們有時候會遇到要輸入框自動獲取焦點的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動獲得焦點的簡單方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文從零搭建vue項目，給大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue.js學習筆記之v-bind和v-on解析，v-bind 指令用于響應地更新 HTML 特征，v-on 指令用于監(jiān)聽DOM事件，文中還給大家提到了v-bind,v-on的縮寫，感興趣的朋友參考下吧2018-05-05
Vue3?中頁面重定向主要依賴?Vue?Router?4,這是一個Vue3?配套的路由庫,具體分為路由配置式重定向、編程式導航重定向和路由守衛(wèi)重定向三類場景,以下是各種方式匯總,需要的朋友可以參考下2025-12-12
vue前端crud(頁面布局、新增及vue中反向代理)圖文詳解
Vue.js是一款輕量級的前端框架,具有響應式的數(shù)據(jù)綁定和組件化的開發(fā)方式,適合構(gòu)建用戶界面,這篇文章主要介紹了vue前端crud(頁面布局、新增及vue中反向代理)的相關(guān)資料,需要的朋友可以參考下2026-02-02
前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)
這篇文章主要介紹了前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了在vue3中使用jsx的配置以及一些小問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03