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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
vue v-on监听事件详解
May 17 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JS异步处理的进化史深入讲解
Aug 25 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
React组件refs的使用详解
2018/02/09 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现的彩票机选器实例
2015/06/17 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python与字符编码问题
2019/05/24 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
pandas DataFrame运算的实现
2020/06/14 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
怎么样写好简历中的自我评价
2013/10/25 职场文书
高一数学教学反思
2014/02/07 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
心理健康活动总结
2014/04/30 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
房屋出售授权委托书
2014/10/12 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android