vue中常用的指令修饰符

vue中常用的指令修饰符有哪些

在Vue.js中，指令修饰符用于在指令后面以点号（.）形式添加特殊后缀，以表示对指令的特定行为或修饰。
以下是一些常用的Vue.js指令修饰符：

1. v-on （@）指令修饰符：

• .stop: 阻止事件继续传播。
• .prevent: 阻止默认事件。
• .capture: 使用事件捕获模式。
• .self: 只当事件在该元素本身触发时触发回调。
• .once: 只触发一次回调。

<button @click.stop="doSomething">阻止冒泡</button>
<form @submit.prevent="submitForm">阻止表单提交</form>
<div @click.capture="doCapture">使用捕获模式</div>
<div @click.self="doSelf">只在自身触发时触发回调</div>
<button @click.once="doOnce">只触发一次</button>

2. v-bind（:） 指令修饰符：

• .prop: 将属性绑定到DOM属性。
• .camel: 将 kebab-case 属性名转换为 camelCase。

<input :value.prop="message"> <!-- 将值绑定到 DOM 属性 -->
<my-component :some-prop.camel="value"></my-component> <!-- 将 kebab-case 转为 camelCase -->

3. v-model 指令修饰符：

• .lazy: 取代 input 监听 change 事件。
• .number: 输入字符串转为有效的数字。
• .trim: 输入首尾空格过滤。

<input v-model.lazy="message"> <!-- 不是即时更新，而是在 change 事件后更新 -->
<input v-model.number="age" type="number"> <!-- 将输入值转为数字 -->
<input v-model.trim="username"> <!-- 自动过滤首尾空格 -->

4. v-show 指令修饰符：

• .sync: 修饰 v-show，使其支持双向绑定。

<div v-show.sync="isVisible"></div>

5. v-cloak 指令修饰符：

• .cloak: 配合 v-cloak 隐藏没有编译的 Mustache 标签直到实例准备完毕。

cssCopy code[v-cloak].cloak {
  display: none;
}

<div v-cloak.cloak>{{ message }}</div>

这些指令修饰符提供了在特定情境下更精细控制指令行为的方式。