在開始之前,先特別提一下 Vue 的應用程式不可以使用巢狀的方式去建立,如果使用巢狀的方式,裡面的 Vue 應用程式就等同於是無效的。

錯誤範例如下:

<div id="app">
  {{ text }}
  <div id="app2">{{ text2 }}</div>
</div>

另外,我們通常只會建立一個 Vue 應用程式,但如果要建立兩個在同一個頁面上當然也沒問題!
但要特別注意不能建立巢狀的結構。正確範例如下:

<div id="app">{{ text }}</div>
<div id="app2">{{ text2 }}</div>

Vue 呈現資料內容的方式

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 元素的時候,是透過資料的狀態去變動它。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫