【转】[Vue] 常用的缩写形式

转自：kimi.ai

在 Vue.js 中，为了简化模板语法，Vue 提供了一些常用的缩写形式。这些缩写可以让代码更加简洁易读，同时保持功能的完整性。以下是 Vue 中常见的缩写及其对应的完整形式：

1. 数据绑定

• 完整形式：v-bind
• 缩写：:

作用

用于将数据绑定到模板中的属性上。

示例

HTML复制

<!-- 完整形式 -->
<div v-bind:class="className"></div>

<!-- 缩写形式 -->
<div :class="className"></div>

2. 事件绑定

• 完整形式：v-on
• 缩写：@

作用

用于绑定事件监听器。

示例

HTML复制

<!-- 完整形式 -->
<button v-on:click="handleClick"></button>

<!-- 缩写形式 -->
<button @click="handleClick"></button>

3. 条件渲染

• 完整形式：v-if、v-else-if、v-else
• 缩写：无（v-if 等本身就是简写形式）

作用

用于条件性地渲染元素。

示例

HTML复制

<div v-if="isVisible">Visible</div>
<div v-else-if="isHidden">Hidden</div>
<div v-else>Neither</div>

4. 列表渲染

• 完整形式：v-for
• 缩写：无（v-for 本身就是简写形式）

作用

用于基于数组或对象渲染列表。

示例

HTML复制

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

5. 双向绑定

• 完整形式：v-model
• 缩写：无（v-model 本身就是简写形式）

作用

用于实现表单输入和应用状态之间的双向绑定。

示例

HTML复制

<input v-model="message" placeholder="Enter something">
<p>{{ message }}</p>

6. 动态指令参数

• 完整形式：v-bind:[argument]、v-on:[event]
• 缩写：:[argument]、@[event]

作用

用于动态绑定指令的参数。

示例

HTML复制

<!-- 动态绑定属性 -->
<div :[dynamicAttribute]="value"></div>

<!-- 动态绑定事件 -->
<button @[dynamicEvent]="handleEvent"></button>

7. .sync 修饰符（Vue 2.3+）

• 完整形式：v-bind:[prop].sync
• 缩写：:[prop].sync

作用

用于实现父子组件之间的双向绑定。

示例

HTML复制

<!-- 完整形式 -->
<child-component :message.sync="parentMessage"></child-component>

<!-- 缩写形式 -->
<child-component :message.sync="parentMessage"></child-component>

8. .native 修饰符

• 完整形式：v-on:native
• 缩写：.native

作用

用于在自定义组件上监听原生事件。

示例

HTML复制

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

9. .once 修饰符

• 完整形式：v-bind:once
• 缩写：.once

作用

用于在绑定时只计算一次表达式的值。

示例

HTML复制

<div :class.once="initialClass"></div>

10. .lazy 修饰符

• 完整形式：v-model.lazy
• 缩写：.lazy

作用

用于在 change 事件而不是 input 事件上更新数据。

示例

HTML复制

<input v-model.lazy="message" placeholder="Enter something">

11. .number 修饰符

• 完整形式：v-model.number
• 缩写：.number

作用

用于自动将输入值转换为数字类型。

示例

HTML复制

<input v-model.number="age" type="number" placeholder="Enter your age">

12. .trim 修饰符

• 完整形式：v-model.trim
• 缩写：.trim

作用

用于自动去除输入值的首尾空格。

示例

HTML复制

<input v-model.trim="message" placeholder="Enter something">

总结

Vue 提供了多种缩写形式，这些缩写可以让模板代码更加简洁易读。以下是常见的缩写及其对应关系：

• v-bind → :
• v-on → @
• 动态指令参数：v-bind:[argument] → :[argument]
• 动态事件绑定：v-on:[event] → @[event]
• .sync 修饰符：v-bind:[prop].sync → :[prop].sync
• .native 修饰符：v-on:native → .native
• .once 修饰符：v-bind:once → .once
• .lazy 修饰符：v-model.lazy → .lazy
• .number 修饰符：v-model.number → .number
• .trim 修饰符：v-model.trim → .trim

使用这些缩写可以提高开发效率，同时保持代码的清晰和简洁。