Vue3 的模板语法主要包括以下几个部分：
- 插值表达式：使用双大括号
{{ }}包裹变量，可以直接在模板中显示变量的值。
<div>{{ message }}</div>
- 指令：以
v-开头，后面跟一个自定义的名字，用于操作 DOM 元素。
<!-- 绑定点击事件 --> <button v-on:click="handleClick">点击我</button> <!-- 条件渲染 --> <p v-if="seen">现在你看到我了</p> <p v-else>你现在看不到我</p>
- 事件监听：使用
v-on或简写为@监听事件。
<!-- 监听点击事件 --> <button @click="handleClick">点击我</button>
- 表单输入绑定：使用
v-model实现双向数据绑定。
<!-- 输入框双向绑定 --> <input v-model="message" placeholder="edit me">
- 列表渲染：使用
v-for指令遍历数组或对象生成列表。
<!-- 遍历数组 --> <ul> <li v-for="item in items">{{ item }}</li> </ul> <!-- 遍历对象 --> <ul> <li v-for="(value, key) in myObject">{{ key }}: {{ value }}</li> </ul>
- 计算属性：使用
computed属性创建计算属性。
computed: { fullName() { return this.firstName + ' ' + this.lastName; } }
- 方法：在组件中定义方法，可以使用
methods属性。
methods: { handleClick() { alert('按钮被点击了！'); } }
