浅谈Vue.js中的v-on(事件处理)


Posted in Javascript onSeptember 05, 2017

Vue.js的事件处理

监听事件

我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="msg+=1"/>
</div>
var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
})

结果

浅谈Vue.js中的v-on(事件处理)

方法事件处理器

许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="jia"/>
</div>
var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  // 在 `methods` 对象中定义方法
  methods:{
    jia:function(event){
      console.log(event)
    }
  }
})

结果

MouseEvent {isTrusted: true, screenX: 18, screenY: 107, clientX: 18, clientY: 17, …}

内联处理器方法

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="jia('my day')"/>
</div>
var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  methods:{
    jia:function(x){
      console.log(x)
    }
  }
})

结果

my day

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 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>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上. 如果你还没有阅读关于组件的文档,现在大可不必担心。

键值修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符:

<div id="ar5">
  <input type="button" value="a" v-on:keydown="a">
</div>
var vm = new Vue({
  el:"#ar5",
  data:{
    msg:1
  },
  methods:{
    a:function(e){
      console.log(e.keyCode)
    }
  }
})

我们可以得到不同键的键值

结果

浅谈Vue.js中的v-on(事件处理)

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

当然,如果你需要其他的键,vue.js也为你提供了可以通过全局 config.keyCodes 对象自定义键值修饰符别名:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

修饰键

可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。

  • .ctrl
  • .alt
  • .shift
  • .meta

注意:在Mac系统键盘上,meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META” 或者 “Meta”。

例如:

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

修饰键比正常的按键不同;修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发事件。

鼠标按键修饰符

这些修饰符会限制处理程序监听特定的滑鼠按键

  • .left
  • .right
  • .middle

为什么在HTML中监听事件

你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

  • 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
  • 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
  • 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
js创建对象的方式总结
Jan 10 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 #Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 #Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 #Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
纯js实现画一棵树的示例
Sep 05 #Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 #Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
You might like
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
php两种无限分类方法实例
2015/04/21 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
php通过各种函数判断0和空
2020/07/04 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
让焦点自动跳转
2006/07/01 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
基于python实现雪花算法过程详解
2019/11/16 Python
几款好用的python工具库(小结)
2020/10/20 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
三下乡活动方案
2014/01/31 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
科技工作者先进事迹
2014/08/16 职场文书
卖车协议书范例
2014/09/16 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
筑梦中国心得体会
2016/01/18 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Python+Appium新手教程
2021/04/17 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA