資料綁定
Vue 作為資料驅動畫面的框架,首先必須要了解如何將資料在畫面中展示出來。
傳統 Web 是透過後端的樣板引擎來進行資料與畫面的渲染,會導致前後端語法交雜在一起(前端 HTML 文件包含了後端樣板引擎的語法),而且渲染後要再次修改畫面,就只能透過獲取 DOM 的方法進行修改,來保持畫面與資料的一致。
Vue 的核心是一個響應式的資料綁定系統,建立綁定後,DOM 將和資料保持同步,這樣就不需要手動維護 DOM,使程式碼能夠更加簡潔易懂,提升效率。
文字 Text
最基礎的形式就是文字,使用雙大括號 {{}}
(Mustache 語法)。
語法範例:
|
|
|
|
Mustache 語法中的變數會去 Vue 實體中找。
文字除了使用 Mustache 語法,v-text
指令也可以渲染文字:
|
|
差異在於,使用 v-text
會取代原本元素的內容,而使用 Mustache 語法可以合併內容:
|
|
若同時使用,Mustache 語法會被 v-text
取代。
v-once
如果元素上所綁定的資料只需要渲染一次,之後不會在更新它,可以使用 v-once
指令,助於優化更新性能:
|
|
CodePen Demo:Vue 2.x - v-once
可用於低開銷的靜態元件上。
HTML 標籤
如果要將資料渲染成 HTML 標籤,就需要使用 v-html
指令。
|
|
使用 v-html
的元素,若有內容會被取代掉:
|
|
不過 v-html
可以不使用,盡可能不使用。
Attributes
Mustache 語法不能作用在 HTML atributes 上,這時可以使用 v-bind
指令:
|
|
更詳細的說明會在特性綁定介紹。
JavaScript Expressions
Vue.js 提供了完全的 JavaScript Expressions(表達式)支持。
舉例來說:
|
|
但要注意的是,只支持表達式,並不支持語句,舉例來說:
|
|
以上皆會拋出錯誤。條件判斷,可以改用三元運算子。
另外還有一點,除了某些 白名單中 中的全域變數外,不能使用其他自定義的全域變數。
也就是說,我們能直接使用 Date
:
|
|
是因為 Date
物件有在白名單內。
若是第三方函式庫(例如 jQuery 的 $
),或是自訂義全域物件,就無法在 Mustache 語法中使用。