vue.js事件处理器是什么


Posted in Javascript onMarch 20, 2017

监听事件

可以用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被销毁时,所有的事件处理器都会自动被删除,你无须担心如何自己清理它们。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
JavaScript中Dom操作实例详解
Jul 08 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 #Javascript
Vue.js基础学习之class与样式绑定
Mar 20 #Javascript
详解Vue中添加过渡效果
Mar 20 #Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
js实现鼠标拖动功能
Mar 20 #Javascript
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
webpack 样式加载的实现原理
2018/06/12 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
Python执行时间的计算方法小结
2017/03/17 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python实现的建造者模式示例
2018/08/06 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
如何使用python代码操作git代码
2020/02/29 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
大学生找工作推荐信范文
2013/11/28 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
早读课迟到检讨书
2014/09/25 职场文书
毕业生对母校寄语
2015/02/26 职场文书
Oracle笔记
2021/04/05 Oracle
QT与javascript交互数据的实现
2021/05/26 Javascript
MySQL 计算连续登录天数
2022/05/11 MySQL