Vue模板语法

下面，我们来系统的梳理关于 Vue 模板语法 的基本知识点

---

一、模板语法核心思想

Vue 使用基于 HTML 的模板语法实现 声明式渲染，通过特殊语法将 DOM 与 Vue 实例数据绑定。模板编译后会生成虚拟 DOM，最终渲染为真实 DOM。

---

二、基础插值语法

1. 文本插值

<p>{{ message }}</p>  <!-- 双大括号语法 -->

• 特性：
  • 自动响应数据变化
  • 不支持 HTML 解析（自动转义）
  • 支持 JavaScript 表达式（但避免复杂逻辑）

2. 原始 HTML 输出

<div v-html="rawHtml"></div>  <!-- 慎用，防范 XSS 攻击 -->

3. 属性绑定 (Attribute Binding)

<img :src="imageUrl">  <!-- v-bind 简写 -->
<button :disabled="isButtonDisabled">提交</button>

• 动态属性名：

<template v-for="(val, key) in attrsObj"><div :[key]="val"></div>
</template>

---

三、条件渲染

1. v-if 与 v-else

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

• 特性：
  • 真正的条件渲染（元素销毁/重建）
  • 适合切换频率低的场景

2. v-show

<h1 v-show