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