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 null,undefined,字符串小结
Aug 21 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
mysql 字段类型说明
2007/04/27 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
学习面向对象之面向对象的术语
2010/11/30 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
js中replace的用法总结
2013/12/27 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
加强作风建设工作总结
2014/10/23 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
小学少先队活动总结
2015/05/08 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
详解Laravel框架的依赖注入功能
2021/05/27 PHP