>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。 我们通过一个简单的计数器的例子,来讲解v-on指令的使用。 ## 二、 怎么做 ![](https://img.kancloud.cn/bd/22/bd22a745b35279ce80f17d9da3564eef_937x436.png) * 定义数据counter,用于表示计数器数字,初始值设置为0 * v-on:click 表示当发生点击事件的时候,触发等号里面的**表达式**或者**函数** * 表达式`counter++`和`counter--`分别实现计数器数值的加1和减1操作 * 语法糖:我们可以将`v-on:click`简写为`@click` ## 三、 效果 ![](https://img.kancloud.cn/06/e7/06e7267ce9eb32292041ca2b2aab3ce3_178x106.gif) * 点击加号数值加1 * 点击减号数值减1 ## 四、 深入 表达式只适用于简单的数据操作场景。如果操作比较复杂,我们要使用函数的方式实现。 ![](https://img.kancloud.cn/20/a8/20a8fc58f9777fa5ff7b1cabce48c341_456x62.png) 定义methods:incr与decr分别实现加一和减一操作 ![](https://img.kancloud.cn/95/8e/958ee510bde68a11db0bb473ebf956cb_341x232.png) ### 附录: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) | 用户退出页面。 |