建立起一個 Vue 的應用程式後，我們有 Mustache、v-html、v-text、v-model 這好幾種不同的語法可以將資料呈現到畫面上，這些方式有什麼差別，使用時又有哪些要注意的地方哩。
在開始之前，先特別提一下 Vue 的應用程式不可以使用「巢狀」的方式去建立，如果使用巢狀的方式，裡面的 Vue 應用程式就等同於是無效的。
錯誤範例如下：
<div id="app">
{{ text }}
<div id="app2">{{ text2 }}</div>
</div>
另外，我們通常只會建立一個 Vue 應用程式，但如果要建立兩個在同一個頁面上當然也沒問題！
但要特別注意不能建立「巢狀」的結構。正確範例如下：
<div id="app">{{ text }}</div>
<div id="app2">{{ text2 }}</div>
Mustache
Mustache 語法用於想要「直接呈現字串」的時候，而且可以直接輸入 JavaScript 表達式，像是字串相加、變數運算等等。
<span>{{ text + rawHtml }}</span> <span>{{ number1 * number2 }}</span>
也可以在裡面使用函式：
<span>{{ text.split('').reverse().join('') }}</span>
v-html
Mustache 無法呈現 HTML 結構，如果想要呈現 HTML 結構則可以使用 v-html 這個語法，它可以將 HTML 標籤輸出到畫面上呈現。
但要注意，在網頁上任意渲染 HTML 其實是很危險的，因為這很容易導致網站遭受 XSS 攻擊。XSS 攻擊就是藉由像是 v-html 這種方式，直接把惡意程式碼寫入資料庫內，再渲染到網頁畫面上。
因此我們盡量不要在「讓使用者送出內容」的地方使用 v-html，像是送出留言、送出訊息等輸入功能，避免受到 XSS 攻擊。
v-text
剛才提到的 v-html 可以呈現 HTML 結構，那麼 v-text 顧名思義就是只能透過「文字」的方式將資料插入標籤。
v-model
v-model 通常是用來綁定 input、textarea、select 等表單元素，讓資料內容與畫面達到「雙向綁定」的效果，當資料一有變化時，畫面就跟著改變。
這與 Vue 的另一個語法 v-bind 綁定感覺有點類似，但兩者概念不同。
另外，如果在元素上加入 v-once 這個指令，該元素就會變成「單次綁定」，意思就是只會綁定第一次，當之後 input 改變時，呈現的內容並不會跟著改變。
什麼是雙向綁定
過去使用像是 jQuery 等作法製作網站時，經常使資料分散，或者太過依賴 DOM 元素，導致產生維護不易而且不穩定等問題。現在我們則是可以將所有的資料集中起來，當資料更新時 Vue 自動會幫我們更新頁面上的資料，這就是 Vue 主要在做的事情之一。
例如：我透過 jQuery 去繪製畫面，當畫面有輸入資料的時候，我們需要在 jQuery 寫一些方法去改變資料狀態。為什麼需要寫方法呢？因為資料與畫面是分離的。
然而，我在 Vue 使用像是 v-model 等語法綁定資料後，只要資料一有變動，這個 Modal 就會去控制視圖 (View) 的變化，以資料狀態去操作畫面 🤝
所以 Vue 與傳統 jQuery 做法不同的主要關鍵之一，就是傳統作法是直接操作畫面上的 DOM 元素，而 Vue 在操作 DOM 元素的時候，是透過資料的狀態去變動它。
以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫