vue3修饰符用法

目录

一、事件修饰符

1、.stop（阻止事件冒泡）

 2、.prevent（阻止事件的默认行为）

3、.capture（使用事件捕获模式）

4、.self（只当事件在该元素本身（而不是子元素）触发时触发回调函数）

5、.once（只触发一次回调函数）

二、按键修饰符

1、.enter（按下回车键时触发）

2、.tab（按下tab键时触发）

 3、.delete（按下删除或退格键时触发）

4、.esc（按下ESC键时触发）

5、.space（按下空格键时触发）

6、.up（按下上箭头键时触发）/.down（按下下箭头键时触发）/.left（按下左箭头键时触发）/.right（按下右箭头键时触发）

三、表单输入修饰符

1、.lazy（用于将输入事件延迟到change事件之后触发）

2、.number（自动将输入值转为数字类型）

3、.trim（自动去除输入值两端的空白字符）

四、鼠标修饰符

1、.left（只在鼠标左键点击时触发）/.right（只在鼠标右键点击时触发）/.middle（只在鼠标中键点击时触发）

2、.passive（指定事件监听器为被动模式，可以提升滚动性能）

---

一、事件修饰符

1、.stop（阻止事件冒泡）

修饰符.stop是用于阻止事件冒泡的。当一个具有.stop修饰符的事件监听器被触发时，该事件将不再向上冒泡到父元素。这意味着如果一个父元素和子元素都有相同类型的事件监听器，并且点击了子元素，那么只会触发子元素的事件监听器，父元素的事件监听器将被忽略。

// 这里点击只会触发handleClick1
<script setup lang="ts">

const handleClick1 = () => {
  console.log('Button clicked1')
}

const handleClick2 = () => {
  console.log('Button clicked2')
}
</script>

<template>
  <div @click="handleClick2">
    <button @click.stop="handleClick1">Click me</button>
  </div>
</template>

 2、.prevent（阻止事件的默认行为）

修饰符.prevent用于事件处理函数中，阻止事件的默认行为。当事件触发时，浏览器会执行默认的操作，例如提交表单、打开链接等。而使用.prevent修饰符可以阻止这些默认的行为。

使用.prevent修饰符的方式是在事件处理函数的名称后面加上.prevent，例如：

<button @click.prevent="submitForm">提交表单</button>

在上述的代码中，当按钮被点击时，submitForm函数会被调用，同时会阻止表单的默认提交行为。

3、.capture（使用事件捕获模式）

修饰符.capture用于监听一个元素的捕获阶段事件。可以让一个元素的事件在捕获阶段触发

//会执行且优先执行handleClick2，即使子元素加了.stop修饰符，因为handleClick2在捕获阶段就执行了
<script setup lang="ts">
const handleClick1 = () => {
  console.log('Button clicked1')
}

const handleClick2 = () => {
  console.log('Button clicked2')
}
</script>

<template>
  <div @click.capture="handleClick2">
    <button @click.stop="handleClick1">Click me</button>
  </div>
</template>

 .capture修饰符在某些特定的场景下非常有用，可以帮助我们更好地控制事件的触发顺序和处理逻辑。

4、.self（只当事件在该元素本身（而不是子元素）触发时触发回调函数）

修饰符 .self用于限制事件只能在触发事件的元素本身上触发，而不是在子元素上触发。这意味着只有当事件直接在绑定事件的元素上触发时，才会执行事件处理函数。

例如，我们有一个父元素和一个子元素，父元素绑定了一个点击事件，子元素是父元素的一个子元素。使用 .self 修饰符可以确保点击子元素时不会触发父元素的点击事件，只有当点击父元素本身时才会触发。 

// 点击子元素<div>Click Me</div>并不会触发handleClick
<template>
  <div @click.self="handleClick">
    <div>Click Me</div>
  </div>
</template>

5、.once（只触发一次回调函数）

修饰符.once用于绑定一个只能触发一次的事件监听器。

<button @click.once="onClick">Click me</button>

 在上面的例子中，当按钮被点击时，onClick方法只会执行一次，之后再点击按钮将不再触发该方法。这就是.once修饰符的作用。

二、按键修饰符

1、.enter（按下回车键时触发）

修饰符.enter 用于在按下回车键时触发事件。

<script setup lang="ts">
import { ref } from 'vue'

let input1 = ref(null)
let input2 = ref(null)

const onEnter = (event: any) => {
  if (event.target === input1.value) {
    // 当按下 enter 键时，焦点从 input1 切换到 input2
    input2.value.focus()
  } else if (event.target === input2.value) {
    console.log(222, input1.value)

    // 当按下 enter 键时，焦点从 input2 切换到 input1
    input1.value.focus()
  }
}
</script>

<template>
  <input ref="input1" v-on:keydown.enter="onEnter" /><br />
  <input ref="input2" v-on:keydown.enter="onEnter" />
</template>

 上述代码中，v-on:keyup.enter 表示当用户在输入框中按下回车键时，会触发 onEnter方法。

2、.tab（按下tab键时触发）

修饰符 .tab 可以让 组件在用户按下 Tab键时触发相应的事件处理函数。这在处理键盘导航或者表单中的焦点切换时非常有用。

<input ref="input1" v-on:keydown.tab="onTab">

 3、.delete（按下删除或退格键时触发）

.delete修饰符监听删除或退格键的按下事件。

<div @keydown.delete="deleteItem">Delete an item</div>

 我们在<div>元素上使用了@keydown.delete事件监听器，它会在按下删除或退格键时触发deleteItem方法。在deleteItem方法中，你可以执行你想要的删除操作。

4、.esc（按下ESC键时触发）

.esc按键修饰符来监听Esc键的按下事件。

<input type="text" @keydown.esc="handleEscKey" />

 在上面的例子中，当用户在<input>输入框中按下Esc键时，会调用handleEscKey方法来处理按键事件。你可以在该方法中添加你想执行的逻辑。

5、.space（按下空格键时触发）

.space是一个按键修饰符，用于检测空格键的按下事件。可以用于监听按钮的按下事件，并在特定场景下执行相应的操作。

<button @keydown.space="handleSpace">按下空格键</button>

 在上面的示例中，当用户按下空格键时，handleSpace方法会被调用

6、.up（按下上箭头键时触发）/.down（按下下箭头键时触发）/.left（按下左箭头键时触发）/.right（按下右箭头键时触发）

<div @keydown.up="handleUpArrow"></div>
<div @keydown.down="handleDownArrow"></div>
<div @keydown.left="handleLeftArrow"></div>
<div @keydown.right="handleRightArrow"></div>

分别按下上下左右键触发

三、表单输入修饰符

1、.lazy（用于将输入事件延迟到change事件之后触发）

表单输入修饰符.lazy用于将输入事件延迟到change事件之后触发，而不是在每次输入时触发。这可以减少不必要的输入事件触发次数，提升性能。

<input v-model.lazy="message" />

 在上述示例中，v-model.lazy绑定了message数据，并且在每次输入时不会立即更新message的值，而是在change事件触发时更新。这意味着用户需要离开输入框或者按下回车键才会触发数据的更新。

2、.number（自动将输入值转为数字类型）

.number修饰符来将表单输入的值转换为数字类型。

<input v-model.number="myNumber" type="text">

 在上述示例中，通过v-model.number指令绑定一个数据属性myNumber来实现双向绑定。当用户在输入框中输入一个字符串时，Vue会自动将其转换为数字类型，并将结果保存在myNumber属性中。

3、.trim（自动去除输入值两端的空白字符）

.trim修饰符来去除表单输入框中的前导和尾随空格。这个修饰符可以与v-model指令一起使用，以确保用户输入的值不包含空格。 

<input v-model.trim="text" type="text" placeholder="请输入文本" />

现在，无论用户在输入框中输入的值是否包含空格，text的值都将自动去除前导和尾随空格。

请注意，.trim修饰符只能应用于v-model指令，它不适用于其他指令或绑定。

四、鼠标修饰符

1、.left（只在鼠标左键点击时触发）/.right（只在鼠标右键点击时触发）/.middle（只在鼠标中键点击时触发）

<button v-on:click.left="handleLeftClick">左键点击</button>
<button v-on:click.right="handleRightClick">右键点击</button>
<button v-on:click.middle="handleMiddleClick">中键点击</button>

2、.passive（指定事件监听器为被动模式，可以提升滚动性能）

鼠标修饰符中的passive修饰符用于改善页面的滚动性能。传统上，当一个滚动事件被触发时，浏览器将等待所有的事件处理程序完成后再执行滚动操作。但是，使用passive修饰符可以告诉浏览器，事件处理程序不会调用preventDefault()来阻止滚动行为，从而使得浏览器可以在滚动操作即将发生时立即进行滚动处理，提高滚动的流畅度和响应性能。

<div @scroll.passive="handleScroll">Scrollable content</div>

 在上述示例中，当div元素发生滚动事件时，会调用handleScroll方法。并且使用了passive修饰符，告诉浏览器该事件处理程序不会阻止滚动行为。