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('按鈕被點擊了！');}
}
