【vue】04.vue3指令的详细说明及注意事项

上篇介绍了有关vue数据绑定的指令，这篇会在之前的基础上，再介绍一些其他常见的vue指令。

1. v-bind

• 用途：用于绑定 HTML 属性到 Vue 实例的数据。
• 语法：v-bind:attribute="expression" 或简写为 :attribute="expression"。
• 注意：
  • 当绑定一个字符串值时，确保使用引号，否则会被当作一个变量。绑定 class 和 style 时，需要传递一个对象或数组，而不是字符串。

• 应用场景：

  • 动态绑定样式和类名。
  • 根据数据动态显示或隐藏元素。
• 示例：

  <img :src="imageSrc" alt="Image">
  

2. v-model

• 用途：在表单输入和应用状态之间创建双向数据绑定。
• 语法：v-model="dataProperty"。

• 注意：

  • 在自定义组件上使用 v-model 时，需要正确地实现 model 选项或 v-model 的 .sync 修饰符。
  • v-model 在 input 事件后更新数据，如果需要同步处理，可能需要使用 lazy、number 或 trim 修饰符。

• 应用场景：

  • 创建表单输入和应用状态之间的双向绑定。
  • 快速实现表单验证和数据收集。
• 示例：

  <input v-model="message">
  

3. v-for

• 用途：基于源数据多次渲染元素或模板块。
• 语法：v-for="(item, index) in items"。

• 注意：

  • 如果忘记使用 :key，会导致性能问题和更新时的异常行为。
  • 在 v-for 中使用复杂的表达式或方法，可能会导致性能下降。

• 应用场景：

  • 列表渲染，如菜单、表格、列表项。
  • 遍历对象属性，渲染键值对。
• 示例：

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

4. v-if

• 用途：条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
• 语法：v-if="expression"。

• 注意：

  • v-if 和 v-for 同时使用在一个元素上，可能会导致性能问题，因为 v-for 的优先级高于 v-if。
  • v-else 和 v-else-if 必须紧跟在 v-if 或 v-else-if 元素之后，否则不会生效。

• 应用场景：

  • 根据条件显示或隐藏不同的模板片段。
  • 实现多条件分支渲染。
• 示例：

  <p v-if="seen">Now you see me</p>
  

5. v-else

• 用途：v-if 的“else 块”，它必须紧跟在带 v-if 或者 v-else-if 的元素之后。
• 语法：v-else（不需要表达式）。
• 示例：

  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't</p>
  

6. v-else-if

• 用途：表示 v-if 的“else if 块”。可以链式调用。
• 语法：v-else-if="expression"。
• 示例：

  <p v-if="type === 'A'">A</p>
  <p v-else-if="type === 'B'">B</p>
  <p v-else>Not A/B</p>
  

7. v-show

• 用途：根据表达式的真假值切换元素的 display CSS 属性。
• 语法：v-show="expression"。

• 注意：

  • v-show 不支持 <template> 元素，也不支持 v-else。
  • 切换 v-show 时，元素始终会被渲染并保留在 DOM 中，只是简单地切换 CSS 的 display 属性。

• 应用场景：

  • 频繁切换显示状态的元素，因为不需要重新渲染。
• 示例：

  <h1 v-show="ok">Hello!</h1>
  

8. v-on

• 用途：用于监听 DOM 事件。
• 语法：v-on:event="handler" 或简写为 @event="handler"。

• 注意：

  • 在内联语句处理器中访问原始 DOM 事件，需要使用特殊变量 $event。
  • 事件修饰符使用不当，如 .stop、.prevent 等。

• 应用场景：

  • 绑定任何 DOM 事件监听器。
  • 实现用户交互，如点击、拖拽等。
• 示例：

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

9. v-html

• 用途：更新元素的 innerHTML。
• 语法：v-html="htmlString"。

• 注意：

  • 使用 v-html 可能会导致跨站脚本攻击（XSS），因为它会直接将字符串作为 HTML 插入。
  • 不能与 v-text 或 Mustache 插值一起使用。

• 应用场景：

  • 需要插入 HTML 内容而不是数据绑定的情况。
• 示例：

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

10. v-text

• 用途：更新元素的 textContent。
• 语法：v-text="string"。

• 注意：

  • 与插值表达式 ({ { }}) 功能相似，但优先级更高，可能会导致混淆。
  • 不应该与 v-html 一起使用。

• 应用场景：

  • 当需要更新元素的文本内容而不是属性时。
• 示例：

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

11. v-pre

• 用途：跳过这个元素和它的子元素的编译过程。
• 语法：v-pre（不需要表达式）。

• 注意：

  • 如果不小心应用到整个组件上，会导致所有数据绑定失效。

• 应用场景：

  • 用于输出原始 Mustache 标签，避免编译。
• 示例：

  <span v-pre>{
       
       { this will not be compiled }}</span>
  

12. v-cloak

• 用途：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
• 语法：v-cloak（不需要表达式）。

• 注意：

  • 如果 CSS 规则没有正确设置，用户可能会看到未编译的 Mustache 标签。

• 应用场景：

  • 防止用户看到 Mustache 标签在页面加载时的闪烁。
• 示例：

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

13. v-once

• 用途：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
• 语法：v-once（不需要表达式）。

• 注意：

  • 如果在包含动态内容的组件上使用，动态内容将不会更新。

• 应用场景：

  • 用于渲染那些知道不会改变的静态内容或者只需渲染一次的内容，以优化性能。
• 示例：

  <span v-once>This will never change

Vue.js 还提供了一些其他的指令，虽然不如前面提到的那些常用，但它们在特定的场景下非常有用。

14.v-slot

• 用途：用于定义具名插槽或插槽的默认内容，在组件的模板或<template>标签中使用。
• 语法：v-slot:slotName 或简写为 #slotName。
• 示例：

  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
  

15.v-slot (缩写为 #)

• 用途：同上，但是使用缩写形式。
• 示例：

  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  

16.v-memo

• 用途：Vue 3 中引入，用于记忆一个模板的子树。当输入保持不变时，可以避免子树的重新渲染。
• 语法：v-memo="[value1, value2, ...]"。
• 示例：

  <div v-memo="[value1, value2]">
    <!-- content -->
  </div>
  

17.v-is

• 用途：用于动态地创建组件实例，通常与 <component> 标签一起使用。
• 语法：v-is="componentName"。
• 示例：

  <component :is="dynamicComponentName"></component>
  

18.v-custom-directive

• 用途：Vue 允许开发者自定义指令。v-custom-directive 是一个占位符，代表任何自定义的指令。
• 示例：

  <div v-custom-directive="value"></div>
  

  在 JavaScript 中定义自定义指令：

  Vue.directive('custom-directive', {
    // 指令的定义对象
  });
  

结束。