>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、本節說明 我們在開發過程中經常需要監聽用戶的輸入，比如：用戶的點擊事件、拖拽事件、鍵盤事件等等。這就需要用到我們下面要學習的內容v-on指令。 我們通過一個簡單的計數器的例子，來講解v-on指令的使用。 ## 二、 怎么做  * 定義數據counter，用于表示計數器數字，初始值設置為0 * v-on:click 表示當發生點擊事件的時候，觸發等號里面的**表達式**或者**函數** * 表達式`counter++`和`counter--`分別實現計數器數值的加1和減1操作 * 語法糖：我們可以將`v-on:click`簡寫為`@click` ## 三、 效果  * 點擊加號數值加1 * 點擊減號數值減1 ## 四、 深入 表達式只適用于簡單的數據操作場景。如果操作比較復雜，我們要使用函數的方式實現。  定義methods：incr與decr分別實現加一和減一操作  ### 附錄：js常用可監聽事件列表 | 屬性 | 事件何時觸發 | | --- | --- | | [abort](https://www.w3school.com.cn/jsref/event_onabort.asp) | 圖像的加載被中斷。 | | [blur](https://www.w3school.com.cn/jsref/event_onblur.asp) | 元素失去焦點。 | | [change](https://www.w3school.com.cn/jsref/event_onchange.asp) | 域的內容被改變。 | | [click](https://www.w3school.com.cn/jsref/event_onclick.asp) | 當用戶點擊某個對象時調用的事件句柄。 | | [dblclick](https://www.w3school.com.cn/jsref/event_ondblclick.asp) | 當用戶雙擊某個對象時調用的事件句柄。 | | [error](https://www.w3school.com.cn/jsref/event_onerror.asp) | 在加載文檔或圖像時發生錯誤。 | | [focus](https://www.w3school.com.cn/jsref/event_onfocus.asp) | 元素獲得焦點。 | | [keydown](https://www.w3school.com.cn/jsref/event_onkeydown.asp) | 某個鍵盤按鍵被按下。 | | [keypress](https://www.w3school.com.cn/jsref/event_onkeypress.asp) | 某個鍵盤按鍵被按下并松開。 | | [keyup](https://www.w3school.com.cn/jsref/event_onkeyup.asp) | 某個鍵盤按鍵被松開。 | | [load](https://www.w3school.com.cn/jsref/event_onload.asp) | 一張頁面或一幅圖像完成加載。 | | [mousedown](https://www.w3school.com.cn/jsref/event_onmousedown.asp) | 鼠標按鈕被按下。 | | [mousemove](https://www.w3school.com.cn/jsref/event_onmousemove.asp) | 鼠標被移動。 | | [mouseout](https://www.w3school.com.cn/jsref/event_onmouseout.asp) | 鼠標從某元素移開。 | | [mouseover](https://www.w3school.com.cn/jsref/event_onmouseover.asp) | 鼠標移到某元素之上。 | | [mouseup](https://www.w3school.com.cn/jsref/event_onmouseup.asp) | 鼠標按鍵被松開。 | | [reset](https://www.w3school.com.cn/jsref/event_onreset.asp) | 重置按鈕被點擊。 | | [resize](https://www.w3school.com.cn/jsref/event_onresize.asp) | 窗口或框架被重新調整大小。 | | [select](https://www.w3school.com.cn/jsref/event_onselect.asp) | 文本被選中。 | | [submit](https://www.w3school.com.cn/jsref/event_onsubmit.asp) | 確認按鈕被點擊。 | | [unload](https://www.w3school.com.cn/jsref/event_onunload.asp) | 用戶退出頁面。 |