Vue.js修饰符

Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。在Vue.js中，修饰符（Modifiers）是一种增强指令行为的工具，它们可以改变指令的默认行为。本文将详细讲解Vue.js中的修饰符，并提供实际示例，帮助你更好地理解和使用这些修饰符。

事件修饰符

事件修饰符主要用于控制事件的传播和默认行为。

.stop

阻止事件冒泡。当事件在子元素上触发时，使用 .stop 修饰符可以阻止事件继续冒泡到父元素。

<template><div @click="handleParentClick"><button @click.stop="handleButtonClick">Click me</button></div>
</template>

.prevent

阻止事件的默认行为。例如，阻止表单提交时的页面刷新。

<template><form @submit.prevent="handleSubmit"><button type="submit">Submit</button></form>
</template>

.self

仅当事件在该元素本身触发时才触发回调，而不是在子元素上。

<template><div @click.self="handleDivClick"><div @click="handleInnerDivClick">Inner div</div></div>
</template>

.once

事件只触发一次。适用于那些只需要执行一次的事件监听

<template><button @click.once="handleButtonClick">Click me once</button>
</template>

.capture

添加事件监听器时使用捕获模式。通常与 .native 修饰符一起使用。

<template><div @click.capture="handleDivClick"><!-- content --></div>
</template>

.passive

表示事件监听器不会调用 preventDefault()，优化滚动性能。

<template><div @scroll.passive="handleScroll"><!-- content --></div>
</template>

键盘事件修饰符

这些修饰符用于监听特定的键盘按键。

.enter, .tab, .delete, .esc, .space

<template><input @keyup.enter="handleEnter"><input @keyup.tab="handleTab"><input @keyup.delete="handleDelete"><input @keyup.esc="handleEsc"><input @keyup.space="handleSpace">
</template>

.up, .down, .left, .right

<template><input @keyup.up="handleKeyUp"><input @keyup.down="handleKeyDown"><input @keyup.left="handleKeyLeft"><input @keyup.right="handleKeyRight">
</template>

.exact

允许同时按下多个键。

<template><input @keyup.exact="handleExactKey">
</template>

鼠标按钮修饰符

这些修饰符用于区分鼠标的左右键点击。

.left, .right, .middle

<template><div @click.left="handleLeftClick">Left click</div><div @click.right="handleRightClick">Right click</div><div @click.middle="handleMiddleClick">Middle click</div>
</template>

指令特定修饰符

.native

用于 v-on 指令，监听组件根元素的原生事件。

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

.sync（Vue 2.x）

用于 v-bind 指令，相当于 v-bind:value 和 v-on:update:value 的组合。

<template><child-component :my-prop.sync="parentValue"></child-component>
</template>

Vue.js的修饰符提供了一种方便的方式来增强指令，使得事件处理更加灵活和强大。