vue.js使用基於html的模板語法,允許開發者宣告式地將dom繫結到底層vue例項。所有vue.js的模板都是合法的html,所以能被遵循規範的瀏覽器和html解析器解析。
在底層的實現上,vue將模板編譯成虛擬dom渲染函式。結合響應系統,在應用狀態改變時,vue能智慧型地計算出重新渲染元件的最小代價並應用到dom操作上。
如果你熟悉虛擬dom並偏愛js的原始力量,你也可不用模板直接寫渲染(render)函式,使用可選的jsx語法。
資料繫結最常見的形式是使用"mustache"(小鬍子語法)語法(雙大括號)的文字插值:
mustache將會被替代為對應資料物件上的message屬性的值,無論何時繫結的資料物件上message屬性發生了改變,插值的文字內容都會更新。}
使用}
v-once
指令也能執行一次性地插值,但是當資料改變時插值處的內容不會更新,請留心這會影響到該節點上所有的資料繫結。
mustache雙大括號將資料解釋為普通文字,而非html**。為了輸出真正的html,需使用v-html
指令。
注意不能使用
v-html
來復合區域性模板,因為vue不是基於字串的模板引擎。反之對於使用者介面(ui),元件更適合作為可重用和可組合的基本單位。
注意站點上動態渲染任意html可能非常危險,很容易導致xss攻擊,請只對可信內容使用html插值,絕不要對使用者提供的內容使用插值。
mustache 語法不能作用在html特性上,遇到這種情況應該使用v-bind
指令。
在布林特性的情況下,它們的存在即暗示為
true
,v-bind
工作有所不同。
當
button
isdisabledbtn
的值是null
、undefined
、false
時,則disabled
特性甚至不會被包含在渲染出來的
元素中。
迄今為止模板都只繫結簡單的屬性鍵值,但實際上對於所有資料繫結,vue.js都提供了完全的js表示式支援。
js表示式會在所屬vue例項的資料作用域下座位js被解析,不過每個繫結都只能包含單個表示式。
button
模板表示式都被放在沙盒中,只能訪問全域性變數的乙個白名單,如# 語句無法解析
}# 流程控制無法生效
}}
math
和date
。不要在模板表示式中試圖訪問使用者定義的全域性變數。
v-if
指令將根據表示式seen
的值的真假來插入/移除
元素。
指令能接收乙個「引數」,在指令名稱後以冒號表示。
href
是引數,告知v-bind
指令將該元素的href
屬性與表示式url
的值繫結。
v-on
指令用於監聽dom事件,其引數是監聽的事件名稱。
修飾符(modifiers)是以半形句號.
指明的特殊字尾,用於指出乙個指令應該以特殊方式繫結。
...
他們看起來可能與普通的html略有不同,但...
...
:
和@
對於特性名來說都是合法字元,在所有支援vue.js的瀏覽器都能被正確地解析。而且它們不會出現在最終渲染的標記中。縮寫語法是完全可選的,但隨著更深入地了解它們的行為,你會慶幸擁有它們。 VUE 模板語法
message span 雙大括號裡面的內容會被替換成msg的變數值,在msg變數值改變的時候會自動更新html裡的內容 只輸出純文字文字,不會有html效果,為了輸出html需要用到v html指令 using mustaches p using v html directive v html r...
Vue模板語法
插值v html指令 我們可以在js裡自定義html 屬性v bind 簡寫 我們可以可以指定標籤的一些屬性給它們賦值,還有v model也是賦值,但是它會影響整個所有它定義的那個資料,而不只是乙個 v bind 與v model的區別 v model是做資料雙向繫結的指令 v bind只是將對應的...
vue 模板語法
lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head class1 style src libs vue.js script class 雙大括號 的文字...