初衷
本人前端小菜鳥一枚，之前對vue停留在了解的層面，最近在項目中用到vue，通過工作實踐陸陸續續掌握了一些vue的用法。所謂仰之彌高，鉆之彌堅，越用越發現vue的魅力之大，同時也愈加認識到自己知識體系的不完善性，因此決定，重新系統的學習一遍vue。目前的計劃為，先通讀官方文檔，然后構建實戰應用。此文章系列為的是分享一些學習感悟和總結，同時也希望借此能督促自己堅持下去，也希望能夠和眾多行走在前端路上的初學者一起探討一起進步！
正文
1.安裝
安裝vue，這個無需多說
# 最新穩定版
$ npm install vue
補充：vue-cli
這是官方提供的一個命令行工具，可以快速搭建現代化應用，很方便。如果是從未接觸過vue的同學，建議先不要管這個。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$cdmy-project
$ npm install
$ npm run dev
2.下面開始探索vue的廣闊世界吧！
介紹vue
下面是官方文檔(中文)的說明:
Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
估計對于有的初學者同學來說，看到這個說明就已經懵了，不要緊，在后面的學習中會逐漸理解里面的每個概念。目前，只需知道兩點就夠了:
- vue很強大，基本能夠滿足你能想到的所有需求，你想不到的很多需要，它也能夠滿足。
- vue很簡單易用，哪怕是前端初學者，也能很快的上手使用。
如果你堅持學習并使用著vue，相信后面的日子里，你會對于這兩點的體會越來越深。
最簡單的vue實例
下面這個是官方給出的一個vue入門實例
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
千萬不要小看這個簡簡單單的實例，從這個實例里我們能理解到很多vue的理念和思想。
在我理解看來，或許更改把上面的代碼上下順序調過來，把js寫在前面，html寫在后面或許更能體現vue的思想。什么意思呢?這就回到了前面的官方說明了。
vue的核心庫只關注圖層。
vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
你會發現vue對視圖上的數據使用不要更簡單粗暴，如果你想往頁面里傳入數據，你需要做的，僅僅是在vue的data里定義一下就可以了，不需要再做任何其他的操作，視圖就能直接拿來用!我想，什么叫做只關注圖層，這就叫只關注圖層，它能讓你用難以想象的簡單方式來實現頁面的數據綁定。
同時，這種綁定是動態的，什么意思？就是只要你js中data里的message值發生變化，頁面也會自動更新這個值，同樣不需要你做任何操作。
可能上面的說法對一些人來說還是有些抽象，沒關系，等到你真正應用到了它，你就會感受到它的神奇之處。
條件與循環
有了vue，你可以直接在html里面寫循環和條件判斷。同樣這個只針對初學者同學，可能有一定angular基礎的同學對這個早已經見怪不怪了。
下面是個條件判斷簡單例子
<div id="app">
<p v-if="display">顯示</p>
</div>
var app = new Vue({
el: '#app',
data: {
display: true
}
})
如果data里的display為true，頁面上"顯示"兩個字就能顯現出來，如果display為false，頁面上則看不到"顯示"，相信不難理解。至于它是怎么實現這個效果的，暫時不在這里解釋。當然有興趣的同學可以自己寫個簡單案例試一試，很容易就能知道了。
下面是個循環的簡單例子
<div id="app">
<ol>
<li v-for="student in students">
{{ student }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
students: [
'小明',
'小華',
'小軍',
]
}
})
頁面上的效果是:
1.小明
2.小華
3.小軍
這個應該也不難理解，不再多說。
處理用戶輸入
vue里面用v-on綁定監聽事件，如下面的例子:
<div id="app">
<p>{{ student }}</p>
<button v-on:click="changeStudent">把小明改為小軍</button>
</div>
var app = new Vue({
el: '#app',
data: {
student: '小明'
},
methods: {
changeStudent: function () {
this.message = '小軍'
}
}
})
實例很簡單，就不多說了。出來的頁面效果是:
點擊一下按鈕，小明就會變成小軍。
Vue 也提供了 v-model 指令，它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧。如下例子:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app= new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
出來的頁面效果是:
你在輸入框輸入什么，頁面能夠實時的顯示出來。它的原理可以解釋為這樣:
當綁定v-model之后，vue就開始監聽頁面上對應輸入框的value的變化，一旦輸入框的value發生改變，vue就獲取這個value值，并把它賦值給data里的message，當message發生變化的時候，頁面回自動更新它所綁定的元素。
小結
vue的基礎介紹就是這么多，總結起來vue有如下特點:
- 對視圖的處理十分強大，用戶只需要關注數據的運算邏輯就可以，無需關注視圖層的變化，vue自會幫你處理好。
- 極大改善了視圖本身的數據處理方式，極大提高了含有多用戶交互頁面的編寫效率。
最后，如果你讀到了這里，謝謝你的閱讀，下面一句話共勉:
前端路漫漫，保持激情，保持年輕!
