程式碼部分請下載本文程式碼閱讀，程式碼均能正常執行並有詳細的註釋。
概述
無需置疑，Vue之所以能如此之火，主要受益於它是一個MVVM框架和它易學的文件，幾乎所有覺得學習Vue有難度的開發者都是覺得元件腳手架等等不太好理解，但是這些都不是Vue的核心，Vue的核心表現在最易學的Vue指令和繫結，學好Vue指令和繫結基本就學好Vue的一大半了，把基礎核心的幾個知識點說完會做幾個完整的demo。
學習方法
學習程式設計切勿眼高手低，碰到簡單的如Vue指令類似的知識千萬不要忽略掉，最好能把指令熟記於心，對於新手更是這樣，這樣在講解複雜知識點的時候就不用再重述這些簡單的知識點了，當你對於簡單知識點爛熟於心的時候，你的注意力會集中在少數幾個最難的知識點上，更容易學好，所以讀者最好能對著下面的程式碼和官方文件把這些指令多理解多記憶，再學習後面的文章。
Vue指令的官方文件
Vue指令大雜燴
<style>
[cloak] {
display: none;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
<!-- 插值就是把{{}}中的值當做一個變數，然後再用vue例項data中對應的變數值替換它 -->
插值用法: {{demo1}} <hr>
<!-- v-text指令 的功能和{{}}的功能一模一樣，只是為了方便把這個指令單獨拿出來用{{}}表示 -->
v-text用法: <span v-text = "demo2"></span> <hr>
<!-- v-html 類式 v-text， 只是把這個變數字串取出來渲染成了對應的html，而不是直接展示字串 -->
v-html用法: <span v-html = "demo3"></span> <hr>
<!-- v-show對應變數的值應該是true或false,如果為true則自動跟他新增display：block，否則新增display：none ,你只需要修改對應變數的值就可以控制元素顯示隱藏-->
v-show用法：<span v-show = "demo4">這是v-show內容，v-show的值控制這個元素顯示隱藏</span> <hr>
<!-- v-if和v-show的用法類式，v-if的值s是true直接新增到dom元素，否則從dom商remove掉，而不是修改display屬性，這樣操作比較消耗效能，如無必要請使用v-show -->
v-if用法： <span v-if = "demo5">這是v-if的內容</span><hr>
<!-- v-else 必須跟v-if聯合使用，就像js中的else也必須跟if一起使用一樣，如果v-if元素的內容顯示，則v-else元素remove掉，反之v-if元素remove掉，v-else元素新增到dom上 -->
v-else用法： <span v-if = "demo6">這是v-if的內容</span> <span v-else >這是v-else的內容</span> <hr>
<!-- v-else-if 必須跟v-if聯合使用，如果v-if的值為和v-else-if的值都為false則顯示v-else-if元素的內容,請參考js中的if、else if、else理解 -->
v-else-if用法：<span v-if = "demo71">這是v-if的內容</span> <span v-else-if = "demo72" >這是v-else-if的內容</span> <span v-else> 這是v-else內容</span><hr>
<!-- v-for 和js中的for in迴圈很類似，有了v-for你可以輕鬆複製多個當前元素，有以下幾種寫法，前面兩種是for迴圈陣列的，後兩種是迴圈json的，都有待index項和不帶的 -->
<!-- <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 + "個" + ":" + 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點選事件，它可以簡寫成@click ,它的值是methods中的方法 -->
v-on用法： <input type="text" name="name" v-on:keyup= "keyupEvent" style="border:solid 1px red;" /><hr>
<!-- v-bind 後面接的是html標籤所帶的屬性，比如v-bind:value 可以省略為:value ，v-bind是單向資料繫結，意思是你改變了vue例項data中的資料，頁面dom中的值就會變化，反之不成立 -->
v-bind用法：<input v-bind:value="demo8" style="border:solid 1px red;" /> <input :value="demo8" style="border:solid 1px red;" /><span>改變input的值並不能修改vue例項中的值，所以另一個input不會修改</span><hr>
<!-- v-model 和 v-bind 類似，v-model是雙向資料繫結， 但是當dom改變的時候vue例項data中的資料也會改變，所以叫雙向資料繫結 -->
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例項中的值，所以另一個input會修改,這叫雙向資料繫結</span><hr>
<!-- 和html中的pre標籤類似,{{item}}這種插值就會當做字串處理，並不會解析成變數 -->
v-pre用法：<span v-pre> {{demo10}}</span><hr>
<!-- 由於vue編譯渲染需要時間，在vue編譯完之前，{{item}}還是以字串的形式表現出來的，v-cloak 配合[v-cloak]{display:none} 可以讓元素在vue編譯前先隱藏 -->
v-cloak用法：<span v-cloak>{{demo11}}</span> | <span>{{demo11}}</span><hr>
<!-- v-once 指令表示此元素只渲染一次，當data中的資料值改變的時候這個元素不會再改變渲染 -->
v-once用法：
<span v-once>{{demo12}}</span>
</div>
<script>
//new 一個vue例項，Vue就能執行了,Vue方法傳入引數為一個約定格式的json
new Vue({
//el表示這個vue例項的作用範圍為id為demo的元素內
el:"#demo",
//data的值是一個json，儲存的都是要顯示到頁面上的值，可以理解成這裡放的都是js變數(資料)
data:{
//插值用法
demo1:"這是demo1",
//v-text用法：
demo2:"這是demo2",
//v-html用法
demo3:"<span style=`color:red`>這是v-html字串，它是一個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被促發了");
}
},
});
</script>