vue3修饰符大全

修饰符

在vue.js中，修饰符是一种特殊的语法，处理了许多DOM事件中的细节，使其无需花费大量时间处理这些问题，且使代码更加简洁和易读。常见的修饰符有五类：

• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符

1、表单修饰符
表单修饰符是用于处理表单输入的一种特殊语法。它们允许你在模板中直接修改表单元素的值或行为，而无需在组件的逻辑代码中手动处理。Vue 3 中的表单修饰符主要用于 v-model 指令，以便在用户输入时提供额外的控制或转换。

• .lazy：将input框中的v-model转变为懒加载。默认情况下，v-model 在每次输入事件触发时都会更新数据。使用 .lazy 修饰符后，数据只会在 change 事件触发时更新。

<input type="text" v-model="value"> //实时更新value值
<input type="text" v-model.lazy="value">  //失去焦点后更新value值
<span>{{ value }}</span>

• .number：自动将用户的输入值转换为 Number 类型。

<input v-model.number="value"> //输入32.5gbs111 ——> 结果32.5
<span>{{ value }}</span>

• .trim：自动去除用户输入值首尾的空白字符。

<input v-model.trim="value"> //输入 trim  ——> 结果trim

使用表单修饰符时，你可以将它们单独使用，也可以组合使用。例如，你可以同时使用 .lazy 和 .number 修饰符：

//value 只有在用户停止输入（即 change 事件触发时）才会更新，并且它会被自动转换为 Number 类型。
<input v-model.lazy.number="value" type="number">

注意：表单修饰符只影响 v-model 的行为，它们不会改变实际的 DOM 事件监听。例如，使用 .trim 修饰符并不会阻止 input 事件触发，它只是改变了赋值给 v-model 绑定的数据的方式。
此外，Vue 3 还提供了一个 .sync 修饰符，但它实际上不是一个真正的修饰符，而是一个用于双向绑定父子组件间 props 的语法糖。使用 .sync 可以简化父子组件之间的数据同步，但会增加组件之间的耦合性，不推荐使用。

2、事件修饰符
事件修饰符（Event Modifiers）是 Vue.js 框架中用于调整 DOM 事件行为的一种特殊语法，可直接在监听DOM事件器上添加一些额外的行为，无需编写额外代码。
常用的事件修饰符有 .stop、.prevent、.capture、.self、.once 和 .passive。

• .stop：阻止事件冒泡。
  这相当于调用 event.stopPropagation()，当事件触发时，它不会向上级 DOM 元素传递。

<div @click="shout(2)">
    <button @click.stop="shout(1)">ok</button>  //stop阻止事件向上级DOM元素传递
</div>
<script>
function shout(val){
	console.log(val)   //输出 1
}
</script>

• .prevent：阻止事件的默认行为。
  这相当于调用 event.preventDefault()，如它可以阻止表单的自动提交或阻止超链接的默认跳转行为。

//阻止超链接跳转
<a href="https://c.biancheng.net/sitemap/" @click.prevent="handleLinkClick">网站地图</a>
<script>
//此处根据业务需求编写代码逻辑
function handleLinkClick(){
	console.log("点击超链接，不默认跳转了。")
}
</script>

• .capture：使用事件捕获模式。
  这意味着当事件发生时，使用了 .capture 修饰符的 DOM 元素将首先接收和处理事件，然后再按正常的事件流顺序触发其他元素的事件。

<div @click.capture="shout(2)">
    obj2
    <div @click="shout(3)">
        obj3
        <div @click="shout(4)">
            obj4
        </div>
    </div>
</div>
<script>
//点击"obj4"，因使用.capture修饰符将优先处理事件，故先输出2，其后按执行顺利输出
function shout(val){
	console.log(val) //输出结果2 4 3
}
</script>

• .self：仅当 event.target 是元素本身时才会触发事件处理器。
  这可以防止事件冒泡导致父元素的事件处理函数被意外触发。

//点击"obj3"时触发shout(3)，但不触发shout(2)事件。
//点击"obj2"时才会触发shout(2)事件
<div @click.self="shout(2)"> //.self修饰符使点击事件在元素本身obj2时才触发
    obj2
    <div @click="shout(3)">
        obj3
    </div>
</div>

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。如下情况：
（1）@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为；
（2）@click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

• .once：事件将只会触发一次。
  这对于按钮点击等只需要执行一次操作的场景很有用。

//点击一次后，不会再触发事件
<div @click.once="shout(2)">
    obj2
</div>

• .passive：监听移动端元素滚动事件，相当于在onscroll事件上加.lazy修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div :scroll.passive="onScroll"></div>

3、鼠标按键修饰符
允许仅当特定鼠标按钮被点击时才触发事件处理函数，提供了以下三种鼠标修饰符：

• .left：仅当鼠标左键被点击时触发。
• .right：仅当鼠标右键被点击时触发。
• .middle：仅当鼠标中键（滚轮按钮）被点击时触发。

这些修饰符可以附加到任何鼠标事件监听器上，例如 click、dblclick、mousedown、mouseup 等。

<template>  
  <div>  
    <button @click.left="handleLeftClick">左键点击</button>  
    <button @click.right="handleRightClick">右键点击</button>  
    <button @click.middle="handleMiddleClick">中键点击</button>  
  </div>  
</template>  
<script>  
export default {  
  methods: {  
    handleLeftClick() {  
      console.log('鼠标左键被点击了');  
    },  
    handleRightClick() {  
      console.log('鼠标右键被点击了');  
    },  
    handleMiddleClick() {  
      console.log('鼠标中键被点击了');  
    }  
  }  
};  
</script>

注意：不是所有的鼠标事件都支持所有的鼠标按钮修饰符。通常，click 和 dblclick 事件只响应左键点击，而 mousedown 和 mouseup 事件则可以响应所有鼠标按钮的点击。因此，在需要响应特定鼠标按钮的点击时，你可能需要使用 mousedown 或 mouseup 事件而不是 click 事件。

4、键值修饰符
在监听键盘事件时允许仅当按下特定的键时才触发事件处理函数，Vue 提供了一些常用的键值修饰符，例如.enter、.esc、.ctrl、.shift、.command、.space等。

<el-input type="text" v-model="text" @keyup.enter="handleEnter" placeholder="按下enter键" />
<el-input type="text" v-model="text" @keydown.esc="handleEsc" placeholder="按下esc键" />