vue中的 事件绑定 事件修饰符 (学习笔记)

这里对官网的事件部分做一些笔记 用于加深记忆

• 目录
  -1. vue中的事件
  -2. 通用的事件修饰符
  -3. 事件修饰符中的 按键修饰符
  -4. 鼠标按钮修饰符

1

在vue中使用 v-on来绑定事件监听处理函数 可以将 v-on简写为@

 <div v-on:click="handler0(.....,$event), handler1"></div>
 ↓ (以上写法等价于)
  <div @:click="handler(.....,$event), handler1"></div>

事件的处理函数 一般都存放在methods选项中
$event是该事件的事件对象 需要使用时必须将 $event作为处理函数的最后一个参数
一个事件可以使用多个处理函数用 ‘,’ 来分割
如果一个事件不需要传递参数则可以不写参数列表"()"

2

事件修饰符
vue为了减少对事件细节的操作而定义了一些事件修饰符
修饰符是由点开头的指令后缀来表示的。

例子: @click.stop=“handler”

通用的事件修饰符:
.stop 阻止向上冒泡
.prevent 阻止默认事件
.capture 阻止事件捕获
.self 当前事件只会在当前元素触发时执行 (不受捕获和冒泡的影响)
.once 当前事件只触发一次
.passive 当前事件默认行为会在执行处理函数前 立即触发 这就导致 event.preventDefault()无效

.parssive 的例子 这里引用官方文档
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 onScroll 完成 -->
<!-- 这其中包含 event.preventDefault() 的情况 -->
<div @scroll.passive=“onScroll”>…
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

一个事件可以拥有多个事件修饰符

例子: @click.stop.prevent.capture.self=“handler”

3

对于键盘事件vue提供了一些修饰符 这被称为 按键修饰符
Vue 为最常用的键提供了别名它们对应键盘上的指定按键：
.enter
.tab
.delete “删除”和“退格”键都会触发
.esc
.space
.up
.down
.left
.right
按键修饰符 中的 系统修饰符
.ctrl
.alt
.shift
.meta

meta 介绍
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

请注意修饰键与常规按键不同，在和 键盘事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

按键修饰符中的精确修饰符
.exact
它是与系统修饰符配合使用的
若是加上了精确修饰符那么只会在指定条件下触发

例子:
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl=“onClick”>A
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact=“onCtrlClick”>A
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact=“onClick”>A

4

鼠标按钮修饰符
.left 左键
.right 右键
.middle 中键