代碼部分請(qǐng)下載本文代碼閱讀，代碼均能正常運(yùn)行并有詳細(xì)的注釋。
概述
無需置疑，Vue之所以能如此之火，主要受益于它是一個(gè)MVVM框架和它易學(xué)的文檔，幾乎所有覺得學(xué)習(xí)Vue有難度的開發(fā)者都是覺得組件腳手架等等不太好理解，但是這些都不是Vue的核心，Vue的核心表現(xiàn)在最易學(xué)的Vue指令和綁定，學(xué)好Vue指令和綁定基本就學(xué)好Vue的一大半了，把基礎(chǔ)核心的幾個(gè)知識(shí)點(diǎn)說完會(huì)做幾個(gè)完整的demo。
學(xué)習(xí)方法
學(xué)習(xí)編程切勿眼高手低，碰到簡(jiǎn)單的如Vue指令類似的知識(shí)千萬不要忽略掉，最好能把指令熟記于心，對(duì)于新手更是這樣，這樣在講解復(fù)雜知識(shí)點(diǎn)的時(shí)候就不用再重述這些簡(jiǎn)單的知識(shí)點(diǎn)了，當(dāng)你對(duì)于簡(jiǎn)單知識(shí)點(diǎn)爛熟于心的時(shí)候，你的注意力會(huì)集中在少數(shù)幾個(gè)最難的知識(shí)點(diǎn)上，更容易學(xué)好，所以讀者最好能對(duì)著下面的代碼和官方文檔把這些指令多理解多記憶，再學(xué)習(xí)后面的文章。
Vue指令的官方文檔
Vue指令大雜燴
<style>
[cloak] {
display: none;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
<!-- 插值就是把{{}}中的值當(dāng)做一個(gè)變量，然后再用vue實(shí)例data中對(duì)應(yīng)的變量值替換它 -->
插值用法: {{demo1}} <hr>
<!-- v-text指令 的功能和{{}}的功能一模一樣，只是為了方便把這個(gè)指令單獨(dú)拿出來用{{}}表示 -->
v-text用法: <span v-text = "demo2"></span> <hr>
<!-- v-html 類式 v-text， 只是把這個(gè)變量字符串取出來渲染成了對(duì)應(yīng)的html，而不是直接展示字符串 -->
v-html用法: <span v-html = "demo3"></span> <hr>
<!-- v-show對(duì)應(yīng)變量的值應(yīng)該是true或false,如果為true則自動(dòng)跟他添加display：block，否則添加display：none ,你只需要修改對(duì)應(yīng)變量的值就可以控制元素顯示隱藏-->
v-show用法：<span v-show = "demo4">這是v-show內(nèi)容，v-show的值控制這個(gè)元素顯示隱藏</span> <hr>
<!-- v-if和v-show的用法類式，v-if的值s是true直接添加到dom元素，否則從dom商remove掉，而不是修改display屬性，這樣操作比較消耗性能，如無必要請(qǐng)使用v-show -->
v-if用法： <span v-if = "demo5">這是v-if的內(nèi)容</span><hr>
<!-- v-else 必須跟v-if聯(lián)合使用，就像js中的else也必須跟if一起使用一樣，如果v-if元素的內(nèi)容顯示，則v-else元素remove掉，反之v-if元素remove掉，v-else元素添加到dom上 -->
v-else用法： <span v-if = "demo6">這是v-if的內(nèi)容</span> <span v-else >這是v-else的內(nèi)容</span> <hr>
<!-- v-else-if 必須跟v-if聯(lián)合使用，如果v-if的值為和v-else-if的值都為false則顯示v-else-if元素的內(nèi)容,請(qǐng)參考js中的if、else if、else理解 -->
v-else-if用法：<span v-if = "demo71">這是v-if的內(nèi)容</span> <span v-else-if = "demo72" >這是v-else-if的內(nèi)容</span> <span v-else> 這是v-else內(nèi)容</span><hr>
<!-- v-for 和js中的for in循環(huán)很類似，有了v-for你可以輕松復(fù)制多個(gè)當(dāng)前元素，有以下幾種寫法，前面兩種是for循環(huán)數(shù)組的，后兩種是循環(huán)json的，都有待index項(xiàng)和不帶的 -->
<!-- <div v-for = "item in items"> -->
<!-- <div v-for="(item, index) in items"> -->
<!-- </div> <div v-for="(val, key) in object"></div> -->
<!-- <div v-for="(val, key, index) in object"></div> -->
v-for用法1： <span v-for="(item, index) in items1">{{"這是第"+index + "個(gè)" + ":" + item}}</span> <br>
v-for用法2： <span v-for="(value,key,index) in items2" >{{"key:" +key + "|" +"value:" + value + "|" + "index:" + index + " " }}</span> <hr>
<!-- v-on 是綁定事件的方法，v-on:click="clickMethod"是c點(diǎn)擊事件，它可以簡(jiǎn)寫成@click ,它的值是methods中的方法 -->
v-on用法： <input type="text" name="name" v-on:keyup= "keyupEvent" style="border:solid 1px red;" /><hr>
<!-- v-bind 后面接的是html標(biāo)簽所帶的屬性，比如v-bind:value 可以省略為:value ，v-bind是單向數(shù)據(jù)綁定，意思是你改變了vue實(shí)例data中的數(shù)據(jù)，頁(yè)面dom中的值就會(huì)變化，反之不成立 -->
v-bind用法：<input v-bind:value="demo8" style="border:solid 1px red;" /> <input :value="demo8" style="border:solid 1px red;" /><span>改變input的值并不能修改vue實(shí)例中的值，所以另一個(gè)input不會(huì)修改</span><hr>
<!-- v-model 和 v-bind 類似，v-model是雙向數(shù)據(jù)綁定， 但是當(dāng)dom改變的時(shí)候vue實(shí)例data中的數(shù)據(jù)也會(huì)改變，所以叫雙向數(shù)據(jù)綁定 -->
v-model用法： <input v-model:value="demo9" style="border:solid 1px red;" /> <input v-model:value="demo9" style="border:solid 1px red;" /><span>改變input的值能修改vue實(shí)例中的值，所以另一個(gè)input會(huì)修改,這叫雙向數(shù)據(jù)綁定</span><hr>
<!-- 和html中的pre標(biāo)簽類似,{{item}}這種插值就會(huì)當(dāng)做字符串處理，并不會(huì)解析成變量 -->
v-pre用法：<span v-pre> {{demo10}}</span><hr>
<!-- 由于vue編譯渲染需要時(shí)間，在vue編譯完之前，{{item}}還是以字符串的形式表現(xiàn)出來的，v-cloak 配合[v-cloak]{display:none} 可以讓元素在vue編譯前先隱藏 -->
v-cloak用法：<span v-cloak>{{demo11}}</span> | <span>{{demo11}}</span><hr>
<!-- v-once 指令表示此元素只渲染一次，當(dāng)data中的數(shù)據(jù)值改變的時(shí)候這個(gè)元素不會(huì)再改變渲染 -->
v-once用法：
<span v-once>{{demo12}}</span>
</div>
<script>
//new 一個(gè)vue實(shí)例，Vue就能運(yùn)行了,Vue方法傳入?yún)?shù)為一個(gè)約定格式的json
new Vue({
//el表示這個(gè)vue實(shí)例的作用范圍為id為demo的元素內(nèi)
el:"#demo",
//data的值是一個(gè)json，存儲(chǔ)的都是要顯示到頁(yè)面上的值，可以理解成這里放的都是js變量(數(shù)據(jù))
data:{
//插值用法
demo1:"這是demo1",
//v-text用法：
demo2:"這是demo2",
//v-html用法
demo3:"<span style='color:red'>這是v-html字符串，它是一個(gè)span</span>",
//v-show用法：
demo4:true,
//v-if用法：
demo5:true,
//v-else用法：
demo6:false,
//v-else-if用法：
demo71:false,
demo72:true,
//v-for用法：
items1:["item1","itme2","item3"],
items2:{key1:"value1",key2:"value2",kay3:"value3"},
//v-bind用法：
demo8:"這是demo8",
//v-model用法：
demo9:"這是demo9",
//v-pre用法：
demo10:"這是demo10",
//v-cloak用法：
demo11:"這是demo11"
//v-once用法：
demo12:"這是deom12"
},
methods:{
//v-on用法：
keyupEvent:function() {
console.log("keyup被促發(fā)了");
}
},
});
</script>
