浅谈Vue.js中的v-on(事件处理)


Posted in Javascript onSeptember 05, 2017

Vue.js的事件处理

监听事件

我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="msg+=1"/>
</div>
var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
})

结果

浅谈Vue.js中的v-on(事件处理)

方法事件处理器

许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="jia"/>
</div>
var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  // 在 `methods` 对象中定义方法
  methods:{
    jia:function(event){
      console.log(event)
    }
  }
})

结果

MouseEvent {isTrusted: true, screenX: 18, screenY: 107, clientX: 18, clientY: 17, …}

内联处理器方法

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="jia('my day')"/>
</div>
var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  methods:{
    jia:function(x){
      console.log(x)
    }
  }
})

结果

my day

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上. 如果你还没有阅读关于组件的文档,现在大可不必担心。

键值修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符:

<div id="ar5">
  <input type="button" value="a" v-on:keydown="a">
</div>
var vm = new Vue({
  el:"#ar5",
  data:{
    msg:1
  },
  methods:{
    a:function(e){
      console.log(e.keyCode)
    }
  }
})

我们可以得到不同键的键值

结果

浅谈Vue.js中的v-on(事件处理)

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

当然,如果你需要其他的键,vue.js也为你提供了可以通过全局 config.keyCodes 对象自定义键值修饰符别名:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

修饰键

可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。

  • .ctrl
  • .alt
  • .shift
  • .meta

注意:在Mac系统键盘上,meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META” 或者 “Meta”。

例如:

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

修饰键比正常的按键不同;修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发事件。

鼠标按键修饰符

这些修饰符会限制处理程序监听特定的滑鼠按键

  • .left
  • .right
  • .middle

为什么在HTML中监听事件

你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

  • 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
  • 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
  • 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 #Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 #Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 #Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
纯js实现画一棵树的示例
Sep 05 #Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 #Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
You might like
php microtime获取浮点的时间戳
2010/02/21 PHP
php 获取全局变量的代码
2011/04/21 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python实现简单http服务器功能
2018/09/17 Python
python使用多进程的实例详解
2018/09/19 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
毕业生自我鉴定
2013/11/05 职场文书
情侣吵架检讨书
2014/02/05 职场文书
机关单位动员会主持词
2014/03/20 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
考察邀请函范文
2015/01/31 职场文书
教师年度个人总结
2015/02/11 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle