>本节讲解的内容对前面的章节具有依赖性，如果看起来有困难，请先看本系列前面的章节 ## 一、本节说明 我们在开发过程中经常需要监听用户的输入，比如：用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容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) | 用户退出页面。 |