Vue模板語法

2021-09-29 13:40:43 字數 2123 閱讀 2008

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指令。

在布林特性的情況下,它們的存在即暗示為truev-bind工作有所不同。

button

isdisabledbtn的值是nullundefinedfalse時,則disabled特性甚至不會被包含在渲染出來的元素中。

迄今為止模板都只繫結簡單的屬性鍵值,但實際上對於所有資料繫結,vue.js都提供了完全的js表示式支援。

button

js表示式會在所屬vue例項的資料作用域下座位js被解析,不過每個繫結都只能包含單個表示式。

# 語句無法解析

}# 流程控制無法生效

}}

模板表示式都被放在沙盒中,只能訪問全域性變數的乙個白名單,如mathdate。不要在模板表示式中試圖訪問使用者定義的全域性變數。

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 雙大括號 的文字...