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>
这些指令修饰符提供了在特定情境下更精细控制指令行为的方式。