Vue.js 第二天: 事件处理
监听事件
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
示例:
<div id="example-1"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p>
</div>
复制代码
var example1 = new Vue({el: '#example-1',data: {counter: 0}
})
复制代码
事件处理方法
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
还可以接收一个需要调用的方法名称。
示例:
<div id="example-2"><!-- `greet` 是在下面定义的方法名 --><button v-on:click="greet">Greet</button>
</div>
复制代码
var example2 = new Vue({el: '#example-2',data: {name: 'Vue.js'},// 在 `methods` 对象中定义方法methods: {greet: function (event) {// `this` 在方法里指向当前 Vue 实例alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件if (event) {alert(event.target.tagName)}}}
})// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
复制代码
内联处理器中的方法
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:
<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button>
</div>
复制代码
new Vue({el: '#example-3',methods: {say: function (message) {alert(message)}}
})
复制代码
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
把它传入方法:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit
</button>
复制代码
// ...
methods: {warn: function (message, event) {// 现在我们可以访问原生事件对象if (event) event.preventDefault()alert(message)}
}
复制代码
事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 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><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
复制代码
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用
@click.prevent.self
会阻止所有的点击,而@click.self.prevent
只会阻止对元素自身的点击。
2.1.4
新增
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
复制代码
不像其它只能对原生的 DOM 事件起作用的修饰符,.once
修饰符还能被用到自定义的组件事件
上。如果你还没有阅读关于组件的文档,现在大可不必担心。
2.3.0
新增
Vue 还对应 addEventListener
中的 passive
选项提供了 .passive
修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
复制代码
这个 .passive
修饰符尤其能够提升移动端的性能。
不要把
.passive
和.prevent
一起使用,因为.prevent
将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive
会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
复制代码
记住所有的 keyCode
比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit"><!-- 缩写语法 -->
<input @keyup.enter="submit">
复制代码
全部的按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes
对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
复制代码
自动匹配按键修饰符
2.5.0
新增
你也可直接将 KeyboardEvent.key
暴露的任意有效按键名转换为 kebab-case
来作为修饰符:
<input @keyup.page-down="onPageDown">
复制代码
在上面的例子中,处理函数仅在 $event.key === 'PageDown'
时被调用。
有一些按键 (
.esc
以及所有的方向键) 在 IE9 中有不同的key
值, 如果你想支持 IE9,它们的内置别名应该是首选。
系统修饰键
2.1.0
新增
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 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
事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住ctrl
的情况下释放其它按键,才能触发keyup.ctrl
。而单单释放ctrl
也不会触发事件。
.exact
修饰符
2.5.0
新增
.exact
修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
复制代码
鼠标按钮修饰符
2.1.0
新增
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on
有几个好处:
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
- 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
Vue.js 第二天: 事件处理相关推荐
- Vue.js 第二天: 列表渲染
用v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 it ...
- Vue.js提炼与升华
Vue.js 第一部分 Vue.js 介绍 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vu ...
- JavaWeb『Vue.js』快速入门
Vue快速入门 第一节 准备Vue.js环境 1.开发中的最佳实践 2.Vue框架的js文件获取 3.本地创建vue.js文件 4.创建HTML文档并引入vue.js 第二节 Vue.js基本语法:声 ...
- [译] 使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP(第二部分)
原文地址:Create your first Ethereum dAPP with Web3 and Vue.JS (Part 2) 原文作者:Alt Street 译文出自:掘金翻译计划 本文永久链 ...
- Vue.js 事件处理
监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"><butto ...
- Vue.js:vue指令(给标签属性赋Vue变量v-bind,绑定事件 v-on)vue事件处理函数中, 拿到事件对象,6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
- 第二节:简易安装 和 快速入门Vue.js
上一节我们介绍了Vue.js框架,这一节,我们可以来试着动手写点小代码了. 1 简易安装 要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高 ...
- Deno 冲上榜首,Vue.js 首次屈居第二,JavaScript 2020 年度“新起之秀”都有谁?
整理 | 郑丽媛 出品 | CSDN(ID:CSDNnews) 近些年来,科技领域飞速发展,人工智能.云计算.大数据.物联网等新兴技术日益蓬勃,各类前沿技术逐渐落地,服务于每个人的日常点滴.这些技术究 ...
- 一份不错的vue.js基础笔记!!!!
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
最新文章
- 如果有电脑——计算机达人成长之路(36)
- 超级干货:一文看懂5G产业链及投资机会
- 手把手教你学Vue-3(路由)
- 适用于System Center 2016所需前期准备工作
- Linux 编译内核
- sql 对groupby 后的数据limit_SQL(三)——汇总分析
- Mysql报错:2006 - MySQL server has gone away
- 将dll制作成控件_案例丨首例将影视作品制作成网络图片集被判侵权案 二审维持原判...
- PL/SQL Developer将Excel表格数据导入表格
- linux tcp文件分包_在Linux下基于TCP协议的文件传输程序.
- U盘无法格式化,变成8M,RAW格式,0字节的U盘修复教程
- 计算机上显示找不到无线网络连接,笔记本没有无线网络连接怎么办 解决方法介绍【图解】...
- 如何做好Clickhouse集群的监控覆盖?
- Citus 分布式 PostgreSQL 集群 - SQL Reference(创建和修改分布式表 DDL)
- 服务器.bat文件启动闪退,直接双击启动tomcat中的startup.bat闪退原因及解决方法
- cmd怎么查看当前静态路由_win7系统利用命令查看ip路由表完整信息的操作方法
- elastic-job入门实例
- 互联网之父Vint Cerf:互联网的下一个十年
- 简单查询多个宅急送物流详情,并分析派件延误
- 【BZOJ4627】[BeiJing2016]回转寿司 SBT
热门文章
- 如何将一个java程序变成exe_如何将一个java程序转换为.exe文件?
- 关于php正则表达式得选择题,经典PHP笔试题
- 字符变量赋值规则_第四章 变量
- php安装sg11扩展,Centos下安装SG11加密扩展插件
- xml生成java代码_在Eclipse中从XML生成Java代码
- 20200506:最低票价(leetcode983)
- abaqus python二次开发攻略_Python 进行 Abaqus 二次开发的基础知识
- python的三种数据类型列举_3.Python编程之数据类型
- editplus查找文件中的字符串
- LINUX:解压问题tar: Child returned status 1