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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
javascript 用函数实现继承详解
May 28 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python pip使用超时问题解决方案
2020/08/03 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
十八届三中全会宣传方案
2014/02/21 职场文书
求职意向书
2014/07/29 职场文书
初中优秀学生评语
2014/12/29 职场文书
关于颐和园的导游词
2015/01/30 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
python如何查找列表中元素的位置
2022/05/30 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android