Vue筆記之模板語法

2022-02-06 13:09:04 字數 1490 閱讀 4859

比較常用的就是插值,插值就是}用兩個大括號包起來的乙個變數,顯示的時候會將雙大括號標籤替換為這個變數的值。

基本的用法就是:

}

當繫結的message變數的值發生了變化時,此處也會發生相應的變化。

使用v-once的話可以使得資料繫結只發生一次,在渲染頁面的時候會使用這個變數的值來替換掉雙括號標籤,再之後即使變數的值發生了變化這裡也不會再變化了,使用方法:

}

但是因為v-once是新增在元素標籤上的所以會對標籤上的所有插值都有效,如果只想讓乙個元素下的某乙個插值只渲染一次而不影響同標籤元素下的其它插值,那麼可以在變數前加個*號來表示只渲染一次:

}

比如有的時候需要將一段html文字直接插入到頁面中,vue提供了乙個v-html指令可以在元素上渲染html,元素的內容將被v-html的內容替換掉,同時其中的繫結資料將失效。

data: ,

})

渲染html是一種不安全的行為,如果非要進行渲染的話至少也應該做過xss轉義之類的處理。

雙括號}的形式不能在元素的屬性中使用,要想將元素的屬性與某個變數繫結應當使用v-bind:foo="bar",用法如下:

a button
繫結的插值或者v-bind並不一定是變數名,它們可以是乙個簡單的js表示式,這個js表示式的返回值會被使用,但是需要注意的是這裡只可以使用一句單個的表示式。

這個是宣告語句,並不是表示式,所以不會生效

}
下面這個也不會生效,如果想使用if的話應該使用三元表示式

}}
下面這個三元表示式會生效:

}
指令是帶有v-字首的屬性,指令的職責是當表示式的值改變時將某些行為應用到dom上。

比如:

a button
是根據cansee的變化來切換這個按鈕的可見性。

引數乙個指令能夠接受乙個引數,在指令後面使用:號緊跟引數來指明,比如使用v-bind繫結元素屬性時v-bind:foo='bar',比如當使用v-on繫結單擊事件時v-on:click。

修飾符修飾符是使用.指明的特殊字尾,用於指出乙個指令應當使用特殊方式繫結。

表示當觸發submit的時候呼叫event.preventdefault()來抑制表單提交行為。過濾器設計的目的是用於文字轉換,故只能放在最後用於對前面表示式的結果進行處理。

過濾器函式可以在vue的元件中使用filters來宣告,傳入的第乙個引數是表示式的值

new vue(

}})

過濾器可以串聯。

}
過濾器可以接受引數

}
有些指令會被頻繁的時候,如果老是寫全名的話可能會嫌麻煩,vue提供了縮寫。

v-bind

全:

縮寫:

v-on

全:

縮寫:

1. 官方文件 文

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能智慧型地計算出重新渲染元件的最...