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. 最簡寫法（無參數）
<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
}四、常用事件名（固定寫法，直接用）
| 事件名 | 觸發(fā)場景 | 示例 |
|---|---|---|
| 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 | 事件只觸發(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 是組件內變量，值可能是 'click' 或 'mouseover' --> <button @[eventType]="handle">動態(tài)事件</button>
八、綁定多個事件
用對象語法同時監(jiān)聽多個事件：
<button v-on="{
click: handleClick,
mouseover: handleHover
}">多功能按鈕</button>九、總結：核心用法速查表
| 需求 | Vue 寫法 |
|---|---|
| 監(jiān)聽點擊事件 | <button @click="handle"> |
| 帶參數觸發(fā)方法 | <button @click="handle('參數')"> |
| 獲取事件對象 | <button @click="handle($event)"> |
| 阻止事件冒泡 | <div @click.stop="handle"> |
| 表單提交不刷新頁面 | <form @submit.prevent="submit"> |
| 按回車鍵觸發(fā)事件 | <input @keyup.enter="search"> |
| 事件只觸發(fā)一次 | <button @click.once="pay"> |
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue2.0結合webuploader實現文件分片上傳功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本篇文章主要介紹了詳解基于vue-cli配置移動端自適應，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue關于頁面刷新的幾個方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue獲取HTMLCollection列表的children時結果為undefined問題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時結果為undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vant是一個專為移動端設計的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時需要注意版本兼容問題,Vue3項目應安裝最新版Vant3,而Vue2項目則需安裝Vant2,安裝錯誤時,需卸載后重新安裝正確版本2024-10-10
我們知道的是，父傳子的通信，和子傳父的通信，那如何實現父子相互通信的呢，本文就來詳細的介紹一下，感興趣的可以了解一下2023-08-08
詳解windows下vue-cli及webpack 構建網站(二)導入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構建網站(二)導入bootstrap樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了解決VUE的對話框el-dialog點擊外部消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本文主要介紹了vue全局掛載實現APP全局彈窗的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05