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 Object的extend是一个常用的功能
Dec 02 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
关于this和self的使用说明
Aug 01 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
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开发模式(简写版)
2007/03/15 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Gird事件机制初级读本
2007/03/10 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python科学计算之Pandas详解
2017/01/15 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python实现点云投影到平面显示
2020/01/18 Python
pytorch简介
2020/11/11 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
班长竞选演讲稿
2014/04/24 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
导游词怎么写
2015/02/04 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android