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 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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扩展函数
2006/10/09 PHP
php adodb操作mysql数据库
2009/03/19 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
详解nvm管理多版本node踩坑
2019/07/26 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python命令行参数用法实例分析
2019/06/25 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Linux的文件类型
2016/07/05 面试题
作风大整顿心得体会
2014/09/10 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
警用民用对讲机找不同
2022/02/18 无线电
node快速搭建后台的实现步骤
2022/02/18 NodeJs