Vue學習之路第二篇：插值表達式

要開始寫Vue的功能了，是不是很激動呢！開始吧！

1、首先建立一個html頁面，導入Vue js包

　　 1 <script type="text/javascript" src="js/vue.min.js"></script> 

2、架包導入之後，我們需要創建一個Vue對象，用來綁定元素節點，從而達到操作元素的目的。即一個Vue對象必須要綁定一個元素節點，且為根節點。

1 <div id="app">
2         <p> {{ msg }} </p>
3 </div>

1 var vm = new Vue({
2       el : "#app",
3       data : {
4            msg : "Hello Vue"
5        }
6 });

大家可以看到，通過new的方式創建了一個Vue對象，對象包含了 el 和 data兩個屬性(這一篇只涉及這兩個屬性)，"el" 是用來綁定元素節點的，對應的是id為app的元素節點，由於是id，所以不要忘記 "#" 號哦。"data" 是Vue對象里綁定的數據，採用的 key-value形式定義。展示數據的時候採用的是插值表達式 “{{ }}”。

怎麼樣，是不是很簡單？ 

插值表達式問題點：

大家功能實現之後，如果頻繁刷新頁面或者通過瀏覽器調試工具把網速模擬調的很慢的話，會發現一個現象：頁面會先顯示" {{ msg }} "內容，然後才會顯示“Hello Vue”，對於這個問題下篇會講解解決辦法並介紹更多的Vue內容。

每天進步一點點！