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 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JS扩展方法实例分析
Apr 15 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
vue使用Font Awesome的方法步骤
Feb 26 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一个找二层目录的小东东
2012/08/02 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
用jquery来定位
2007/02/20 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
python flask实现分页的示例代码
2018/08/02 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python如何将模块打包并发布
2020/08/30 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
企业标语口号
2014/06/10 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
话题作文之诚信
2019/11/28 职场文书
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL