vue中常用的修饰符

vue中常用的修饰符

1. 事件修饰符

用于增强事件处理器的功能，前面已经详细介绍过，以下列举常用的：

• .stop：阻止事件冒泡

  <button @click.stop="handleClick">点击我</button>
  

  .prevent：阻止默认行为

  <form @submit.prevent="submitForm">提交</form>
  

  .capture：使用捕获模式

  <div @click.capture="handleClick">点击捕获</div>
  

  .self：仅在元素本身触发事件

  <div @click.self="handleClick">点击我</div>
  

  .once：事件只触发一次

  <button @click.once="handleClick">只点击一次</button>
  

  .passive：提升性能，不阻止默认行为

  <div @scroll.passive="handleScroll">滚动</div>
  

2. 按键修饰符

用于处理键盘事件，方便对常见按键进行监听。

• .enter
  

  ：监听 Enter 键。

  <input @keyup.enter="submit">
  

• .tab：监听 Tab 键。

• .delete：监听 Delete 和 Backspace 键。

• .esc：监听 Esc 键。

• .space：监听 Space 键。

• .up：监听向上箭头键。

• .down：监听向下箭头键。

• .left：监听向左箭头键。

• .right：监听向右箭头键。

你也可以直接监听键的键码，例如：

<input @keyup.13="submit"> <!-- 13是Enter键的键码 -->

3. 系统修饰符

用于监听特殊按键（如 Ctrl、Shift、Alt、Meta）和它们的组合。

• .ctrl：Ctrl 键。

• .alt：Alt 键。

• .shift：Shift 键。

• .meta
  

  ：Meta 键（在 Mac 上是 Command 键，在 Windows 上是 Windows 键）。

  <button @click.ctrl="handleCtrlClick">Ctrl + Click</button>
  

4. v-model 修饰符

v-model 修饰符用于处理表单输入绑定的方式。

• .lazy：改变绑定的触发时机，只有在失去焦点或按下 Enter 键时更新数据，而不是每次输入时更新。

  <input v-model.lazy="name">
  

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

  <input v-model.number="age">
  

• .trim：自动去除用户输入的首尾空格。

  <input v-model.trim="username">
  

5. v-bind 修饰符

v-bind 用于动态绑定属性，修饰符用于增强绑定行为。

• .prop：强制将绑定的值作为 DOM 属性，而不是作为 HTML 属性。

  <input v-bind.prop="value">
  

• .camel：将绑定的属性名转换为驼峰命名法，用于非标准 HTML 属性。

  <svg :view-box.camel="viewBox"></svg>
  

6. v-on 修饰符

用于事件绑定，修饰符如 .native 可监听组件的原生 DOM 事件。

• .native
  

  ：监听组件根元素的原生事件，而非自定义事件。

  <my-component @click.native="handleClick"></my-component>
  

7. v-for 修饰符

在使用 v-for 进行循环时，可以通过 key 来优化渲染，Vue 还支持对 v-for 使用的对象进行一些额外的修饰。

• .index
  

  ：当迭代对象时，指定对象索引。

  <div v-for="(item, index) in items" :key="index">{{ item }}</div>