1.4 vue3模板template中常用指令

在 Vue 3 中，有许多常用的指令，它们有各自不同的用途。
以下是一些 Vue 3 中常用的指令及其讲解：

1. v-bind:（可简写成）

• 作用: 用于动态绑定属性，从数据中获取值展示到页面。v-bind可以简写:
• 示例:

  <img :src="imageUrl">
  

2. v-model:

• 作用: v-model 是一个非常常用的指令，它用于在父组件和子组件之间进行双向数据绑定。v-model 可以绑定表单元素（如输入框、复选框、单选框等）以及自定义组件的数据，实现数据的同步更新。
• 示例:

  <input v-model="message">
  

3. v-for:

• 作用: 用于遍历数组或对象，生成一个列表。
• 用法: 通过 v-for 指令，你可以在模板中动态渲染一组元素。
• 示例:

  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  

  在这个例子中，v-for="item in items" 遍历 items 数组，并生成一个 li 元素列表。

4. v-if, v-else-if, v-else:

• 作用: 用于条件渲染，根据条件决定是否渲染元素。
• 示例:

  <div v-if="isVisible">This will be shown if isVisible is true</div>
  <div v-else>This will be shown if isVisible is false</div>
  

5. v-show:

• 作用: 用于条件渲染，但与 v-if 不同，v-show 仅通过 CSS 控制元素的显示或隐藏，而不是从 DOM 中移除元素。
• 示例:

  <div v-show="isVisible">This is shown or hidden based on isVisible</div>
  

6. v-on:（可简写成@）

• 作用: 用于监听事件，如点击、输入等，并执行指定的处理函数。
• 用法: 通过 v-on 可以为 DOM 元素绑定事件监听器。
• 示例:

  <button v-on:click="handleClick">Click Me</button>
  

  简化写法：

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

7. v-slot:

• 作用: 用于插槽的语法，允许父组件向子组件传递模板内容。
• 示例:

  <template v-slot:header>
    <h1>Welcome</h1>
  </template>
  

8. v-cloak:

• 作用: 用于在 Vue 实例完全初始化之前，保持一个元素及其子元素的 “隐身” 状态，通常与 CSS 配合使用。
• 示例:

  <div v-cloak>
    <!-- Vue 内容 -->
  </div>
  

  需要通过 CSS 使 v-cloak 的元素隐藏：

  [v-cloak] {
    display: none;
  }
  

9. v-pre:

• 作用: 用于跳过这个元素和它的子元素的编译过程，适用于静态内容。
• 示例:

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

10. v-once:

• 作用: 用于使元素或组件仅渲染一次，即使数据发生变化，也不会重新渲染该元素。
• 示例:

  <div v-once>This content will be rendered only once</div>
  

11. v-memo:

• 作用: 用于优化性能，只有当 v-memo 的依赖项发生变化时，才会重新渲染该元素。
• 示例:

  <div v-memo="[count]">{{ count }}</div>
  

总结：

• v-bind：用于绑定元素的属性（单向绑定）。
• v-model：用于双向绑定数据，通常用于表单控件。
• v-for：用于渲染列表。
• v-if, v-else-if, v-else：条件渲染元素。
• v-show：通过 CSS 控制元素显示/隐藏。
• v-on：事件监听。
• v-slot：插槽机制。
• v-cloak：保持元素在 Vue 完全初始化之前不可见。
• v-pre：跳过编译静态内容。
• v-once：元素渲染一次。
• v-memo：优化渲染，避免不必要的更新。

这些指令可以帮助你在 Vue 中高效地操作 DOM、处理事件、实现条件渲染、绑定数据等。