在這里，我們說模板就是特指表示HTML結(jié)構(gòu)的字符串，英文來說就是 template
一、展示內(nèi)容
1、表達(dá)式
{{ object.a }} // 表達(dá)式
{{ n+1 }} // 可以寫任何運(yùn)算
{{ fn(n) }} // 可以調(diào)用函數(shù) （一般在methods里面找到函數(shù)且調(diào)用）
如果值為 undefined 或 null 就不顯示，這是經(jīng)過Vue處理的
另一種寫法為
<div v-text="表達(dá)式"></div>
2、HTML內(nèi)容
假設(shè) data.x 值為 <strong>hi</strong>
<div v-html="x"></div> 即可顯示粗體的 hi
3、就想展示{{ n }} 的花括號(hào)的話
如：<div v-pre>{{ n }}</div>
就添加：v-pre 因?yàn)樗粫?huì)對模板進(jìn)行編譯
二、綁定屬性
1、綁定 src
<img v-bind:src="x" />
可以簡寫為：
<img :src="x" />
2、綁定對象
<div
:style="{border:'1px solid red', height:100}">
</div>
這里把'100px'寫成100，Vue默認(rèn)即為100為100px，當(dāng)需要100em時(shí)，自己需要寫100em
三、綁定事件
方法：v-on:事件名
可以縮寫為： @事件名
不同的三種方式：
例如：
1、
<button v-on:click="add">-1</button>
//點(diǎn)擊之后，Vue會(huì)運(yùn)行 add()
<button @click="add">-1</button>//這是縮寫
2、
<button v-on:click="xxx(1)">-1</button>
//點(diǎn)擊后，Vue會(huì)運(yùn)行 xxx(1)
PS：如果xxx(1)返回一個(gè)函數(shù)，怎么辦呢？
那就直接把xxx(1)的這個(gè)函數(shù)給賦值到一個(gè)變量，比如： 賦值給一個(gè)add，然后就直接寫add就好了。 但是不推薦這樣用。
3、
<button v-on:click="n+=1">xxx</button>
//點(diǎn)擊后，Vue會(huì)運(yùn)行 n+=1
總結(jié)：如果發(fā)現(xiàn)函數(shù)就加個(gè)括號(hào)調(diào)用，否則就直接運(yùn)行代碼
四、條件判斷
<div v-if="x>0">
x 大于 0
</div>
<div v-else-if="x===0">
x 為 0
</div>
<div v-else>
x 小于 0
</div>
五、循環(huán)
for(value,key) in 對象或數(shù)組
//數(shù)組例子
<ul>
<li v-for="(u,index) in users" :key="index"> //后面這個(gè) :key="xxx" 必須寫，不然會(huì)報(bào)錯(cuò)
索引:{{index}} 值:{{u.name}}
</li>
</ul>
//對象例子
<ul>
<li v-for="(value,name) in obj" :key="name"> //key后面最好放一個(gè)唯一性的值進(jìn)去
屬性名:{{name}} 屬性值:{{name}}
</li>
</ul>
六、顯示、隱藏
v-show
<div v-show="n%2===0">
n 是偶數(shù)
</div>
//真就顯示，假就不顯示
總結(jié)：
Vue模板的主要特點(diǎn)：
使用 XML 語法
使用{{}}插入表達(dá)式
使用v-html 、 v-on 、-v-bind 等指令操作DOM
使用v-if 、 v-for 等指令實(shí)現(xiàn)條件判斷和循環(huán)
