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的单例模式 (singleton in Javascript)
Jun 11 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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 Socket写的POP3类
2013/10/30 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python切片索引用法示例
2018/05/15 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python hashlib模块加密过程解析
2019/11/05 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
html5唤起app的方法
2017/11/30 HTML / CSS
总经理助理的八要求
2013/11/12 职场文书
创先争优制度
2014/01/21 职场文书
继承权公证书
2014/04/09 职场文书
求职信标题怎么写
2014/05/26 职场文书
委托书的样本
2015/01/28 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android