前面的話
Vue中文文檔寫得很好，界面清爽，內容翔實。但文檔畢竟不是教程，文檔一上來出現了大量的新概念，對於新手而言，並不友好。個人還是比較喜歡類似於《JS高級程序設計》的風格，從淺入深，娓娓道來
於是，還是按照自己的思路，對Vue的知識體系從淺入深的開始學習，並把學習記錄總結成博客，也是希望能夠幫助到同樣入門Vue的朋友，本文將詳細介紹Vue入門基礎
概述
Vue.js（讀音 /vjuː/，類似於 view） 是一套構建用戶界面的漸進式框架。Vue 采用自底向上增量開發的設計，核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動
[注意]由於Vue使用getter/setter等ES5特性，所以兼容到IE9
下面來解釋下，何為漸進式框架，如上圖所示
如果只使用Vue最基礎的聲明式渲染的功能，則完全可以把Vue當做一個模板引擎來使用
如果想以組件化開發方式進行開發，則可以進一步使用Vue里面的組件系統
如果要制作SPA(單頁應用)，則使用Vue里面的客戶端路由功能
如果組件越來越多，需要共享一些數據，則可以使用Vue里的狀態管理
如果想在團隊里執行統一的開發流程或規范，則使用構建工具
所以，可以根據項目的復雜度來自主選擇使用Vue里面的功能
安裝
Vue.js有三種獲取方式
1、官網直接下載
開發版本：包含完整的警告和調試模式
生產版本：刪除了警告，28.96kb min+gzip
2、CDN
使用https://unpkg.com/vue這個在線CDN
3、NPM
# 最新穩定版
$ npm install vue
獲取Vue后，直接使用script標簽引入即可使用
<script src="vue.js"></script>
<script src="https://unpkg.com/vue"></script>
模板插值
前面介紹過，對於Vue最簡單的應用就是將其當作一個模板引擎，也就是采用模板語法把數據渲染進 DOM。Vue使用雙大括號語法來進行文本插值，下面的message相當於一個變量或占位符，最終會表示為真正的文本內容
<div id="app"> {{ message }} </div>
構造器
每個Vue.js應用都是通過構造函數 Vue 創建一個 Vue 的根實例啟動的，經常使用 vm (ViewModel 的簡稱) 這個變量名表示Vue實例
var vm = new Vue({
// 選項
})
在實例化Vue時，需要傳入一個選項對象，它可以包含數據、模板、掛載元素、方法、生命周期鈎子等選項
var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
上面為Vue()構造函數傳入了一個對象，對象中包括el和data這兩個參數
【el】
參數el，是element的縮寫，用於提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標
參數值有兩種類型，包括string | HTMLElement
上例中， el : "#app"表示掛載目標為id為"app"的元素，也可以寫為 el : document.getElementById('app')
【data】
參數data表示Vue實例的數據對象
上例中，data: { message: 'Hello Vue!' } 表示變量message所代表的真實值為"Hello Vue!"
簡單實例
下面將Vue的模板插值和構造器結合起來，制作一個簡單實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
得到如下所示的結果
【數據綁定】
看起來上面的例子跟單單渲染一個字符串模板非常類似，但是Vue在背后做了大量工作。現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的
在控制台中修改app.message的值，可看到DOM元素相應的更新
最后
當然，Vue學習的前提是要掌握ES6、nodejs以及webpack
歡迎交流