vue3 指令详解

在Vue 3中，指令是一种特殊的标记，以v-开头，用于在模板中表达“响应式”的DOM操作。Vue 3提供了许多内置指令，例如v-if，v-for，v-bind，v-on等。

以下是一些常用Vue 3指令的详细解释和示例代码：

1. v-if：条件性地渲染元素。如果表达式为假，元素会被移除。

<template>
  <div>
    <p v-if="show">现在你看到我了</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const show = ref(true); // 可以改为 false 试试看
    return { show };
  }
}
</script>

2. v-else-if：v-if的else-if块。可以链式的多次使用。

<template>
  <div>
    <p v-if="type === 'apple'">苹果</p>
    <p v-else-if="type === 'banana'">香蕉</p>
    <p v-else>未知水果</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const type = ref('apple'); // 可以尝试改变这个值，看看结果如何
    return { type };
  }
}
</script>

3. v-else：v-if的else块。必须紧跟v-if或v-else-if。
4. v-show：根据表达式的真假，切换元素的display CSS属性。

<template>
  <div>
    <p v-show="show">我会被显示</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const show = ref(true); // 可以改为 false 试试看
    return { show };
  }
}
</script>

5. v-for：基于源数据多次渲染元素或模板块。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const items = ref(['苹果', '香蕉', '樱桃']);
    return { items };
  }
}
</script>

6. v-bind：绑定一个或多个属性值到表达式。简写为一个冒号 :。

<template>
  <div>
    <img v-bind:src="imageSrc" />
    <!-- 简写 -->
    <img :src="imageSrc" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const imageSrc = ref('https://example.com/image.png');
    return { imageSrc };
  }
}
</script>

7. v-on：监听DOM事件。简写为@符号。

<template>
  <div>
    <button v-on:click="greet">点击我</button>
    <!-- 简写 -->
    <button @click="greet">点击我</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    function greet() {
      alert('Hello!');
    }
    return { greet };
  }
}