Vue3 使用基於 HTML 的模板語法，使我們能夠聲明式地將其元件實例的資料綁定到呈現的 DOM 上。 所有的 Vue 範本都是在語法層面合法的 HTML，可以被符合規範的瀏覽器和 HTML 解析器解析。
在底層機制中，Vue 會將模板編譯成高度最佳化的 JavaScript 程式碼。 結合響應式系統，當應用程式狀態變更時，Vue 能夠智慧地推導出需要重新渲染的元件的最少數量，並應用最少的 DOM 操作。
如果你對虛擬 DOM 的概念比較熟悉，並且偏好直接使用 JavaScript，你也可以結合可選的 JSX 支援直接手寫渲染函數而不採用模板。 但請注意，這將不會享受到和模板同等級的編譯時最佳化。
v-bind
在 Vue 中，(雙大括號) 只能用於文字內插。 為了給 attribute 綁定一個動態值，需要使用 v-bind 指令
<div v-bind:id="dynamicId"></div>v-bind可以把它省略，因此時常看到有人將上述的範例改寫成以下
<div :id="dynamicId"></div>練習
試著把一個動態的class綁定加到這個<h1>上，並使用titleClass的ref作為它的值。如果綁定正確，文字將會變成紅色。
答案
<script setup>
import { ref } from 'vue'
const titleClass = ref('title')
</script>
<template>
<h1 :class="titleClass">Make me red</h1>
</template>
<style>
.title {
color: red;
}
</style>解答
