这篇文章主要为大家详细介绍了vue.js事件处理器是什么,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
可以用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 原生事件对象
方式是: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对应的键不一样
1 扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法
2 因为你无须在JavaScript里手动绑定事件,你的viewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试。
3 当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,你无须担心如何自己清理它们。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/3054-0.html
注:关于vue.js事件处理器是什么的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。