本篇文章帶大家了解一下Vue中的模板語法,介紹一下插值語法、指令語法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
Vue有很多模板語法特別好用,就是在HTML中寫一些Vue定義的一些模板語法,可以快速的展現(xiàn)數(shù)據(jù),綁定方法等。這也就是Vue上手很快的原因之一。
1. 模板的理解
我們先來理解理解什么是模板?
模板就是動態(tài)html頁面,這里面包含了一些js語法代碼
Vue的模板語法分為兩種,分別是:
- 【插值語法】雙大括號表達(dá)式 (“Mustache”語法)【一個】
- 【指令語法】指令(以v-開頭的自定義標(biāo)簽屬性)【很多】
1、插值語法:
- 功能:用于解析標(biāo)簽體內(nèi)容,向頁面輸出數(shù)據(jù)
- 寫法:
{{xxx}}
,xxx是js表達(dá)式,且可以直接讀取到data中的所有屬性,可以調(diào)用對象的方法 - 備注:里面寫js表達(dá)式:有返回值的js代碼,而不是js語句
2、指令語法:
- 功能:用于解析標(biāo)簽(包括:標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…..)
- 舉例:
v-bind:href="xxx"
或 簡寫為:href="xxx"
,xxx同樣要寫js表達(dá)式,且可以直接讀取到data中的所有屬性 - 備注:Vue中有很多的指令,且形式都是:
v-????
【