詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法
一、本節(jié)說(shuō)明
我們?cè)陂_(kāi)發(fā)過(guò)程中經(jīng)常需要監(jiān)聽(tīng)用戶(hù)的輸入，比如：用戶(hù)的點(diǎn)擊事件、拖拽事件、鍵盤(pán)事件等等。這就需要用到我們下面要學(xué)習(xí)的內(nèi)容v-on指令。
我們通過(guò)一個(gè)簡(jiǎn)單的計(jì)數(shù)器的例子，來(lái)講解v-on指令的使用。
二、 怎么做
- 定義數(shù)據(jù)counter，用于表示計(jì)數(shù)器數(shù)字，初始值設(shè)置為0
- v-on:click 表示當(dāng)發(fā)生點(diǎn)擊事件的時(shí)候，觸發(fā)等號(hào)里面的表達(dá)式或者函數(shù)
- 表達(dá)式counter++和counter--分別實(shí)現(xiàn)計(jì)數(shù)器數(shù)值的加1和減1操作
- 語(yǔ)法糖：我們可以將v-on:click簡(jiǎn)寫(xiě)為@click
三、 效果
- 點(diǎn)擊加號(hào)數(shù)值加1
- 點(diǎn)擊減號(hào)數(shù)值減1
四、 深入
表達(dá)式只適用于簡(jiǎn)單的數(shù)據(jù)操作場(chǎng)景。如果操作比較復(fù)雜，我們要使用函數(shù)的方式實(shí)現(xiàn)。
定義methods：incr與decr分別實(shí)現(xiàn)加一和減一操作
附錄：js常用可監(jiān)聽(tīng)事件列表
| 屬性 | 事件何時(shí)觸發(fā) |
| abort | 圖像的加載被中斷。 |
| blur | 元素失去焦點(diǎn)。 |
| change | 域的內(nèi)容被改變。 |
| click | 當(dāng)用戶(hù)點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 |
| dblclick | 當(dāng)用戶(hù)雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 |
| error | 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。 |
| focus | 元素獲得焦點(diǎn)。 |
| keydown | 某個(gè)鍵盤(pán)按鍵被按下。 |
| keypress | 某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。 |
| keyup | 某個(gè)鍵盤(pán)按鍵被松開(kāi)。 |
| load | 一張頁(yè)面或一幅圖像完成加載。 |
| mousedown | 鼠標(biāo)按鈕被按下。 |
| mousemove | 鼠標(biāo)被移動(dòng)。 |
| mouseout | 鼠標(biāo)從某元素移開(kāi)。 |
| mouseover | 鼠標(biāo)移到某元素之上。 |
| mouseup | 鼠標(biāo)按鍵被松開(kāi)。 |
| reset | 重置按鈕被點(diǎn)擊。 |
| resize | 窗口或框架被重新調(diào)整大小。 |
| select | 文本被選中。 |
| submit | 確認(rèn)按鈕被點(diǎn)擊。 |
| unload | 用戶(hù)退出頁(yè)面。 |
以上就是詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法的詳細(xì)內(nèi)容，更多關(guān)于vue v-on指令的用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- 淺談Vue.js 中的 v-on 事件指令的使用
- 聊聊vue 中的v-on參數(shù)問(wèn)題
- 關(guān)于Vue v-on指令的使用
- Vue.js中v-on指令的用法介紹
- Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
- vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
- Vue中的v-model，v-bind，v-on的區(qū)別解析
- Vue.js基礎(chǔ)之監(jiān)聽(tīng)子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
- vue3常用的指令之v-bind和v-on指令用法
- vue v-on傳遞參數(shù)和事件修飾符的使用
相關(guān)文章
Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼，需要的朋友可以參考下2021-05-05
解決vue-cli 配置資源引用的絕對(duì)路徑問(wèn)題
這篇文章主要介紹了vue-cli 配置資源引用的絕對(duì)路徑的問(wèn)題，本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)發(fā)表評(píng)論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
淺析Vue中defineProps的解構(gòu)和不解構(gòu)
defineProps?是?Vue?3?Composition?API?中用來(lái)聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下2025-02-02
vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue裁切預(yù)覽組件功能的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue裁切預(yù)覽組件功能的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
本文就討論下怎么實(shí)現(xiàn)一個(gè)處理.vue文件的loader，以及用loader處理完.vue文件怎么把內(nèi)容渲染在瀏覽器上并實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式，對(duì)vue文件解析器相關(guān)知識(shí)感興趣的朋友一起看看吧2022-06-06
vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
這篇文章主要介紹了vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
vue-router路由參數(shù)刷新消失的問(wèn)題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問(wèn)題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09