一、本節(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ù)操作場(chǎng)景。如果操作比較復(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)注好吧啦網(wǎng)其它相關(guān)文章！