这篇文章主要为大家展示了如何使用vue中v-on事件监听指令，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

一、本节说明

我们在开发过程中经常需要监听用户的输入，比如：用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。
我们通过一个简单的计数器的例子，来讲解v-on指令的使用。

二、 怎么做

定义数据counter，用于表示计数器数字，初始值设置为0v-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事件监听指令的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。