Vue 之 修饰符汇总

一、简介

在Vue中，修饰符是一种特殊的语法，用于修改指令或事件绑定的行为，它们以点号（.）的形式添加到指令或事件的后面，并可以改变其默认行为或添加额外的功能，如：禁止事件冒泡、数据双向绑定等，当然修饰符的功能也可以通过js在事件函数中自行实现，但是我们更希望在函数中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

​ 因此Vue为我们提供了很多修饰符，相当于将一些常用DOM事件逻辑进行了封装，根据功能类别，共分为以下几类：① 事件修饰符。② 按键修饰符。③ 系统修饰符。 ④ 鼠标修饰符。 ⑤ 表单修饰符。⑥ 其他修饰符。

​ 多个修饰符可以在同一事件上同时串联使用，多方位的限制事件的触发范围。

​ 注意：下面的案例代码，全都是在Chrome浏览器中进行的实验。

二、事件修饰符

1、.stop

​ 该修饰符用于实现阻止事件冒泡，其作用等同于event.stopPropagation()。

案例代码：

<div style="width: 200px; height: 200px; background: #ccc" @click="fatherClick()">
   <div style="width: 100px; height: 100px; background: red" @click.stop="sonClick()">
      stop修饰符测试
   </div>
</div>

<script>
 fatherClick() {
     
     
    console.log("父元素的点击事件被冒泡触发了");
 },
 sonClick() {
     
     
    console.log("带有stop修饰符的子元素被点击了");
 },
</script>

执行结果：

​ 点击子元素，子元素的事件正常触发执行，但父元素事件没有被触发。

2、.prevent

​ 该修饰符用于实现阻止事件的默认行为，其作用等同于event.preventDefault()。

案例代码：

<a href="https://www.baidu.com" target="_blank" @click.prevent="preventClick()">测试prevent修饰符</a>

<script>
	preventClick() {
     
     
    console.log("阻止了默认事件行为，但事件绑定函数正常执行");
  },
</script>

执行结果：

​ 点击该元素后，页面并未发生跳转，但是click事件正常触发和执行。

3、.capture

​ 该修饰符用于实现修改事件的传播过程为捕获模式（正常为冒泡模式），其作用等同于在使用addEventListener('事件名','事件函数',{ capture: true })注册事件时将第三个参数中的capture设置为true。

​ **冒泡模式： **事件从触发事件的元素开始向上传播，逐级向上层父元素传递，直到达到根元素（通常是 window 对象）。这意味着父元素的事件处理程序会在子元素的事件处理程序之后被调用。

​ 捕获模式： 事件从根元素开始向下传播，逐级向下层子元素传递，直到达到触发事件的元素。这意味着父元素的事件处理程序会在子元素的事件处理程序之前被调用。

案例代码：

<div style="width: 200px; height: 200px; background: #ccc" @click.capture="fatherClick()">
   <div style="width: 100px; height: 100px; background: red" @click="sonClick()">
      capture修饰符测试
   </div>
</div>

<script>
 fatherClick() {
     
     
    console.log("父元素的点击事件被触发了");
 },
 sonClick() {
     
     
    console.log("子元素的点击事件被触发了");
 },
</script>

执行结果：

​ 点击子元素后，先触发父元素的点击事件，然后再触发子元素的点击事件。

4、.self

​ 该修饰符用于实现，只有当触发事件的元素与当前事件绑定的元素是同一个元素时（即event.target 与event.currentTarget指向同一个元素），事件绑定函数才会被执行。主要可用来过滤因为事件冒泡而触发的事件。

​ event.currentTarget 的值只能在事件处理过程中被使用。如果尝试用 console.log()在控制台打印 event 对象，你会发现 currentTarget 的值是 null，如果想在控制台打印 currentTarget ，应该直接使用 console.log(event.currentTarget)。

案例代码：

<div style="width: 200px; height: 200px; background: #ccc" @click.self=