Vue.js 使用了基于 HTML 的模板語法，允許開發者宣告式地將 DOM 系結至底層 Vue 實體的資料，所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規范的瀏覽器和 HTML 決議器決議，
在底層的實作上，Vue 將模板編譯成虛擬 DOM 渲染函式，結合回應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數減到最少，
插值：
（1）文本：
資料系結最常見的形式就是使用雙大括號（{{}}）的文本插值：
{{msg}} 將會被替換為對應資料物件上 msg 的值，無論何時，系結的資料物件上 msg 發生了改變，插值處的內容都會更新：
通過使用 v-once 指令，可以執行一次性插值，當資料改變時，插值內的值不會改變（對該節點上所有資料生效）：
（2）原始 HTML：
雙大括號會將資料解釋為普通文本，而非 HTML 代碼，為了輸出真正的 HTML，可以使用 v-html 指令：
在網站上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊，
（3）Attribute：
雙大括號語法不能作用在 HTML attribute 上，遇到這種情況應該使用 v-bind 指令：
在上面的例子中，如果 id 的值為 null、undefined、false，則 id attribute 甚至不會包含在渲染出來的 <span> 元素中：
（4）使用 JavaScript 運算式：
對于所有的資料系結，Vue 都提供了完全的 JavaScript 運算式支持
這些運算式會在所屬 Vue 實體的資料作用域下作為 JavaScript 被決議，有個限制就是，每個系結都只能包含單個運算式
指令：
指令 (Directives) 是帶有 v- 前綴的特殊 attribute，指令 attribute 的值預期是單個 JavaScript 運算式，指令的職責是，當運算式的值改變時，將其產生的連帶影響，回應式地作用于 DOM，例如：
這里，v-if 指令將根據運算式 state 的值的真偽來插入/移除 <p> 元素，
Vue 為 v-bind 和 v-on 指令提供了縮寫：
等價于：
等價于：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/213598.html
標籤：其他