本文用一个例子描述了Vue事件处理操作。分享给大家参考，如下：

1倾听事件

您可以使用v-on指令来监听DOM事件，并在触发时运行一些JavaScript代码。

html:

Div id=' app1 '按钮v-: click=' counter=1 ' increment/button p按钮已被单击{{ counter }}次。/p/divjs:

var app1=new Vue({ el: '#app1 '，data : { count : { 0 } })；效果：

2种事件处理方法

但是很多事件处理逻辑比较复杂，直接在v-on指令中编写JavaScript代码是不可行的。因此，v-on也可以接收需要调用的方法名。

html:

Div id=' app2 '按钮on: click='问候'问候语/按钮/divjs:

Varapp2=newVue ({el:' # app2 '，data: {name3360' de Niro'}，methods : { greet : function(event){//这里指的是当前Vue实例console.log ('hello' this.name)！) );if(event){ console . log(event . target . tagname)；} } }});效果：

您也可以直接调用Vue实例定义的函数：

3个内联处理器中的方法

除了直接绑定到方法，您还可以在内联JavaScript语句中调用方法：

html:

Div id=' app 3 '按钮v-on :点击='问候'(' hello ')'问候/按钮/divjs:

var app3=new Vue({ el: '#app3 '，methods : { greet : function(message){ console . log(message))；} }});有时需要在内联语句处理器中访问原始的DOM事件。您可以使用特殊变量$event将其传递给方法：

html:

按钮on:click=' warn '(表单被禁用，$event)'提交/按钮js:

方法：Warn:函数(消息，事件){//访问本机对象if(事件){ event . preventdefault()；} console.log(消息)；}}4个事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的要求。虽然我们可以很容易地在方法中实现这一点，但更好的方法是该方法只有纯数据逻辑，而不是处理DOM事件的细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符。如前所述，修饰符由以点开头的指令后缀表示。停下来。预防。捕捉。自我。一次。被动！-防止点击事件扩散-a v-: click。停下来！-提交事件不再重载页面-表单v-: submit . prevent=' on submit '/表单！-串行修改器-av-:单击。停下来。防止='那样做'/a！-仅修饰符-形成v-on:submit.prevent/form!-添加事件侦听器时使用事件捕获模式-！-也就是说，元素本身触发的事件先在这里处理，然后交给内部元素-div v-: click . capture=' dothis './div！-当event.target是当前元素本身时触发处理函数-！-也就是说，事件不是从内部元素触发的-div v-: click。self='做那件事'./div使用修饰语时，顺序很重要；相应的代码以相同的顺序生成。因此，使用v-: click . prevent . self将阻止所有点击，而v-: click . self . prevent将只阻止对元素本身的点击。2.1.4新增

！-click事件只能触发一次-av-: click。与其他只能处理本机DOM事件的修饰符不同的是。once修饰符也可以用于自定义组件事件。

添加了2.3.0

Vue还为addEventListener中的被动选项提供了一个.被动修饰符。

！-滚动事件的默认行为将立即触发(无需等待onScroll事件完成)-！-包括event . preventdefault()-div v-: croll . passive=' on croll './div，一个被动修饰符，可以特别提高移动终端的性能。

不要用。对…被动。预防，因为。阻止将被忽略，浏览器可能会显示警告。记住。passive告诉浏览器，您不想阻止事件的默认行为。

5键修饰符

在听键盘事件时，我们经常需要检查常见的键值。Vue允许v-on在聆听键盘事件时添加按键修饰符：

！-当- keyCode为13时，调用VM . submit()-input TV-: keyup . 13=' submit '。很难记住所有的键码，因此Vue为最常用的键提供了别名：

！-使用密钥别名-输入v-: keyup . enter=' submit '！-使用缩写语法-input @ keyup.enter=' submit '所有密钥别名：进入。选项卡。删除(捕捉“删除”和“退格”键)。esc。空间。起来。趴下。向左。右键可以通过全局config.keyCodes对象自定义密钥修饰符别名：

//自定义按钮的修饰符别名vue . config . key codes . f1=112；自动匹配关键修饰符

添加了2.5.0

您也可以直接将KeyboardEvent.key公开的任何有效键名转换为kebbab-case作为修饰符：

input @ key up . page-down=' on page down '在上面的例子中，处理函数只在$event.key==='PageDown '时调用。

一些键(。esc和所有方向键)在IE9中具有不同的键值。如果你想支持IE9，他们内置的别名应该是首选。

6系统修改键

添加了2.1.0

以下修饰符可用于实现侦听器，该侦听器仅在按下相应的键时触发鼠标或键盘事件。

. ctrl.alt.shift.meta注意：meta对应的是Mac系统键盘上的命令键()。在Windows系统键盘元上，对应Windows徽标键()。在Sun操作系统键盘上，meta对应于实心宝石键()。在其他特定的键盘上，尤其是麻省理工学院和Lisp机器的键盘，以及它们的后继产品，如Knight键盘和space-cadet键盘上，meta被标记为“META”。在Symbolics键盘上，Meta标记为“meta”或“META”。

！-Alt C-input @ key up . Alt . 67=' clear '！-ctrlclick-div @ click。ctrl=“做某事”做某事/div请注意，修饰键不同于常规键。与keyup事件一起使用时，事件触发时必须按下修饰键。换句话说，只有在按住ctrl的同时释放其他键，才能触发keyup.ctrl。简单地释放ctrl不会触发事件。如果您想要这种行为，请使用keyCode:keyup.17作为ctrl。

6.1 .精确修饰语

添加了2.5.0

那个。精确修改器允许您控制由系统修改器的精确组合触发的事件。

！-当- Ctrl或Alt或Shift同时按下时触发-button @ click . Ctrl=' onclick ' a/button！-是，仅在按下Ctrl时触发-button @ click . Ctrl . exact=' onctrlclick ' a/button！-未按下系统修改器时触发-button @ click . exact=“onclick”a/button 6.2鼠标按钮修改器

添加了2.2.0

这些修饰符. left.right.middle限制处理程序只响应特定的鼠标按钮。

7为什么要在HTML中监听事件？

您可能会注意到，这种事件监控方式违反了长期以来关注分离的优良传统。但是不用担心，因为所有的Vue.js事件处理方法和表达式都是严格绑定到当前视图的ViewModel的，不会造成任何维护困难。实际上，使用v-on有几个优点：

通过浏览HTML模板，可以很容易地在JavaScript代码中找到相应的方法。

因为您不需要在JavaScript中手动绑定事件，所以您的ViewModel代码可以是非常纯的逻辑，与DOM完全解耦，并且更容易测试。

当视图模型被销毁时，所有事件处理程序都会被自动删除。你不必担心如何自己清洗它们。

希望本文对vue.js程序的设计有所帮助。