Vue 初心者筆記 #1 呈現資料的幾種方法

我們來看如何建立一個 Vue 的應用程式,並透過 Mustache、v-html、v-text、v-model 等幾種不同的語法,將資料呈現到畫面上。

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

1
2
3
4
<div id="app">
{{ text }}
<div id="app2">{{ text2 }}</div>
</div>

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

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

Vue 呈現資料內容的方式

1. Mustache

Mustache 語法用於想要直接呈現字串的時候,它也可以直接輸入 JavaScript 表達式,像是字串相加、變數運算等等。

1
2
<span>{{ text + rawHtml }}</span>
<span>{{ number1 * number2 }}</span>

也可以在裡面使用函式:

1
<span>{{ text.split('').reverse().join('') }}</span>

2. v-html

剛才提到 Mustache 無法呈現 HTML 結構,如果想要呈現 HTML 結構,可以使用 v-html 這個語法,它可以直接輸出 HTML 標籤到畫面上呈現。

但要注意,在網頁上任意渲染 HTML 其實是很危險的,因為這很容易導致網站遭受 XSS 攻擊。
XSS 攻擊就是藉由像是 v-html 這種方式,直接把惡意程式碼寫入資料庫內,再渲染到網頁畫面上。
因此,我們盡量不要在讓使用者送出內容的地方使用 v-html,像是送出留言、送出訊息等輸入功能,避免受到 XSS 攻擊。

3. v-text

剛才提到 v-html 可以呈現 HTML 結構,而 v-text 顧名思義是只能透過文字的方式將資料插入標籤。

下方範例的 v-model 有綁定 <input>,因此可操控文字 (text) 資料。我們可以試著在輸入框中寫 HTML 標籤,會發現只有 v-html 會顯示出對應的標籤結果。

此外,如果在元素上加入 v-once 這個指令,該元素就會變成單次綁定,就是只會綁定第一次,當之後 <input> 改變時,呈現的內容並不會跟著改變。

4. v-model

上面範例中使用的 v-model,通常是用來綁定 <input><textarea><select> 等表單元素,讓資料內容與畫面達到雙向綁定的效果,當資料一有變化時,畫面就跟著改變。
這與 Vue 的另一個語法 v-bind 綁定感覺有點類似,但兩者概念不同。

雙向綁定的好處

過去使用像是 jQuery 等作法製作網站時,經常使資料分散,或者太過依賴 DOM 元素,導致產生維護不易而且不穩定等問題。
現在我們則是可以將所有的資料集中起來,當資料更新時,Vue 自動會幫我們更新頁面上的資料,這就是 Vue 主要在做的事情之一。

例如:
我透過 jQuery 去繪製畫面,當畫面有輸入資料的時候,我們需要在 jQuery 寫一些方法,去改變資料狀態,為什麼需要寫方法?因為資料與畫面是分離的。
然而,我在 Vue 使用像是 v-model 等語法綁定資料後,只要資料一有變動,這個 Modal 就會去控制 View(視圖)的變化,以資料狀態去操作畫面。

所以 Vue 與傳統的 jQuery 等作法不同的一個主要關鍵,就在於傳統作法是直接操作畫面上的 DOM 元素,而 Vue 在操作 DOM 元素的時候,是透過資料的狀態去變動它。

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