vue 模板語法

2022-04-11 14:50:37 字數 905 閱讀 1942

1. 要點

vue.js 使用了基於 html 的模板語法

也可以不用模板,直接寫渲染 (render) 函式,使用可選的 jsx 語法

2. 細節點

2.1 插值

2.1.1 文字     

「mustache」語法 (雙大括號)           }

message: }span>

2.1.2 html      

v-html 指令        v-html="rawhtml"                     不能使用 v-html 來復合區域性模板,因為 vue 不是基於字串的模板引擎

span>

擴充套件:v-text 與 v-html 相比,前者輸出轉義後字元,即未渲染的dom

2.1.3 特性(屬性)

v-bind 指令    v-bind:id="dynamicid"     

div>

2.1.4 js 表示式}}

}有個限制就是,每個繫結都只能包含單個表示式,所以下面的例子都不會生效。

} }}

2.2 指令   指令 (directives) 是帶有 v- 字首的特殊特性

2.2.1 普通指令   

顯示隱藏

現在你看到我了

一次繫結

message: }

...2.2.2 帶引數指令

...a>

...a>

2.2.3 動態引數       使用沒有空格或引號的表示式,或用計算屬性替代這種複雜表示式                  瀏覽器會把特性名全部強制轉為小寫

... a>

... a>

2.2.4 修飾符           以半形句號.指明的特殊字尾,用於指出乙個指令應該以特殊方式繫結。

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模板語法

vue.js使用基於html的模板語法,允許開發者宣告式地將dom繫結到底層vue例項。所有vue.js的模板都是合法的html,所以能被遵循規範的瀏覽器和html解析器解析。在底層的實現上,vue將模板編譯成虛擬dom渲染函式。結合響應系統,在應用狀態改變時,vue能智慧型地計算出重新渲染元件的最...