文本插值{{}}

最基本的數據綁定形式。將 Vue 數據值（例如 msg）當作純文本，直接插入到畫面的指定位置，使用的是“Mustache”語法(雙大括號{{}})，僅能放在元素當中的內容，並不能放在元素的屬性(id、class...等等)中。

javascript
<div>cats: {{ catCount }}</div>

以上例子，在 data 回傳的物件中定義了 catCount 這個屬性，它就會成為一個響應式數據，就可以在模板中用 {{ catCount }} 來使用它。
限制：{{}}裡面不能寫if、for迴圈或變數宣告。

v-html (有可能遭到XSS攻擊，有安全疑慮)

v-html 是一個 Vue 指令，是固定的語法。
v-html="變數名稱" 中的變數名稱，則是一個 Vue 數據 (Data Property)，可以為它取任何想要的名稱。

跟{{ }}不同，{{ }} 是純文本，v-html 是 HTML 結構。

rawHtml

當作變數使用
當作結構使用

v-bind屬性綁定(：)

當您希望 HTML 元素的「屬性值」是根據 Vue 裡的「數據」來動態改變時，不能使用雙大括號，一定要使用綁定屬性，建立數據與屬性之間的單向響應式連結。

單向響應式連結：當數據改變會影響到屬性，但當屬性改變則不會影響到數據。

可將v-bind簡寫為：

若屬性名稱與綁定的 JavaScript 值的名稱相同，那麼可以再進一步簡化語法，省略屬性值：

<!-- 與 :id="id" 相同 -->
<div :id></div>

<!-- 這也同樣有效 -->
<div v-bind:id></div>

布林屬性綁定：

在HTML中，有些屬性不需要值，只需要「存在」就能發揮作用。這類屬性就是布林屬性。
disabled存在的時候，按鈕或輸入框被禁用。
readonly存在的時候，按輸入框，只讀不做其他事情。

當在Vue中使用:disabled="myData" 的v-bind綁定disabled屬性時，Vue 會檢查 myData 的值：
值為true時，Vue會在 HTML 元素上加入這個屬性。
值為false時，Vue 會將這個屬性從 HTML 元素上移除。
Vue根據數據true/false，來決定要在最終的 HTML 中「顯示」還是「隱藏」這個屬性名稱。

v-on 事件監聽 (@)

用於監聽 DOM 事件（例如點擊、輸入）。
語法：v-on:事件名稱="方法名稱"
簡寫： @click="handleClick"
當事件發生時，執行 Vue 組件 methods 裡定義的函數。