vue3的基本指令以及含义？

个人博客

在Vue 3中，基本指令和Vue 2大致相同，但仍然有一些改进和新增的指令。Vue中的指令（Directives）是用于在模板中声明式地绑定数据的特殊标记。以下是Vue 3的基本指令及其含义：

1. v-bind

• 语法：v-bind:attribute="expression" 或 :attribute="expression"
• 用途：绑定一个或多个属性，动态地将属性值绑定到表达式。

2. v-model

• 语法：v-model="dataProperty"
• 用途：创建双向数据绑定，通常用于表单输入控件。

3. v-if, v-else-if, v-else

• 语法：v-if="condition"、v-else-if="condition"、v-else
• 用途：条件渲染，根据表达式的值决定是否渲染元素。
• 示例：

  <template>
    <p v-if="seen">Now you see me</p>
    <p v-else>Now you don't</p>
  </template>
  
  <script>
  export default {
    data() {
      return {
        seen: true
      };
    }
  };
  </script>
  

4. v-show

• 语法：v-show="condition"
• 用途：基于表达式的值切换元素的可见性，使用display样式属性。
• 示例：

  <template>
    <p v-show="isVisible">You can see me</p>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isVisible: true
      };
    }
  };
  </script>
  

5. v-for

• 语法：v-for="item in items" 或 v-for="(item, index) in items"
• 用途：基于一个数组或对象来渲染列表。
• 示例：

  <template>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </template>
  
  <script>
  export default {
    data() {
      return {
        items: ['Apple', 'Banana', 'Cherry']
      };
    }
  };
  </script>
  

6. v-on

• 语法：v-on:event="method" 或 @event="method"
• 用途：绑定事件监听器，响应用户输入。

7. v-slot

• 语法：v-slot:name 或 #name
• 用途：用于插槽分发内容。
• 示例：

  <template>
    <child-component>
      <template #default>
        <p>This is default slot content</p>
      </template>
    </child-component>
  </template>
  
  <script>
  export default {
    components: {
      'child-component': {
        template: '<div><slot></slot></div>'
      }
    }
  };
  </script>
  

8. v-pre

• 语法：v-pre
• 用途：跳过这个元素和它的子元素的编译过程，用于显示原始的Mustache语法或用于性能优化。
• 示例：

  <template>
    <div v-pre>{{ raw mustache }} not compiled</div>
  </template>
  

9. v-cloak

• 语法：v-cloak
• 用途：保持在元素上直到关联实例完成编译，用于防止闪烁。
• 示例：

  <style>
  [v-cloak] { display: none; }
  </style>
  
  <template>
    <div v-cloak>{{ message }}</div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    }
  };
  </script>
  

10. v-once

• 语法：v-once
• 用途：只渲染元素和组件一次，用于性能优化。

11. v-memo (Vue 3新增)

• 语法：v-memo="[condition]"
• 用途：用于缓存元素或组件的子树，当指定的依赖变化时重新渲染。
• 示例：

  <template>
    <p v-memo="[count]">This will be cached until count changes: {{ message }}</p>
  </template>
  
  <script>
  export default {
    data() {
      return {
        count: 0,
        message: 'Hello, Vue!'
      };
    }
  };
  </script>
  

总结

Vue 3保留了Vue 2中的大多数指令，并在此基础上进行了优化和改进。通过这些基本指令，开发者可以在模板中轻松地进行数据绑定、事件处理、条件渲染和列表渲染等操作，提高开发效率和代码可读性