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的Eval函数
Jul 26 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
js简单时间比较的方法
Aug 02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
js实现验证码干扰(动态)
Feb 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php 获取百度的热词数据的代码
2012/02/18 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python之web模板应用
2017/12/26 Python
详解django三种文件下载方式
2018/04/06 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
思想汇报格式
2014/01/05 职场文书
洗发水广告词
2014/03/13 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL