Vue 3 内置指令

Vue 3 提供了一系列 内置指令 来实现 数据绑定、条件渲染、列表渲染、事件监听、样式绑定等 功能。这些指令通常以 v- 为前缀。

1. v-bind（属性绑定）

v-bind 用于 动态绑定 HTML 属性。

基本用法

<template>
  <img v-bind:src="imageUrl" alt="Vue Logo">
  <!-- 缩写 -->
  <img :src="imageUrl" alt="Vue Logo">
</template>

<script setup>
const imageUrl = 'https://vuejs.org/images/logo.png';
</script>

✅ 提示：

  • v-bind 可以省略，直接使用 : 语法，如 :src="imageUrl"。

绑定多个属性

<template>
  <button v-bind="{ id: 'btn1', class: btnClass }">按钮</button>
</template>

<script setup>
const btnClass = 'primary-btn';
</script>

2. v-model（双向数据绑定）

v-model 用于在 表单输入 和 数据状态 之间建立 双向绑定。

基本用法

<template>
  <input v-model="name" placeholder="输入你的名字">
  <p>你好，{{ name }}！</p>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('');
</script>

v-model 绑定多个值

<template>
  <input type="checkbox" v-model="checked"> 是否同意
  <p>选中状态：{{ checked }}</p>
</template>

<script setup>
import { ref } from 'vue';

const checked = ref(false);
</script>

✅ Vue 3 的 v-model 可以绑定多个值：

<input v-model:name="firstName" v-model:surname="lastName">

3. v-if / v-else-if / v-else（条件渲染）

用于 条件性地渲染元素。

基本用法

<template>
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>
</template>

<script setup>
const score = 85;
</script>

v-if 与 v-show 的区别

  • v-if 完全移除 元素（控制 DOM 结构）。
  • v-show 仅仅切换 display: none（控制 CSS 可见性）。
<p v-show="isVisible">这个元素可以隐藏</p>

4. v-for（列表渲染）

v-for 用于 遍历数组或对象 并渲染列表。

遍历数组

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

<script setup>
const items = ['苹果', '香蕉', '橙子'];
</script>

✅ 每个 v-for 需要提供 key，以优化 DOM 更新。

遍历对象

<template>
  <ul>
    <li v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script setup>
const user = {
  name: '张三',
  age: 25,
  gender: '男'
};
</script>

5. v-on（事件绑定）

v-on 用于 监听事件，可以缩写为 @。

基本用法

<template>
  <button v-on:click="sayHello">点击我</button>
  <!-- 缩写 -->
  <button @click="sayHello">点击我</button>
</template>

<script setup>
const sayHello = () => alert('你好，Vue 3！');
</script>

传递参数

<template>
  <button @click="greet('张三')">打招呼</button>
</template>

<script setup>
const greet = (name) => alert(`你好, ${name}！`);
</script>

6. v-html（HTML 渲染）

v-html 用于 解析 HTML 字符串。

示例

<template>
  <div v-html="htmlContent"></div>
</template>

<script setup>
const htmlContent = '<p style="color:red">这是红色文本</p>';
</script>

⚠️ 警告：避免渲染 不受信任的 HTML，否则会有 XSS 攻击风险！

7. v-text（文本插值）

v-text 用于 替代 {{}} 直接渲染文本。

示例

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

<script setup>
const message = 'Vue 3 是一个渐进式框架';
</script>

8. v-pre（跳过编译）

v-pre 阻止 Vue 解析模板表达式，用于 优化性能 或 显示原始模板代码。

示例

<template>
  <p v-pre>{{ 计算结果 }}</p>
</template>

✅ 结果：显示 {{ 计算结果 }}，而不会被 Vue 解析。

9. v-cloak（防止闪烁）

v-cloak 防止 Vue 解析前的闪烁（FOUC）。

示例

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

<template>
  <p v-cloak>{{ message }}</p>
</template>

✅ Vue 加载完成后，v-cloak 会自动移除。

10. v-once（只渲染一次）

v-once 只渲染一次，数据更新后不会改变，适用于 静态内容优化。

示例

<template>
  <p v-once>当前时间：{{ Date.now() }}</p>
</template>

✅ 结果：即使 Date.now() 变化，页面也不会更新。

总结

指令作用
v-bind / :绑定属性
v-model双向绑定
v-if / v-else-if / v-else条件渲染
v-show控制显示隐藏
v-for列表渲染
v-on / @事件绑定
v-html渲染 HTML
v-text渲染文本
v-pre跳过编译
v-cloak防止闪烁
v-once只渲染一次

这些内置指令帮助 Vue 3 开发更高效，掌握它们可以大幅提升项目开发效率！🚀