Vue 的模板就是 HTML，但加了两种特殊语法：插值表达式 和 指令。

插值表达式 #

插值的意思是"在这里插入值"。Vue 用 双大括号 把数据嵌入到 HTML 中。

<template>
  <p>{{ message }}</p>
  <p>{{ number + 1 }}</p>
  <p>{{ flag ? '是' : '否' }}</p>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello',
      number: 10,
      flag: true
    }
  }
}
</script>

页面会显示：

Hello
11
是

💡 Tip：{{ }} 里面可以写什么？ 可以写合法的 JavaScript 表达式（能算出结果的代码）。比如：

• 变量：{{ name }}
• 运算：{{ a + b }}
• 三元：{{ ok ? '是' : '否' }}
• 调用方法：{{ message.toUpperCase() }} 但不能写语句！不能写 {{ if (true) { ... } }} 和 {{ const x = 1 }}。

原始 HTML — v-html #

默认情况下， 会把内容当作纯文本处理，HTML 标签会被转义——也就是说，<b> 不会让文字加粗。 如果你真的需要渲染 HTML 字符串，用 v-html：

<template>
  <p>{{ rawHtml }}</p>              <!-- 显示: <b>粗体</b> -->
  <p v-html="rawHtml"></p>         <!-- 显示: 粗体 -->
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<b>粗体</b>'
    }
  }
}
</script>

🚫 Danger：v-html 有安全风险v-html 要慎用！如果你把用户输入的内容直接用 v-html 渲染，恶意用户可以在里面插入 <script> 标签执行攻击代码（XSS 攻击）。 规则：永远不要对用户输入的内容使用 v-html。

什么是"指令"？ #

指令就是 Vue 提供的特殊属性，以 v- 开头。它们告诉 Vue "这个元素要做什么特殊处理"。 | 指令 | 作用 | 类比 | | v-html | 渲染 HTML | 用 HTML 内容替换元素 | | v-bind | 绑定属性 | 下篇讲 | | v-if | 条件显示 | 后面会讲 | | v-for | 循环渲染 | 后面会讲 | | v-on | 绑定事件 | 后面会讲 | | v-model | 双向绑定 | 后面会讲 | 这六个指令是 Vue 最核心的东西，后面会逐一详细讲解。

模板里只有文本？不，还有指令和表达式 #

总结一下，Vue 模板里你能用的东西：

<template>
  <!-- 1. 普通 HTML（照搬） -->
  <h1>标题</h1>
  <!-- 2. 插值表达式（动态内容） -->
  <p>{{ message }}</p>
  <!-- 3. 指令（v- 开头，做特殊操作） -->
  <a v-bind:href="url">链接</a>
</template>

这三种东西可以组合使用，构成 Vue 模板的全部能力。

新手常见问题 #

Q：为什么我的 一闪而过变成了真实数据？ A：那是 Vue 还没加载完时，模板原样显示了。解决办法：在 index.html 的 #app 上加 v-cloak（进阶内容，不急）。 Q： 和 v-text 有什么区别？ A：效果一样，<span v-text="msg"></span> 等于 <span></span>。一般直接用插值更直观。 下一步： 💡 Tip：Composition API 写法（Vue 3）

<script setup>
import { ref } from 'vue'
const message = ref('Hello')
const rawHtml = ref('<b>粗体</b>')
</script>

模板部分完全一样，不变。 详见：