vue.js事件处理器是什么

这篇文章主要为大家详细介绍了vue.js事件处理器是什么，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！

监听事件

可以用v-on指令监听DOM事件来触发一些javascript代码。

demo:

代码如下：

<div v-on:click="++counter">点击，增加1</div>
<span>{{counter}}</span>

代码如下：

 data:{

　　counter:0

}

方法事件处理器

许多事件处理器的逻辑都很复杂，所以直接把javaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用

代码如下：

<div v-on:click="counter()">点击，增加1</div>
<span>{{counter}}</span>

代码如下：

data:{

　　counter:0

},

method:{

　　counter:function(){

　　this.counter++;

　　}

}

有时也需要在内联语句处理器中访问原生DOM事件，可以用特殊变量$event把它传入方法：

$event 原生事件对象

事件修饰符在事件处理程序中调用event.preventDefault()或event.stopPropagagation()是非常常见的需求。尽管我们可以在methods中轻松实现这点，但更好的

方式是：methods只是纯粹的数据逻辑，而不是去处理DOM事件的细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符，通过由（.）表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

代码如下：

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

新增

代码如下：

<!--点击事件将只会触发一次-->
<a v-on:click.once="dothis"></a>

不像其他只能对原生的DOM事件起作用的修饰符，.once修饰符还能被用到自定义的组件事件上

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

代码如下：

<!--只有在keyCode是13时调用vm.submit()-->
<input v-on:keyup.13="submit">

常见的按键还有别名：

代码如下：

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

全部的按键别名：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

可以通过全局config.keyCodes对象 自定义案件修饰符别名

代码如下：

//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1=112

按键修饰符 新增

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生反应。

.ctrl

.alt

.shift

.meta

注意：在不同系统的键盘上，meta对应的键不一样

为什么在HTML中监听事件你可能注意到这种事件监听的方式违背了关注点分离的传统理念。不必担心，因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致任何维护上的困难。实际上，使用v-on有几个好处：

1 扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法

2 因为你无须在JavaScript里手动绑定事件，你的viewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。

3 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，你无须担心如何自己清理它们。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。

注：关于vue.js事件处理器是什么的内容就先介绍到这里，更多相关文章的可以留意