源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

Vue3 模板语法

2026/04/21
2
0

引言

模板语法是 Vue 中实现数据与视图绑定的核心语法。Vue 基于标准 HTML 构建模板语法，能够声明式地将组件实例的数据绑定到渲染的 DOM 上；所有 Vue 模板均为合法的 HTML 代码，可被标准浏览器和 HTML 解析器正常解析。配合响应式系统，模板会随数据变化自动更新视图，兼具简洁性与强大的逻辑表达能力。

模板语法

  • 基于 HTML 原生语法扩展，零学习成本，开箱即用

  • 声明式数据绑定，无需手动操作 DOM，Vue 底层自动更新视图

  • 支持文本插值、HTML 渲染、动态属性、JavaScript 表达式

  • 完全适配 Vue 3 组合式 API，是 Vite + Vue 项目的标准写法

文本插值

文本插值是 Vue 最基础的数据绑定形式，使用 Mustache 语法（双大括号 {{ }}） 实现。

核心特性

  • 双大括号会被组件中的数据自动替换

  • 数据响应式更新，视图会同步刷新

  • 支持单行 JavaScript 表达式，不支持语句和流程控制

基础语法

<span>message: {{ msg }}</span>

完整组件

创建 src/views/HelloVue.vue 组件：

<template>
  <div>
    <!-- 基础文本插值 -->
    <span>message: {{ msg }}</span>
    <!-- 支持 JS 表达式 -->
    <p>数值计算：{{ 10 + 20 }}</p>
    <p>三元运算：{{ isActive ? '激活' : '未激活' }}</p>
  </div>
</template>

<!-- Vue 3 最新标准：组合式 API 语法糖 -->
<script setup lang="ts">
// 定义基础数据（无需响应式时直接定义）
const msg = 'Hello Vue'
const isActive = true
</script>

<!-- scoped：样式仅作用于当前组件，Vite 原生支持 -->
<style scoped>

</style>

在 App.vue 中导入使用：

<template>
  <HelloVue />
</template>

<script setup lang="ts">
import HelloVue from './views/HelloVue.vue'
</script>

<style scoped>

</style>

原始 HTML

双大括号会将数据解析为纯文本，无法渲染 HTML 标签。若需要渲染原生 HTML 内容，需使用 v-html 指令。

核心特性

  • v-html 会将数据作为元素的 innerHTML 渲染

  • 安全警告：仅渲染可信内容，严禁渲染用户输入的内容，避免 XSS 攻击

示例代码

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

<script setup lang="ts">
// 定义 HTML 字符串（仅可信静态内容）
const rawHtml = `<h3 style="color: #42b983;">Hello HTML</h3>`
</script>

<style scoped>
</style>

属性绑定

双大括号不能用于 HTML 属性，必须使用 v-bind 指令实现响应式属性绑定，这是 Vue 3 最常用的指令。

核心特性

  • 完整语法：v-bind:属性名="数据"

  • 简写语法：:属性名="数据"（Vue 3 官方推荐，项目中强制使用）

  • 绑定值为 null / undefined 时，属性会自动从 DOM 移除

  • 支持所有原生属性、自定义属性、布尔属性

标准语法

<!-- 完整写法 -->
<div v-bind:id="dynamicId"></div>
<!-- 简写写法（Vue 3 最新标准） -->
<div :id="dynamicId"></div>

完整示例

<template>
  <div>
    <!-- 动态绑定 id、class 属性 -->
    <span :id="dynamicId" :class="customClass">
      动态 ID：{{ dynamicId }}
    </span>
  </div>
</template>

<script setup lang="ts">
// TypeScript 类型标注（可选，推荐）
const dynamicId: number = 1
const customClass: string = 'text-primary'
</script>

<style scoped>
.text-primary {
  color: #42b983;
}
</style>

补充说明

核心用法

  1. 文本插值：{{ }} 用于渲染纯文本，支持单行 JS 表达式，是最常用的渲染方式

  2. 原始 HTML：v-html 用于富文本渲染，仅用于可信内容，禁止渲染用户输入

  3. 属性绑定：v-bind / : 用于动态绑定 HTML 属性，Vue 3 优先使用简写 :

开发规范

  • 全程使用 <script setup lang="ts"> 组合式 API，废弃旧版选项式 API

  • 组件直接导入即可使用，无需手动注册

  • 样式 scoped 为默认规范，避免全局样式污染

  • 动态属性、响应式数据完全由 Vue 3 响应式系统自动管理