站長(zhǎng)資訊網(wǎng)本篇文章帶大家了解一下vue中的模板語(yǔ)法，介紹一下插值語(yǔ)法和指令語(yǔ)法，并聊聊容器和實(shí)例的關(guān)系，希望對(duì)大家有所幫助！
我要一步一步往上爬~大家好，今天我們來(lái)一起認(rèn)識(shí)一下模板語(yǔ)法這個(gè)概念！
一、模板語(yǔ)法
模板語(yǔ)法分為插值語(yǔ)法和指令語(yǔ)法兩種。
1.插值語(yǔ)法
插值語(yǔ)法是用兩個(gè)大括號(hào)來(lái)表示的，用于解釋標(biāo)簽體內(nèi)容，{{xxx}}里面的xxx必須要是js表達(dá)式，xxx就可以在被解析后去自動(dòng)讀取實(shí)例中定義的屬性了。（學(xué)習(xí)視頻分享：vuejs教程）
· 標(biāo)簽體：<>這個(gè)位置就是標(biāo)簽體<>，舉個(gè)栗子
<h3>插值語(yǔ)法</h3> [插值語(yǔ)法就是標(biāo)簽體] <h1>Hello,{{name}}</h1> [Hello,{{name}}就是標(biāo)簽體 ]
· js表達(dá)式：可以產(chǎn)生一個(gè)值的，舉幾個(gè)例子就明白了
- name
- 1+1
- ok ? 'YES' : 'NO'
· js代碼（語(yǔ)句）是一種特殊的js代碼，會(huì)產(chǎn)生一個(gè)值 js代碼（語(yǔ)句）：舉幾個(gè)比較常見(jiàn)的例子
- if(){}
- for(){}
2.指令語(yǔ)法
指令語(yǔ)法以v-開(kāi)頭，你應(yīng)該不會(huì)陌生，包括v-for、v-on、v-bind……
它的作用是解析標(biāo)簽（包括標(biāo)簽屬性，標(biāo)簽體內(nèi)容，綁定事件），功能就非常強(qiáng)大了，我們這里舉個(gè)v-bind的使用案例，它是用來(lái)綁定屬性的，v-on則是用于綁定事件：
<div id="app"> <h3>插值語(yǔ)法</h3> <h1>Hello,{{name}}</h1> <h3>指令語(yǔ)法</h3> <a v-bind:href="url">點(diǎn)我點(diǎn)我！</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"，雙引號(hào)的內(nèi)容也要寫(xiě)成js表達(dá)式，v-bind將href屬性和url進(jìn)行了綁定，這樣就可以正確的讀取data中url屬性https://www.baidu.com。
注意：如果不加v-bind，寫(xiě)成href="url"，那此時(shí)雙引號(hào)里的內(nèi)容就編程了字符串，給href賦值。
二、容器和實(shí)例的關(guān)系
容器和實(shí)例的關(guān)系是1:1,也就是一個(gè)實(shí)例只能綁定一個(gè)容器，下面兩種情況都是不可以的：
-
1個(gè)id為app的容器，2個(gè)el為app的實(shí)例：這樣在容器里的name被解析后，只會(huì)去第一個(gè)實(shí)例里面讀取data屬性
-
2個(gè)id為app的容器，1個(gè)el為app的實(shí)例：在代碼段位置處于后面的那個(gè)容器，就不會(huì)被解析出來(lái)
實(shí)際開(kāi)發(fā)場(chǎng)景里只會(huì)有一個(gè)Vue實(shí)例,因?yàn)闀?huì)配和組件一起構(gòu)建代碼，所以實(shí)例里面的代碼不會(huì)特別復(fù)雜。
（學(xué)習(xí)視頻分享：web前端）
