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取滚动条的尺寸的函数代码
Nov 30 Javascript
关于延迟加载JavaScript
May 05 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
js实现继承的5种方式
Dec 01 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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
Home Coffee Roasting
2021/03/03 咖啡文化
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
分享10段PHP常用代码
2015/11/11 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
环境工程毕业生自荐信
2013/11/17 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
展会邀请函范文
2014/01/26 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
青年文明号申报材料
2014/12/23 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
如何写好闭幕词
2019/04/02 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书