Vue作為現(xiàn)在最火的框架之一析桥，它的入門相比來說還是比較簡單的。這里我整理了Vue的基礎(chǔ)語法和使用案例艰垂，希望對大家學(xué)習(xí)Vue有一定的幫助泡仗！
一、模板語法
1.差值
-文本
數(shù)據(jù)綁定最常見的形式就是Mustache語法（雙大括號）的文本差值猜憎。
{{}}標(biāo)簽將會被替換成對應(yīng)數(shù)據(jù)對象上對應(yīng)屬性的值娩怎。
只要綁定的數(shù)據(jù)對象上相對應(yīng)的屬性發(fā)生改變，插值處的內(nèi)容就會更新
<body>
<div id="app">
{{msg}} -- {{num}} -- {{flag}} -- {{obj.a}} -- {{arr[1]}} -- {{tip}}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello vue",
num:10,
flag:true,
obj:{
a:3
},
arr:[0,"1",false],
tip:"<mark>tip</mark>"
}
})
</script>
從上述運(yùn)行結(jié)果可以看出：
1.{{}}的屬性時(shí)在vue數(shù)據(jù)對象data中定義的
2.屬性值可以任意數(shù)據(jù)類型胰柑，都能在頁面上顯示出來
3.{{}} 不能解析標(biāo)簽
-純html
雙大括號會將數(shù)據(jù)解釋為普通文本截亦，而非 HTML 代碼。為了輸出真正的 HTML柬讨，你需要使用 v-html 指令
v-html 相當(dāng)于原生js中的 innerHTML 的功能,相當(dāng)于jQuery中的().html()
v-text 相當(dāng)于原生js中的 innerText 的功能,相當(dāng)于 jQuery 中的().text()
,一般會用 文本 形式代替 {{ msg }}
v-once 只能執(zhí)行一次性的插值崩瓤，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會更新踩官。
下面用個(gè)小案例比較一下：
<body>
<div id="app">
<div v-once="msg">哈哈</div>
<div v-html="msg">哈哈</div>
<div v-text="msg">哈哈</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"<mark>hello</mark>"
}
})
</script>
運(yùn)行結(jié)果如下：
根據(jù)運(yùn)行結(jié)果可總結(jié)：
1.v-once確實(shí)是指定一次的插值却桶，數(shù)據(jù)改變也不會發(fā)生變化。
2.v-html可以解析標(biāo)簽并獲取最新數(shù)據(jù)
3.v-text不能解析標(biāo)簽蔗牡，但可獲取最新數(shù)據(jù)
-表達(dá)式
Vue提供了對js表達(dá)式的支持颖系，但是每個(gè)綁定都只能包含單個(gè)表達(dá)式。
下面看個(gè)小例子
<body>
<div id="app">
{{ sex === 0 ? "女" : "男" }} -- {{ msg.split("").reverse().join("") }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
sex:1,
msg:"hello"
}
})
</script>
根據(jù)運(yùn)行結(jié)果可總結(jié)：
1.vue支持像三目這種單個(gè)表達(dá)式辩越、字符操作等
2.{{if(ok) return "ok"}}這種語句是錯誤的
-指令
指令 是帶有 v- 前綴的特殊特性嘁扼。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)黔攒，將其產(chǎn)生的連帶影響趁啸，響應(yīng)式地作用于 DOM。
input中使用v-model 亏钩，就會把它的值當(dāng)做是輸入框的value值
標(biāo)簽上v-html莲绰，就會把它的值插入到該標(biāo)簽內(nèi)部 （v-text也是如此）（以上用法已有介紹）
v-if 用來做條件判斷 （做條件判斷的還有v-else-if v-else v-show）
v-for 遍歷循環(huán)使用
v-on 綁定事件
v-bind 綁定屬性
不常用的：
v-slot
v-pre
v-cloak
v-once
v-if欺旧，v-show用法:
<body>
<div id="app">
<div v-if="flag">如果為真時(shí)顯示</div>
<div v-else>如果為假時(shí)顯示</div>
{{ count }}
<div v-if="count<3">0-3</div>
<div v-else-if="count<6">3-6</div>
<div v-else-if="count<9">6-9</div>
<div v-else>9-10</div>
<div v-show="flag">為真顯示</div>
<div v-show="!flag">為假顯示</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:true,
count:Math.random()*10
}
})
</script>
雖然v-if和v-show功能相同姑丑，但是看頁面結(jié)構(gòu)會發(fā)現(xiàn)不同
總結(jié)v-if和v-show的區(qū)別：
1.v-if是“真正”的條件渲染，它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)谋讳N毀和重建辞友。
2.v-if是惰性的栅哀，如果初始渲染條件為假震肮，則什么也不做，直到條件變?yōu)檎鏁r(shí)才渲染
3.v-show 不管初始條件為真還是為假留拾，元素都會被渲染戳晌，為假時(shí)就是設(shè)置css樣式為display：none。
總的來說痴柔，v-if是渲染還是不渲染的問題——運(yùn)行時(shí)消耗更大
v-show是顯示和隱藏的問題——初始渲染消耗更大
如果要頻繁的切換沦偎，一般我們要使用v-show；運(yùn)行的條件很少改變的話咳蔚，我們一般使用v-if
-綁定屬性
綁定屬性v-bind用于標(biāo)簽的屬性前豪嚎，屬性值為一個(gè)變量。
適合場景舉例：
1.img 的 src 屬性(從服務(wù)器獲取了地址)
2.組件間的傳值
下面用個(gè)小例子來學(xué)習(xí)一下：
<body>
<div id="app">
<div test="username"></div>
<div v-bind:test="username"></div>
<button @click="aIndex=0">000</button>
<button @click="aIndex=1">111</button>
<button @click="aIndex=2">222</button>
<ul>
<li v-bind:class="aIndex===0?'active':''">000</li>
<li v-bind:class="aIndex===1?'active':''">111</li>
<li v-bind:class="aIndex===2?'active':''">222</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
username:"張三",
aIndex:0
}
})
</script>
運(yùn)行結(jié)果：
查看頁面結(jié)構(gòu)可見：
從上面案例可總結(jié)：
1.當(dāng)屬性值為變量應(yīng)使用v-bind谈火。不然屬性值就是定值侈询。
2.結(jié)合了點(diǎn)擊事件和綁定屬性實(shí)現(xiàn)選中樣式的變化
