詳解vue中v-on事件監(jiān)聽指令的基本用法
一、本節(jié)說明
我們?cè)陂_發(fā)過程中經(jīng)常需要監(jiān)聽用戶的輸入,比如:用戶的點(diǎn)擊事件、拖拽事件、鍵盤事件等等。這就需要用到我們下面要學(xué)習(xí)的內(nèi)容v-on指令。
我們通過一個(gè)簡單的計(jì)數(shù)器的例子,來講解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操作
- 語法糖:我們可以將v-on:click簡寫為@click
三、 效果
- 點(diǎn)擊加號(hào)數(shù)值加1
- 點(diǎn)擊減號(hào)數(shù)值減1
四、 深入
表達(dá)式只適用于簡單的數(shù)據(jù)操作場景。如果操作比較復(fù)雜,我們要使用函數(shù)的方式實(shí)現(xiàn)。
定義methods:incr與decr分別實(shí)現(xiàn)加一和減一操作
附錄:js常用可監(jiān)聽事件列表
屬性 | 事件何時(shí)觸發(fā) |
abort | 圖像的加載被中斷。 |
blur | 元素失去焦點(diǎn)。 |
change | 域的內(nèi)容被改變。 |
click | 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 |
dblclick | 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 |
error | 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。 |
focus | 元素獲得焦點(diǎn)。 |
keydown | 某個(gè)鍵盤按鍵被按下。 |
keypress | 某個(gè)鍵盤按鍵被按下并松開。 |
keyup | 某個(gè)鍵盤按鍵被松開。 |
load | 一張頁面或一幅圖像完成加載。 |
mousedown | 鼠標(biāo)按鈕被按下。 |
mousemove | 鼠標(biāo)被移動(dòng)。 |
mouseout | 鼠標(biāo)從某元素移開。 |
mouseover | 鼠標(biāo)移到某元素之上。 |
mouseup | 鼠標(biāo)按鍵被松開。 |
reset | 重置按鈕被點(diǎn)擊。 |
resize | 窗口或框架被重新調(diào)整大小。 |
select | 文本被選中。 |
submit | 確認(rèn)按鈕被點(diǎn)擊。 |
unload | 用戶退出頁面。 |
以上就是詳解vue中v-on事件監(jiān)聽指令的基本用法的詳細(xì)內(nèi)容,更多關(guān)于vue v-on指令的用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 淺談Vue.js 中的 v-on 事件指令的使用
- 聊聊vue 中的v-on參數(shù)問題
- 關(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)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
- vue3常用的指令之v-bind和v-on指令用法
- vue v-on傳遞參數(shù)和事件修飾符的使用
相關(guān)文章
vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼
這篇文章主要介紹了vue限制輸入框只能輸入8位整數(shù)和2位小數(shù),文中我們使用v-model加watch 實(shí)現(xiàn)這一個(gè)功能,代碼簡單易懂,需要的朋友可以參考下2019-11-11vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01