Vue3 模板语法

模板语法是 Vue 渲染层的书写规范：在 HTML 骨架之上提供数据输出、逻辑处理与动态绑定的能力。本节聚焦文本、属性、表达式与动态参数的语法细节。

文本插值 {{ }}

用双大括号把响应式数据渲染为文本：

<template>
  <p>作者：{{ author.name }}，作品数：{{ author.works.length }}</p>
</template>
<script setup>
import { reactive } from 'vue'
const author = reactive({
  name: '小明',
  works: ['Vue3 教程', '组合式 API 指南']
})
</script>

页面显示：作者：小明，作品数：2。reactive 适合声明对象与数组类型的响应式数据。

原始 HTML 输出

插值只能输出纯文本，若数据是 HTML 字符串，需要用 v-html：

<template>
  <div v-html="content"></div>
</template>
<script setup>
const content = '<p style="color:blue">蓝色段落</p>'
</script>

页面渲染出蓝色段落。再次提醒：v-html 会真实插入 DOM，绝不用于未过滤的用户输入。

属性绑定 v-bind

{{ }} 不能用于 HTML 属性，动态属性一律用 : 前缀绑定：

<template>
  <a :href="docUrl">官方文档</a>
  <input :value="text" readonly />
</template>
<script setup>
const docUrl = 'https://cn.vuejs.org/'
const text = '只读默认值'
</script>

链接地址与输入框默认值均来自数据，修改数据即更新界面。

JavaScript 表达式

{{ }} 内支持运算与调用，但只能写表达式：

<template>
  <p>{{ price * 0.8 }}</p>
  <p>{{ fullName.split(' ')[0] }}</p>
</template>
<script setup>
const price = 100
const fullName = 'Ada Lovelace'
</script>

两行分别输出 80 与 Ada。方法调用、三元运算都允许，但 if 语句、for 语句与赋值语句不允许出现。

动态参数

指令的参数支持用方括号动态指定：

<template>
  <button @[eventName]="count++">动态事件按钮</button>
  <p>点击次数：{{ count }}</p>
</template>
<script setup>
import { ref } from 'vue'
const eventName = ref('click')  // 改成 'mouseover' 即改为移入触发
const count = ref(0)
</script>

此处 @[eventName] 等价于 @click；改变 eventName 的值即可切换监听的事件类型。

常用缩写对照

完整写法	缩写	示例
v-bind:href	:href	:href="url"
v-on:click	@click	@click="fn"
v-slot:default	#default	用于组件插槽

缩写只是语法糖，功能完全一致，实际开发中缩写更常见。

小结

模板语法 = 插值/表达式 + 属性绑定 + 动态参数与缩写记号。这些是看懂一切 .vue 模板的前提，下一章开始学习组件开发。