Vue.JS入门教程之事件监听


Posted in Javascript onDecember 01, 2016

你可以使用 v-on 指令来绑定并监听 DOM 事件。绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式。如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel:

<div id="demo">
 <a v-on="click: onClick">触发一个方法函数</a>
 <a v-on="click: n++">触发一个表达式</a>
</div>
new Vue({
 el: '#demo',
 data: {
  n: 0
 },
 methods: {
  onClick: function (e) {
  console.log(e.targetVM.n);
  console.log(e.target.tagName);// "A"
  console.log(e.targetVM === this);// true
  }
 }
 });

执行表达式

当在 v-repeat 里使用 v-on 时,targetVM 显得很有用,因为 v-repeat 会创建大量子 ViewModel。但是,通过执行表达式的方式,把代表当前 ViewModel 数据对象的别名传进去,会更方便直观一些:

<ul id="list">
 <li v-repeat="item in items" v-on="click: toggle(item)">
 {{item.text}}
 </li>
 <button v-on="click: submit('hello!', $event)">Submit</button>
</ul>
new Vue({
 el: '#list',
 data: {
  items: [
  { text: 'one', done: true },
  { text: 'two', done: false }
  ]
 },
 methods: {
  toggle: function (item) {
  console.info(item.done);
  item.done = !item.done;
  console.info(item.done);
  },
  submit: function (msg, e) {
  e.stopPropagation();
  console.info(msg + ' submit is called!');
  }
 }
 })

当你想要在表达式中访问原来的 DOM event,你可以传递一个 $event 参数进去。

key过滤器
当监听键盘事件时,我们常常需要判断常用的 key code。Vue.js 提供了一个特殊的只能用在 v-on 指令的过滤器:key。它接收一个表示 key code 的参数并完成判断:

<!-- 只有当 keyCode 等于 13 时才调用方法 -->
 <input v-on="keyup:mySubmit | key 13">

系统有很多预设值可以使用,例如:

<!-- 效果同上 -->
<input v-on="keyup:submit | key 'enter'">

预设值为:enter tab delete esc up down left right space

为什么在HTML中使用监听器
你可能会注意到整个事件监听的方式违背了 “separation of concern” 的传统理念。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护困难。实际上,使用 v-on 还有更多好处:

它便于在 HTML 模板中轻松定位 JS 代码里的对应方法实现。
因为你无须在 JS 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦。这会更易于测试。
当一个 ViewModel 被销毁时,所有的事件监听都会被自动移除。你无须担心如何自行清理它们。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
RequireJS用法简单示例
Aug 20 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vue实现循环切换动画
Oct 17 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
Vue3为什么这么快
Sep 23 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 #Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 #Javascript
jsTree使用记录实例
Dec 01 #Javascript
Vue.JS入门教程之列表渲染
Dec 01 #Javascript
Vue.JS入门教程之处理表单
Dec 01 #Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
nicejforms——美化表单不用愁
2007/02/20 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
在python中修改.properties文件的操作
2020/04/08 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
中专毕业生自荐信
2013/11/16 职场文书
建筑结构施工求职信
2014/07/11 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
2014年残联工作总结
2014/11/21 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server