修饰符（Modifiers）

Vue 修饰符是用来修饰事件处理函数或指令的行为的特殊后缀。它们可以用来改变事件的触发方式、指令的执行方式等等。

.lazy

改变输入框的值时value不会改变，当光标离开输入框时，v-model绑定的值value才会改变

lazyValue

html

<input v-model.lazy="lazyValue" /> <span>{{ lazyValue }}</span>

javascript

import { ref } from "vue";
const lazyValue = ref("lazyValue");

.trim

类似于JavaScript中的trim()方法，作用是把v-model绑定的值的首尾空格给过滤掉。

trim Value

html

<input v-model.trim="trimValue" /> <span>{{ trimValue }}</span>

javascript

import { ref } from "vue";
const trimValue = ref("trimValue");

.number

将绑定的值转成数字，但是先输入字符串和先输入数字，是两种情况

先输入数字的话，只取前面数字部分
先输入字母的话，.number修饰符无效

html

<input v-model.number="numberValue" placeholder="请输入内容进行测试" />
<span>{{ numberValue }}</span>

javascript

const numberValue = ref("");

.stop

作用是阻止冒泡

代码展示点击展开

vue

<template>
  <div class="modifiersStop">
    <div @click="consoleTop">
      <el-button @click="consoleLog">未使用stop修饰符</el-button>
    </div>
    <div @click="consoleTop">
      <el-button @click.stop="consoleLog">使用stop修饰符</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const consoleLog = () => {
  ElNotification({
    type: "success",
    message: "内部事件触发",
    offset: 40,
    duration: 2000,
  });
}

const consoleTop = () => {
  ElNotification({
    type: "success",
    message: "外部事件触发",
    offset: 40,
    duration: 2000,
  });
}
</script>

<style lang="scss" scoped>
.modifiersStop {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

.capture

事件默认是由里往外冒泡，capture修饰符的作用是反过来，由外网内捕获

请注意两个弹窗出来的顺序

代码展示点击展开

vue

<template>
  <div class="modifiersCapture">
    <div @click="consoleTop">
      <el-button @click="consoleLog">未使用capture修饰符</el-button>
    </div>
    <div @click.capture="consoleTop">
      <el-button @click="consoleLog">使用capture修饰符</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const consoleLog = () => {
  ElNotification({
    type: "success",
    message: "内部事件触发",
    offset: 40,
    duration: 2000,
  });
}

const consoleTop = () => {
  ElNotification({
    type: "success",
    message: "外部事件触发",
    offset: 40,
    duration: 2000,
  });
}
</script>

<style lang="scss" scoped>
.modifiersCapture {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

.self

作用是，只有点击事件绑定的本身才会触发事件

代码展示点击展开

vue

<template>
  <div class="modifiersSelf">
    <div @click="consoleTop">
      <el-button @click="consoleLog">未使用self修饰符</el-button>
    </div>
    <div class="self" @click.self="consoleTop">
      <el-button type="primary" @click="consoleLog">使用self修饰符</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const consoleLog = () => {
  ElNotification({
    type: "success",
    message: "内部事件触发",
    offset: 40,
    duration: 2000,
  });
}

const consoleTop = () => {
  ElNotification({
    type: "success",
    message: "外部事件触发",
    offset: 40,
    duration: 2000,
  });
}
</script>

<style lang="scss" scoped>
.modifiersSelf {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.self {
  padding: 0 25px;
  cursor: pointer;
  background-color: var(--jk-color-purple);
}
</style>

.once

事件只执行一次

第一次点击执型外部出发，第二次就只触发一次了

代码展示点击展开

vue

<template>
  <div class="modifiersOnce">
    <div @click.once="consoleTop">
      <el-button @click="consoleLog">使用once修饰符</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const consoleLog = () => {
  ElNotification({
    type: "success",
    message: "内部事件触发",
    offset: 40,
    duration: 2000,
  });
}

const consoleTop = () => {
  ElNotification({
    type: "success",
    message: "外部事件触发",
    offset: 40,
    duration: 2000,
  });
}
</script>

<style lang="scss" scoped>
.modifiersOnce {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

.prevent

是阻止默认事件

阻止了 a 元素跳转

使用prevent修饰符

代码展示点击展开

vue

<template>
  <div class="modifiersPrevent">
    <a href="https://www.yanjinke.com" @click.prevent="consoleLog">使用prevent修饰符</a>
  </div>
</template>

<script setup lang="ts">
const consoleLog = () => {
  ElNotification({
    type: "success",
    message: "阻止了a元素跳转",
    offset: 40,
    duration: 2000,
  });
}
</script>

<style lang="scss" scoped>
.modifiersPrevent {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

.native

用在自定义组件的事件上，保证事件能执行，可以穿透到根元素上

html

<!-- 执行不了 -->
<My-component @click="alert("hello")"></My-component>

<!-- 可以执行 -->
<My-component @click.native="alert("hello")"></My-component>

.left,.right,.middle

是鼠标的左中右按键触发的事件

测试鼠标三个按键位置

html

<div
  @click.left="consoleLog('left')"
  @click.middle="consoleLog('middle')"
  @click.right="consoleLog('right')"
  oncontextmenu="return false"
>
  测试鼠标三个按键位置
</div>

.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在 pc 端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

html

<div @scroll.passive="onScroll">...</div>

.camel

当在 DOM 内模板使用 .camel 修饰符，可以驼峰化 v-bind attribute 的名称，例如 SVG viewBox attribute：

html

<!-- 不加camel viewBox会被识别成小写的viewbox -->
<svg :view-box.camel="viewBox"></svg>

.sync

当父组件传值进子组件，子组件想要改变这个值时，可以通过这个简化代码

html

<!-- 父组件里 -->
<children :foo="bar" @update:foo="val => bar = val"></children>

javascript

// 子组件里
this.$emit("update:foo", newValue);

可以简写成

html

<!-- 父组件里 -->
<children :foo.sync="bar"></children>

javascript

// 子组件里
this.$emit("update:foo", newValue);

.keyCode

监听键盘事件

html

<input
  @keyup="consoleLog($event.target.value)"
  placeholder="按所有按键都可触发"
/>

<input
  @keyup.enter="consoleLog($event.target.value)"
  placeholder="按enter按键触发"
/>

<input
  @mousedown.ctrl.="consoleLog($event.target.value)"
  placeholder="按ctrl再鼠标点击触发"
/>

<input
  @keyup.alt.enter="consoleLog($event.target.value)"
  placeholder="按alt + enter触发"
/>

修饰符（Modifiers） ​

.lazy ​

.trim ​

.number ​

.stop ​

.capture ​

.self ​

.once ​

.prevent ​

.native ​

.left,.right,.middle ​

.passive ​

.camel ​

.sync ​

.keyCode ​

修饰符（Modifiers）

.lazy

.trim

.number

.stop

.capture

.self

.once

.prevent

.native

.left,.right,.middle

.passive

.camel

.sync

.keyCode