一、本節說明

我們在開發過程中經常需要監聽用戶的輸入，比如：用戶的點擊事件、拖拽事件、鍵盤事件等等。這就需要用到我們下面要學習的內容v-on指令。我們通過一個簡單的計數器的例子，來講解v-on指令的使用。

二、 怎么做

定義數據counter，用于表示計數器數字，初始值設置為0 v-on:click 表示當發生點擊事件的時候，觸發等號里面的表達式或者函數 表達式counter++和counter--分別實現計數器數值的加1和減1操作 語法糖：我們可以將v-on:click簡寫為@click

三、 效果

點擊加號數值加1 點擊減號數值減1

四、 深入

表達式只適用于簡單的數據操作場景。如果操作比較復雜，我們要使用函數的方式實現。

定義methods：incr與decr分別實現加一和減一操作

附錄：js常用可監聽事件列表

屬性 事件何時觸發 abort 圖像的加載被中斷。 blur 元素失去焦點。 change 域的內容被改變。 click 當用戶點擊某個對象時調用的事件句柄。 dblclick 當用戶雙擊某個對象時調用的事件句柄。 error 在加載文檔或圖像時發生錯誤。 focus 元素獲得焦點。 keydown 某個鍵盤按鍵被按下。 keypress 某個鍵盤按鍵被按下并松開。 keyup 某個鍵盤按鍵被松開。 load 一張頁面或一幅圖像完成加載。 mousedown 鼠標按鈕被按下。 mousemove 鼠標被移動。 mouseout 鼠標從某元素移開。 mouseover 鼠標移到某元素之上。 mouseup 鼠標按鍵被松開。 reset 重置按鈕被點擊。 resize 窗口或框架被重新調整大小。 select 文本被選中。 submit 確認按鈕被點擊。 unload 用戶退出頁面。

以上就是詳解vue中v-on事件監聽指令的基本用法的詳細內容，更多關于vue v-on指令的用法的資料請關注好吧啦網其它相關文章！