vue的内置指令用于操作 DOM 元素、数据绑定和条件渲染等

1. v-bind

语法：v-bind:属性名 或者简写为 :属性名

作用：动态绑定 HTML 元素的属性，可以是普通的 HTML 属性，也可以是组件的 prop。

示例：

<img :src="imageSrc">
<a :href="url">Link</a>

2. v-model

语法：v-model="data" 或者 v-model:value="data"

作用：在表单元素上创建双向数据绑定。可以自动处理用户输入事件以及更新组件状态和表单元素的值。

示例：

<input type="text" v-model="message">
<select v-model="selectedOption">
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

3. v-if / v-else-if / v-else

语法：
    v-if="条件"：根据条件渲染元素。
    v-else-if="条件"：用于 v-if 的附加条件块。
    v-else：表示 v-if 的“else”块。

示例：

<div v-if="isTrue">Visible when isTrue is true</div>
<div v-else>Visible when isTrue is false</div>

4. v-for

语法：v-for="(item, index) in items" 或者 v-for="item in items"

作用：基于数组或对象的数据源进行循环渲染元素列表。

示例：

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

5. v-on

语法：v-on:事件名 或者简写为 @事件名

作用：绑定事件监听器，触发时执行相应的方法。

示例：

<button @click="handleClick">Click me</button>

6. v-show

语法：v-show="条件"

作用：根据条件显示或隐藏元素，通过修改元素的 display CSS 属性来实现。

示例：

<div v-show="isVisible">Visible when isVisible is true</div>

7. v-text 和 v-html

v-text：将元素的 textContent 设置为表达式的结果。

示例：

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

v-html：将元素的 innerHTML 设置为表达式的结果，潜在的 XSS 风险需要谨慎使用。

示例：

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

8. v-pre

v-pre 指令告诉 Vue 不要编译和解析当前元素及其子元素。通常用于显示原始 Mustache 标签 ({{ }}) 作为普通文本，而不是 Vue 模板的一部分。

语法：v-pre
作用：跳过当前元素和其子元素的编译过程，直接将其作为静态内容渲染到页面上。

示例：

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

在这个示例中，{{ message }} 不会被 Vue 解析，而是直接显示为 {{ message }}。

9. v-cloak

v-cloak 指令用于防止页面加载时显示未编译的 Mustache 标签 ({{ }})。它会保持元素及其子元素隐藏，直到 Vue 实例加载并编译完成。

语法：v-cloak

作用：保持元素及其子元素隐藏，直到 Vue 实例完成加载和编译。

示例：

<style>
  [v-cloak] {
    display: none;
  }
</style>

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

在这个示例中，{{ message }} 在 Vue 实例加载前会被隐藏，直到 Vue 完成编译。

10. v-once

v-once 指令用于只渲染元素和组件一次。在元素或组件首次渲染后，Vue 不再对其进行响应式更新。

语法：v-once

作用：只渲染元素或组件一次，后续的数据变化不会引起其重新渲染。

示例：

<div v-once>{{ staticText }}</div>

在这个示例中，{{ staticText }} 只会渲染一次，即使 staticText 变量后续发生变化，内容也不会更新。总结

这些特殊用途的指令使得 Vue.js 在处理特定需求时更加灵活和强大。v-pre 用于避免 Vue 编译 Mustache 标签，v-cloak 可以确保在 Vue 加载之前隐藏未编译的内容，而 v-once 则用于只渲染元素或组件的首次数据，后续不再更新。