以下为你用表格形式呈现 Vue 3 基本语法：
| 类别 | 语法示例 | 说明 |
|---|---|---|
| 模板语法 | ||
| 文本插值 | <div>{{ message }}</div> |
使用双大括号将数据显示在模板中 |
| 属性绑定 | <img :src="imageUrl" alt="示例图片"> |
:src 是 v-bind:src 的简写，用于动态绑定属性值 |
| 事件绑定 | <button @click="handleClick">点击</button> |
@click 是 v-on:click 的简写，用于绑定 DOM 事件 |
| 响应式数据 | ||
| ref | const count = ref(0); |
用于创建单个响应式数据，访问时需通过 .value |
| reactive | const user = reactive({ name: '张三' }); |
用于创建响应式对象，可直接访问属性 |
| 方法定义 | function handleClick() { count.value++; } |
在 setup 函数中定义方法，可在模板中调用 |
| 条件渲染 | ||
| v-if | <p v-if="count > 5">计数大于 5</p> |
当条件为真时渲染元素，否则不渲染 |
| v-show | <p v-show="isVisible">显示内容</p> |
通过 CSS 的 display 属性控制元素显示与隐藏 |
| 列表渲染 | <ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul> |
使用 v-for 指令遍历数组或对象，key 用于提高渲染效率 |
以上表格涵盖了 Vue 3 中常见的基础语法，能帮助你快速了解并在开发中使用这些功能。
