什么是vue?

Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。Vue盡可能通過(guò)簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

vue是由尤雨溪開(kāi)發(fā)的一款基于MVVM的框架，M->模型，V->視圖， 也就是說(shuō)模型數(shù)據(jù)改變了，視圖也跟著改變， 視圖內(nèi)容改變，模型內(nèi)容也跟著改變， 業(yè)界稱(chēng)之為雙向綁定，或者說(shuō)雙向數(shù)據(jù)驅(qū)動(dòng)，基于此特點(diǎn)，學(xué)習(xí)這個(gè)框架，跟jquery完全不同， 不要用DOM的思想來(lái)學(xué)習(xí)vue, 在vue里面幾乎不需要用到DOM操作，一切都是基于數(shù)據(jù)驅(qū)動(dòng).

如何使用vue?

現(xiàn)在vue已經(jīng)發(fā)布了2版本，為什么學(xué)1版本，如果想要深入的學(xué)習(xí)vue，了解和掌握個(gè)版本的異同是很有必要的。要想使用vue,首先必須引入vue，在客戶(hù)端(瀏覽器)可以通過(guò)script標(biāo)簽引入，如果是服務(wù)端，通過(guò)import引入

一個(gè)基本的vue程序有哪些部分組成？

就像初學(xué)者學(xué)習(xí)jquery一樣，一個(gè)基本的jquery程序， 有 domReady, 選擇器，this綁定，事件綁定，屬性和樣式修改組成的，而vue的基本結(jié)構(gòu)如下：

window.onload = function () {      var c = new Vue({        el: '#box', //相當(dāng)于選擇器        data: {          content: 'ghostwu tell you how to learn vue',          msg : 'vue中的數(shù)據(jù)1',          msg2 : 'vue中的數(shù)據(jù)2'        }      });}

這段簡(jiǎn)單的代碼，可以實(shí)現(xiàn)最基本的數(shù)據(jù)讀取和顯示功能. 

1，使用vue，先要實(shí)例化一個(gè)vue

2,構(gòu)造函數(shù)中，傳入字面量對(duì)象， data后面也是一個(gè)字面量對(duì)象，里面的數(shù)據(jù)可以自定義，按照json的格式

3,el: 表示要把data中的數(shù)據(jù)顯示在 el 后面跟的元素下面， 比如上面的例子， 就是把data中, content, msg, msg2的數(shù)據(jù)顯示在id 為 box的元素下面

具體怎么讀取呢？

<div id="box">  {{content}}  <br>  {{msg}}  <br>  {{msg2}}</div>

{{data中定義的鍵}}， 如{{content}} 讀取的就是vue實(shí)例 data里面的 content定義的值，所以{{content}}輸出 ghostwu tell you how to learn vue， 同理{{msg}}輸出vue中的數(shù)據(jù)1 ,

{{msg2}}輸出 vue中的數(shù)據(jù)2

如果我們需要讓數(shù)據(jù)顯示在不同的元素下面，可以定義多個(gè)vue實(shí)例

window.onload = function () {      var c = new Vue({        el: '#box', //相當(dāng)于選擇器        data: {          content: 'ghostwu tell you how to learn vue',          msg : 'vue中的數(shù)據(jù)1',          msg2 : 'vue中的數(shù)據(jù)2'        }      });      var c2 = new Vue({        el: '#box2',        data: {          msg: 'this is a paragraphy'        }      });      var c3 = new Vue({        el: '#box3',        data: {          msg2: 'this is box3'        }      });    }<p id="box2">{{msg}}</p><div id="box">  {{content}}  <br>  {{msg}}  <br>  {{msg2}}</div> <div id="box3">{{msg2}}</div>