Vue3 基础语法

Vue3 的模板是"增强版 HTML"：除了写标签，还能用插值、表达式与指令把数据渲染到页面上。本节集中讲解最常用的语法元素，示例统一使用组合式 API。

文本插值 {{ }}

双大括号是最常用的语法，用来输出变量的值：

<template>
  <p>{{ name }}，你好！</p>
</template>

<script setup>
const name = 'Vue3'
</script>

页面显示：Vue3，你好！若希望修改变量后页面同步更新，请用 ref 声明它（见下文）。

绑定属性与监听事件

属性与事件不能写在 {{ }} 中，需要借助指令：

<template>
  <a :href="url" @click="say">访问官网</a>
</template>

<script setup>
const url = 'https://vuejs.org'
const say = () => alert('点击了链接')
</script>

冒号 : 是 v-bind 的缩写（绑定属性），@ 是 v-on 的缩写（监听事件）。点击链接会弹出提示框。

v-html 输出原始 HTML

当数据本身包含 HTML 标签时，可用 v-html 让它按标签渲染：

<template>
  <p>{{ raw }}</p>
  <p v-html="raw"></p>
</template>

<script setup>
const raw = '<b style="color:red">红色加粗文字</b>'
</script>

第一行原样显示标签源码，第二行渲染出红色加粗文字。注意 v-html 有 XSS 风险，切勿用于未经处理的用户输入。

JavaScript 表达式

{{ }} 内支持任何单条 JavaScript 表达式：

<template>
  <p>{{ 1 + 2 }}</p>
  <p>{{ ok ? 'YES' : 'NO' }}</p>
  <p>{{ message.toUpperCase() }}</p>
</template>

<script setup>
const ok = true
const message = 'hello'
</script>

三行分别输出 3、YES、HELLO。注意：表达式只能求值，不能写 if 语句、声明语句或多行逻辑，复杂逻辑应提取为函数。

用 ref 让数据"活"起来

把普通值换成 ref 响应式数据，配合按钮验证"数据驱动视图"：

<template>
  <p>{{ counter }}</p>
  <button @click="counter++">增加</button>
</template>

<script setup>
import { ref } from 'vue'
const counter = ref(0)
</script>

每点一次按钮数字加 1，模板自动更新——这是 Vue 最核心的运行机制。

小结

基础语法 = {{ }} 输出文本 + 表达式参与计算 + v-bind/v-on/v-html 等指令驱动界面。下一节将系统介绍各类指令的用法。