1.導入vue的庫
<script src="https://unpkg.com/vue"></script>
2.程序員萬年不變的helloworld
下面貼一下代碼（這里貼關鍵代碼，源碼見博客最后）
<div id="app">{{ msg }}</div>
var vm=new Vue({
el:"#app" , //id選擇器
data:{
msg:"helloworld"
}
});
l瀏覽器顯示的內容
控制臺可改變屬性值
這樣一個簡單的helloword就實現了，當然我們并不會僅僅滿足這些
3.指令的使用
- v-if
- v-else
- v-show
- v-for
- v-model
- v-on '@'
- v-bind ':'
- v-text
- v-html
- v-cloak
- v-ref
v-if
<div v-if="!flag">用來顯示的內容</div>
要注意的問題是v-if指令在做渲染的時候會有元素的卸載和裝載的過程，也就是會添加和刪除元素的操作，與之類似的有v-show指令下面會介紹到。（通過瀏覽器控制臺查看元素）
v-else
<div v-if="flag">用來顯示的內容</div>
<div v-else>else</div>
與v-if配合使用
v-show
<div v-show="!flag">用來顯示show的內容</div>
用法和v-if基本一致 但實現原理有區別，v-show只是改變元素css的display屬性，v-if則存在刪除和添加元素的操作，根據實際情況，若判斷的（如上述的flag）真假值會有很多頻率的變化選擇v-show為宜。
v-for
<ul>
<li v-for="(item,index) in items">
{{ index }}{{ item }}
</li>
</ul>
這里的items是一個數組類型，item是遍歷時的別名，index是當前元素的下標
v-model
<div> {{ msg }}</div>
<input type="text" v-model="msg">
v-model用于數據的雙向綁定
Vue 還提供了 v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。（摘自vue官網）
v-model的高級用法
<input type="checkbox"
v-model="msg" value="helloworld" name="msgcheck">
<input type="checkbox"
v-model="msg" value="hellovue" name="msgcheck">
注：此時的msg的類型需要時數組類型
v-on
<div v-on:click="fn" >用來測試v-on</div>
用來綁定事件，調用methods中的函數，其簡寫形式是'@'
v-bind
<div class="div" v-bind:class="{div:!flag}">
用于綁定標簽的屬性
- v-text
- v-html
也就是v-html會解析標簽
v-cloak
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不會顯示，直到編譯結束。
