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