【React】组件：全面解析现代前端开发的基石

在 Vue.js 中，修饰符（modifiers）是一种特殊的后缀，用于指令以特殊方式修改指令的行为。修饰符通过在指令名称后面添加点（.）及修饰符名称来表示。Vue 提供了一些常用的修饰符，帮助开发者处理事件、绑定、表单输入等。以下是一些常见的修饰符及其用法。

事件修饰符

.stop

阻止事件的传播。

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

.prevent

阻止默认事件的发生。

<form @submit.prevent="handleSubmit">提交</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>

键修饰符

用于监听键盘事件，可以指定特定键或键组合。

基本键修饰符

<input @keyup.enter="handleEnter">
<input @keyup.esc="handleEsc">

组合键修饰符

<input @keyup.ctrl.enter="handleCtrlEnter">
<input @keyup.shift="handleShift">

自动转换键名

Vue 会自动识别常见的键名，例如：enter、esc、tab 等。

鼠标按钮修饰符

用于监听鼠标事件，可以指定特定的鼠标按钮。

<button @mousedown.left="handleLeftClick">左键点击</button>
<button @mousedown.right="handleRightClick">右键点击</button>
<button @mousedown.middle="handleMiddleClick">中键点击</button>

表单修饰符

.lazy

在 v-model 指令中，lazy 修饰符用于在 change 事件后同步输入值，而不是在 input 事件后同步。

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

.number

在 v-model 指令中，将输入值自动转换为数字。

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

.trim

在 v-model 指令中，自动过滤输入的首尾空格。

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

自定义指令中的修饰符

在自定义指令中，可以通过 binding.modifiers 访问修饰符。

Vue.directive('focus', {
  inserted: function (el, binding) {
    if (binding.modifiers.lazy) {
      // 具有 .lazy 修饰符的特定行为
    } else {
      el.focus();
    }
  }
});

综合示例

以下是一个包含各种修饰符的综合示例：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model.lazy.trim="username" placeholder="用户名">
      <input v-model.number="age" placeholder="年龄" type="number">
      <button type="submit">提交</button>
    </form>
    <button @click.once="handleClick">点击一次</button>
    <input @keyup.enter="handleEnter" placeholder="按 Enter 键">
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      age: null
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交表单', this.username, this.age);
    },
    handleClick() {
      console.log('按钮被点击了一次');
    },
    handleEnter() {
      console.log('按下 Enter 键');
    }
  }
};
</script>

在这个示例中，我们使用了事件修饰符、键修饰符和表单修饰符，展示了 Vue.js 中修饰符的多种用法。