声明式渲染：模板语法、插值表达式

Vue 的核心特性之一是声明式渲染，它允许开发者通过简洁的模板语法将数据绑定到 DOM，无需手动操作 DOM。

模板语法（Template Syntax）

Vue 使用基于 HTML 的模板语法，通过特殊的指令和插值将数据动态渲染到页面上。

插值表达式（Mustache Syntax）

作用：将组件中的数据动态渲染到 DOM 中。

语法：（双大括号，也称为“Mustache”语法）。

基本用法：

<template>
  <div>
    <p>{{ message }}</p>  <!-- 输出：Hello Vue! -->
    <p>{{ count + 1 }}</p> <!-- 支持表达式，输出：2 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
      count: 1
    };
  }
};
</script>

特点：

• 可以绑定 data、computed、props 等响应式数据。
• 内部支持 JavaScript 表达式（如 {{ count + 1 }}），但不支持语句（如 if、for）。

插值表达式的高级用法：

1. 调用方法

   <p>{{ formatDate(user.createdAt) }}</p>

   methods: {
     formatDate(date) {
       return new Date(date).toLocaleString();
     }
   }

2. 三元表达式

   <p>{{ isVIP ? 'VIP用户' : '普通用户' }}</p>

3. 计算属性（推荐）

   <p>{{ fullName }}</p>

   computed: {
     fullName() {
       return `${this.firstName} ${this.lastName}`;
     }
   }

指令（Directives）

指令是带有 v- 前缀的特殊属性，用于动态绑定 DOM 行为。

常用指令：

指令	作用
v-bind	动态绑定 HTML 属性（如 :id="dynamicId"）
v-model	表单输入双向绑定（如 <input v-model="message">）
v-if / v-show	条件渲染（v-if 销毁 DOM，v-show 切换 display: none）
v-for	循环渲染列表（如 <li v-for="item in items" :key="item.id">）
v-on	绑定事件（如 @click="handleClick"）

示例：

<template>
  <div>
    <!-- v-bind 绑定属性 -->
    <a :href="url">点击跳转</a>

    <!-- v-model 双向绑定 -->
    <input v-model="inputText" placeholder="输入内容" />
    <p>输入的内容：{{ inputText }}</p>

    <!-- v-if 条件渲染 -->
    <p v-if="isLoggedIn">欢迎回来！</p>
    <p v-else>请登录</p>

    <!-- v-for 列表渲染 -->
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>

    <!-- v-on 事件绑定 -->
    <button @click="sayHello">打招呼</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://vuejs.org",
      inputText: "",
      isLoggedIn: true,
      users: [
        { id: 1, name: "Alice" },
        { id: 2, name: "Bob" }
      ]
    };
  },
  methods: {
    sayHello() {
      alert("Hello Vue!");
    }
  }
};
</script>

插值表达式 vs 指令

特性	插值表达式 ({{ }})	指令（如 v-bind, v-if）
用途	仅用于文本内容渲染	用于属性绑定、条件渲染、循环等
示例	<p></p>	<a :href="url"> 或 <p v-if="show">
是否支持 JS 表达式	✅（如 NaN）	✅（如 :class="{ active: isActive }"）
是否支持 HTML	❌（会被转义）	✅（v-html 可渲染原始 HTML）

注意事项

1. 避免复杂逻辑

   • 插值表达式应保持简单，复杂逻辑建议使用计算属性（computed）或方法（methods）。

2. v-html 谨慎使用

   • 可能引发 XSS 攻击，确保内容可信。

   <div v-html="rawHtml"></div> <!-- 渲染原始 HTML -->

3. v-for 必须加 :key

   • 提高渲染性能，避免状态错乱。

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

4. v-if vs v-show

   • v-if：条件为 false 时销毁 DOM，适合切换频率低的场景。
   • v-show：仅切换 display: none，适合频繁切换的场景。

总结

• 插值表达式 ：用于动态渲染文本内容，支持简单 JS 表达式。
• 指令（v-bind、v-model 等）：用于属性绑定、条件渲染、循环等动态 DOM 操作。
• 最佳实践：
  • 简单逻辑用插值表达式，复杂逻辑用计算属性或方法。
  • 列表渲染必须加 :key。
  • 避免在模板中写过多业务逻辑，保持可读性。