浅谈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 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
使用koa2创建web项目的方法步骤
Mar 12 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
Yii框架登录流程分析
2014/12/03 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python对List中的元素排序的方法
2018/04/01 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python中id函数运行方式
2020/07/03 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
班主任评语大全
2014/04/26 职场文书
教研处工作方案
2014/05/26 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
授权委托书样本
2014/09/25 职场文书
关于安全的广播稿
2014/10/23 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书