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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
js操作二级联动实现代码
Jul 27 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
google广告之另类js调用实现代码
Aug 22 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python的exec、eval使用分析
2017/12/11 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
土建资料员岗位职责
2014/01/04 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
工作态度检讨书
2014/02/11 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
品牌宣传方案
2014/03/21 职场文书
文案策划求职信
2014/04/14 职场文书
学前教育专业求职信
2014/09/02 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
离婚协议书范文
2015/01/26 职场文书
天鹅湖观后感
2015/06/09 职场文书
2019各种保证书范文
2019/06/24 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server