Vue基本指令 v-on

v-on是Vue指令中的事件指令，我们像DOM元素上绑定事件都是通过这个指令

<div v-on:click="func"></div>

v-on在编写时可以简写为@

<div @click="func"></div>

 Vue模板中，可以像函数中传递参数，没有参数时（如上）可以省略小括号，传递参数时直接在函数名后加小括号

<div @click="func(param1, param2)"></div>

事件对象参数

我们知道函数默认有一个事件对象参数，当没有传递参数时

<div @click="func"></div>

methods: {
  func(e) {
    console.log(e); // MouseEvent {isTrusted: true, screenX: 70, screenY: 114, clientX: 70, clientY: 11, …}
  },
},

添加一个形参，接收的就是事件对象

当有参数时，我们再打印事件对象

<div @click="func(param1, param2, $event)"></div>

methods: {
  func(param1, param2, $event) {
    console.log($event); // MouseEvent {isTrusted: true, screenX: 52, screenY: 114, clientX: 52, clientY: 11, …}
  },
},

需要再向函数中传入一个固定参数 $event，$event 必须是最后一个参数，否则也是接收不到的

事件修饰符

所有事件修饰符中的案例，共用此图

 .stop ===>>> 阻止事件冒泡

<div>
  <h3>第一层</h3>
  <div @click="func2">
    <h2>第二层</h2>
    <div @click="func"><h1>第三层</h1></div>
  </div>
</div>

像这样的嵌套的情况，我们在点击第三层时，会触发第二层和第三层 div 上绑定的事件函数，这种情况叫做事件冒泡，通过点击子级元素，父级元素事件函数通过事件冒泡被触发，此时点击第三层将触发 func、func2 两个事件函数。

<div>
  <h3>第一层</h3>
  <div @click="func2">
    <h2>第二层</h2>
    <div @click.stop="func"><h1>第三层</h1></div>
  </div>
</div>

使用 .stop 事件修饰符，当我们点击第三层时就会阻止事件冒泡，不会触发第二层事件函数

.capture ===>>> 使事件在捕获阶段触发

当事件函数被事件冒泡触发时，如果有 .capture 修饰符则该事件将以事件捕获的顺序执行

<div @click="func">
  <h3>第一层</h3>
  <div @click.capture="func2">
    <h2>第二层</h2>
    <div @click="func3"><h1>第三层</h1></div>
  </div>
</div>

methods: {
  func() {
    console.log("第一层");
  },
  func2() {
    console.log("第二层");
  },
  func3() {
    console.log("第三层");
  },
}

当我们点击第三层，此时打印结果为：

因为我们首先点击第三层，会产生事件冒泡，当事件冒泡到第二层事件函数(func2)时，因为 .capture 修饰符的关系，会从第二层开始时间捕获向下触发到最后一层的事件，之后继续事件冒泡

.prevent ===>>> 阻止默认事件的触发

这里我们以 a 标签举例，我们知道 a 标签 <a href=""></a> 在 href 为空串的情况下，点击页面会刷新，页面刷新是 a 标签的默认事件

<a href="" @click.prevent="aClick">点我</a>

当我们在 a 标签上使用了 .prevent 修饰符，在点击 a 标签时则不会触发默认事件 —— 页面刷新

.self ===>>> 使事件只能在绑定的 DOM 元素上触发，不能通过事件冒泡被触发

<div @click.capture="func">
  <h3>第一层</h3>
  <div @click.self="func2">
    <h2>第二层</h2>
    <div @click="func3"><h1>第三层</h1></div>
  </div>
</div>

此时点击第三层，会通过事件冒泡依次触发第二层和第一层的事件函数，如果第二层没有修饰符 .self 的限制的话，应该一次打印出“第一层”、“第三层”、“第二层”，而现在因为 .self 修饰符的影响，打印结果依次为“第一层”、“第三层”

.once ===>>> 拥有 .once 修饰符的事件为一次性事件

事件从渲染成功到执行一次后，便会销毁

按键修饰符

常用按键修饰符

.enter ===>>> 捕获“回车”键(Enter)

.tab ===>>> 捕获 Tab 键

.delete ===>>> 捕获“删除”(delete)和“退格”(Backspace)键

.esc ===>>> 捕获 Esc (escape) 键

.space ===>>> 捕获“空格”(space)键

.up ===>>> 捕获“上方向”键

.down ===>>> 捕获“下方向”键

.left ===>>> 捕获“左方向”键

.right ===>>> 捕获“右方向”键

系统按键修饰符

.ctrl ===>>> 捕获“控制”(control/ctrl)键

.alt ===>>> 捕获“改变”(alter/alt)键

.shift ===>>> 捕获“切换”(shift)键

.meta ===>>> 捕获 Win 键(window徽标键/开始键)，在 Mac 电脑为 command 键