Vue常用内置指令有哪些

Vue.js 是一个流行的前端框架，它提供了许多内置指令来简化开发过程。指令是带有 v- 前缀的特殊属性，用于在模板中应用一些特殊的行为。以下是一些常用的 Vue 内置指令：

1. v-bind

v-bind 指令用于动态绑定 HTML 属性。它可以将 Vue 实例中的数据绑定到 HTML 元素的属性上。

<div v-bind:class="{'active': isActive}"></div>

简写形式：

<div :class="{'active': isActive}"></div>

2. v-model

v-model 指令用于在表单元素上创建双向数据绑定。它通常用于 <input>、<textarea> 和 <select> 元素。

<input v-model="message" placeholder="请输入内容">

3. v-if、v-else-if、v-else

这些指令用于条件渲染。v-if 根据表达式的值来决定是否渲染元素，v-else-if 和 v-else 则用于链式条件判断。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

4. v-show

v-show 指令用于根据表达式的值来切换元素的显示状态。与 v-if 不同，v-show 只是简单地切换 CSS 的 display 属性。

<div v-show="isVisible">可见内容</div>

5. v-for

v-for 指令用于渲染列表。它可以遍历数组或对象，并为每个元素生成一个模板。

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

6. v-on

v-on 指令用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

<button v-on:click="handleClick">点击我</button>

简写形式：

<button @click="handleClick">点击我</button>

7. v-text

v-text 指令用于更新元素的 textContent。它会覆盖元素内部的所有内容。

<span v-text="message"></span>

8. v-html

v-html 指令用于更新元素的 innerHTML。它可以渲染 HTML 字符串，但要注意防止 XSS 攻击。

<div v-html="htmlContent"></div>

9. v-pre

v-pre 指令用于跳过该元素及其子元素的编译过程。这在需要显示原始 Mustache 标签时非常有用。

<span v-pre>{{ 这里的内容不会被编译 }}</span>

10. v-cloak

v-cloak 指令用于在 Vue 实例编译完成之前隐藏未编译的 Mustache 标签。通常与 CSS 结合使用。

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

[v-cloak] {
  display: none;
}

11. v-once

v-once 指令用于只渲染元素和组件一次。之后的更新将不再重新渲染。

<span v-once>{{ message }}</span>

12. v-slot

v-slot 指令用于定义插槽内容。它通常用于具名插槽或作用域插槽。

<template v-slot:header>
  <h1>标题</h1>
</template>

简写形式：

<template #header>
  <h1>标题</h1>
</template>

总结

Vue 提供了丰富的内置指令，帮助开发者更高效地构建动态和响应式的用户界面。通过熟练掌握这些指令，可以大大提升开发效率和代码质量。