vue中的模板語法是什么

本文小編為大家詳細(xì)介紹“vue中的模板語法是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue中的模板語法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

一、模板語法

模板語法分為插值語法和指令語法兩種。

1.插值語法

插值語法是用兩個大括號來表示的，用于解釋標(biāo)簽體內(nèi)容，{{xxx}}里面的xxx必須要是js表達(dá)式，xxx就可以在被解析后去自動讀取實例中定義的屬性了。（學(xué)習(xí)視頻分享：vuejs教程）

· 標(biāo)簽體：<>這個位置就是標(biāo)簽體<>，舉個栗子

<h4>插值語法</h4> [插值語法就是標(biāo)簽體]
<h2>Hello,{{name}}</h2> [Hello,{{name}}就是標(biāo)簽體 ]

· js表達(dá)式：可以產(chǎn)生一個值的，舉幾個例子就明白了

• name

• 1+1

• ok ? 'YES' : 'NO'

· js代碼（語句）是一種特殊的js代碼，會產(chǎn)生一個值 js代碼（語句）：舉幾個比較常見的例子

• if(){}

• for(){}

2.指令語法

指令語法以v-開頭，你應(yīng)該不會陌生，包括v-for、v-on、v-bind......

它的作用是解析標(biāo)簽（包括標(biāo)簽屬性，標(biāo)簽體內(nèi)容，綁定事件），功能就非常強(qiáng)大了，我們這里舉個v-bind的使用案例，它是用來綁定屬性的，v-on則是用于綁定事件：

<div id="app">
            <h4>插值語法</h4>
            <h2>Hello,{{name}}</h2>
            <h4>指令語法</h4>
            <a v-bind:href="url">點我點我！</a>
            <li v-for="(item,index) in student.name">
                <label>{{index+1}}. {{item.toUpperCase() }}</label>
            </li>
        </div>

        <script >
            new Vue({
                el:'#app' ,
                data:{
                    name:'三年二班',
                    url:"https://www.baidu.com",
                    student:{
                        name:["Sam","Bob","Alice"]
                    }
                }
            })

結(jié)果如下圖所示：

這里的v-bind:href="url"，雙引號的內(nèi)容也要寫成js表達(dá)式，v-bind將href屬性和url進(jìn)行了綁定，這樣就可以正確的讀取data中url屬性https://www.baidu.com。

注意：如果不加v-bind，寫成href="url"，那此時雙引號里的內(nèi)容就編程了字符串，給href賦值。

二、容器和實例的關(guān)系

容器和實例的關(guān)系是1:1,也就是一個實例只能綁定一個容器，下面兩種情況都是不可以的：

• 1個id為app的容器，2個el為app的實例：這樣在容器里的name被解析后，只會去第一個實例里面讀取data屬性

• 2個id為app的容器，1個el為app的實例：在代碼段位置處于后面的那個容器，就不會被解析出來

實際開發(fā)場景里只會有一個Vue實例,因為會配和組件一起構(gòu)建代碼，所以實例里面的代碼不會特別復(fù)雜。

讀到這里，這篇“vue中的模板語法是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。