vue常⽤的修饰符

最新推荐文章于 2025-03-30 16:03:45 发布

前端与小赵

最新推荐文章于 2025-03-30 16:03:45 发布

阅读量1k

点赞数 27

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Zhao_0912/article/details/144161559

版权

Vue.js 提供了多种修饰符来增强指令的功能，这些修饰符可以附加在某些指令上，以改变它们的行为或添加额外的功能。下面将详细介绍一些常用的Vue修饰符及其作用，并通过示例加深理解。

1. 事件修饰符

事件修饰符主要用于v-on指令，用来控制事件处理程序的行为。常见的事件修饰符包括：

.stop：阻止事件冒泡。
.prevent：阻止默认行为（如表单提交）。
.capture：使用捕获模式监听事件。
.self：只有当事件是从绑定元素本身触发时才触发回调。
.once：只触发一次事件处理器。
.passive：告诉浏览器这个事件监听器永远不会调用event.preventDefault()，这有助于提高滚动性能。

示例：

<!-- 阻止点击事件的传播 -->
<a v-on:click.stop="doThis">链接</a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit">...</form>

<!-- 使用捕获模式监听点击事件 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只有当点击发生在该元素自身时才会触发 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件只会触发一次 -->
<button v-on:click.once="doSomething">按钮</button>

2. 键盘事件修饰符

键盘事件修饰符用于v-on指令中，以响应特定键的按下。例如.enter、.tab、.delete等，以及.exact修饰符用于精确匹配组合键。

示例：

<input v-on:keyup.enter="submit" />

<!-- 当按下Ctrl + Enter时触发 -->
<textarea v-on:keyup.ctrl.enter="submit"></textarea>

<!-- 当按下Shift且没有其他按键时触发 -->
<input v-on:keyup.shift.exact="showMessage">

3. 系统修饰符

系统修饰符也用于v-on指令，允许你监听带有特定系统修饰键的鼠标或键盘事件。例如.ctrl、.alt、.shift和.meta（在Mac上为Command键，在Windows上为Windows键）。

示例：

<!-- Ctrl + Click -->
<button v-on:click.ctrl="doSomething">点击我</button>

<!-- Alt + Click -->
<button v-on:click.alt="doSomethingElse">点击我</button>

4. 鼠标按钮修饰符

鼠标按钮修饰符同样用于v-on指令，指定要监听哪种鼠标按钮的点击事件。例如.left、.right和.middle。

示例：

<!-- 右键点击 -->
<button v-on:click.right="doRightClick">右键点击这里</button>

<!-- 中键点击 -->
<button v-on:click.middle="doMiddleClick">中键点击这里</button>

5. 拖拽相关修饰符

对于拖拽相关的事件，Vue提供了.start、.end、.enter、.over、.leave等修饰符来更细粒度地控制拖放操作。

示例：

<div
  v-on:dragstart="handleDragStart"
  v-on:dragend="handleDragEnd"
  draggable="true"
>
  可拖动区域
</div>

<div
  v-on:dragenter="handleDragEnter"
  v-on:dragover="handleDragOver"
  v-on:dragleave="handleDragLeave"
  v-on:drop="handleDrop"
>
  放置目标
</div>

6. `.trim` 修饰符

.trim修饰符通常与v-model一起使用，自动去除输入字段值首尾的空白字符。

示例：

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

7. `.number` 修饰符

.number修饰符也与v-model一起使用，自动将用户的输入值转换为数值类型。

示例：

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

8. `.lazy` 修饰符

.lazy修饰符用于v-model，使得数据更新延迟到失去焦点或按下回车键时才发生，而不是每次输入后立即更新。

示例：

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

9. 自定义修饰符

除了上述内置的修饰符外，Vue还支持自定义修饰符。你可以通过全局方法Vue.directive('my-directive', { ... })创建自定义指令，并在其中定义自己的修饰符逻辑。

示例：

Vue.directive('focus', {
  inserted: function (el, binding) {
    if (binding.modifiers.lazy) {
      setTimeout(() => el.focus(), 1000);
    } else {
      el.focus();
    }
  }
});

// 使用
<input v-focus.lazy />

在这个例子中，我们创建了一个名为focus的自定义指令，它根据是否有.lazy修饰符决定是立即聚焦还是延迟一秒后再聚焦。

10. 其他修饰符

还有一些其他的修饰符可能不那么常见，但同样有用，比如：

.native：在组件上监听原生DOM事件。
.camel：将短横线分隔符转换成驼峰式命名。
.sync（Vue 2.x）/ v-model (Vue 3.x)：用于双向绑定props。

示例：

<custom-component @click.native="onClick" />

11. `.exact` 修饰符

.exact 修饰符用于精确匹配系统修饰键组合。当使用 .exact 时，只有当事件触发时的按键组合完全匹配指定的组合时，才会触发事件处理器。

示例：

<!-- 只有当按下Ctrl且没有其他任何修饰键时才触发 -->
<input v-on:keyup.ctrl.exact="onCtrlKey">

12. `.left`, `.right`, `.middle` 修饰符

这些修饰符用于鼠标事件，如 click、mousedown 和 mouseup，以区分不同的鼠标按钮。

示例：

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

13. `.passive` 修饰符

.passive 修饰符主要用于触摸或滚动事件，告诉浏览器这个事件监听器永远不会调用 event.preventDefault()。这有助于提高移动设备上的性能，因为浏览器可以更快地处理滚动操作。

示例：

<div v-on:touchstart.passive="handleTouchStart"></div>

14. `.native` 修饰符

.native 修饰符用于组件上，允许你监听组件根元素的原生事件，而不是组件自定义的事件。

示例：

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

15. `.camel` 修饰符

.camel 修饰符用于将短横线分隔符（kebab-case）转换为驼峰式命名（camelCase）。这在处理属性名时特别有用，尤其是当你需要与某些库或API交互时。

示例：

<my-component :data-attr.camel="someValue"></my-component>

16. `.lazy` 修饰符（用于`v-model`）

虽然已经提到过，但值得再次强调。.lazy 修饰符用于 v-model，使得数据更新延迟到失去焦点时才发生，而不是每次输入后立即更新。

示例：

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

17. `.number` 修饰符（用于`v-model`）

.number 修饰符也用于 v-model，自动将用户的输入值转换为数值类型。

示例：

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

18. `.trim` 修饰符（用于`v-model`）

.trim 修饰符通常与 v-model 一起使用，自动去除输入字段值首尾的空白字符。

示例：

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

19. `.prevent` 修饰符

.prevent 修饰符用于阻止默认行为，例如表单提交或链接跳转。

示例：

<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.prevent="doSomething">链接</a>

20. `.capture` 修饰符

.capture 修饰符用于捕获模式下的事件监听。这意味着事件会在冒泡阶段之前被处理。

示例：

<div v-on:click.capture="doThis">...</div>

21. `.self` 修饰符

.self 修饰符确保事件只在绑定元素本身上触发时才执行回调函数，而不是从子元素冒泡上来的事件。

示例：

<div v-on:click.self="doThat">...</div>

22. `.once` 修饰符

.once 修饰符确保事件处理器只触发一次，然后就不再响应后续的相同事件。

示例：

<button v-on:click.once="doSomething">按钮</button>

23. 自定义修饰符

你可以创建自定义指令并在其中定义自己的修饰符逻辑。这对于扩展Vue的功能非常有用。

示例：

Vue.directive('focus', {
  inserted: function (el, binding) {
    if (binding.modifiers.lazy) {
      setTimeout(() => el.focus(), 1000);
    } else {
      el.focus();
    }
  }
});

// 使用
<input v-focus.lazy />

在这个例子中，我们创建了一个名为 focus 的自定义指令，它根据是否有 .lazy 修饰符决定是立即聚焦还是延迟一秒后再聚焦。

24. `.sync` 修饰符（Vue 2.x）

在 Vue 2.x 中，.sync 修饰符用于双向绑定 props。在 Vue 3.x 中，推荐使用 v-model 来替代 .sync。

示例：

<custom-input :value.sync="searchText" />

25. `.debounce` 和 `.throttle` 修饰符

虽然 Vue 没有内置这些修饰符，但你可以通过自定义指令来实现防抖（debounce）和节流（throttle）功能，以控制事件处理器的调用频率。

示例：

Vue.directive('debounce', {
  bind(el, binding) {
    const callback = binding.value;
    const delay = binding.arg || 300; // 默认300ms
    let timeout;

    el.addEventListener('input', function(e) {
      clearTimeout(timeout);
      timeout = setTimeout(callback, delay, e);
    });
  }
});

// 使用
<input v-debounce:500="onInputChange" />

以上就是关于 Vue.js 中更多修饰符的详细介绍。每个修饰符都有其特定的应用场景，合理利用这些修饰符可以使你的代码更加简洁、高效，并且能够更好地满足各种复杂的交互需求。记住，虽然这里列举了一些常见的修饰符，但 Vue 框架非常灵活，你可以根据项目需要进一步探索和定制更多的功能。