一、本節說明

我們在開發過程中經常需要監聽使用者的輸入，比如：使用者的點選事件、拖拽事件、鍵盤事件等等。這就需要用到我們下面要學習的內容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指令的用法的資料請關注我們其它相關文章！