1. Vue簡介
1.1 初步了解Vue.js框架
Vue.js (讀音 /vjuː/，類似於 view) 是一種輕量級前端MVVM框架。同時吸收了React（組件化）和Angular（靈活指令頁面操作）的優點。是一套構建用戶界面的漸進式框架，Vue 采用自底向上增量開發的設計。
【兼容性：Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。】
表1.1 Vue.js與其他框架對比
| 常見框架 |
React |
AngularJS |
Ember |
Knockout |
Polymer |
Riot |
| 相同點 |
² 用Virtual DOM ² 提供響應式 (Reactive) 和組件化 (Composable) 的視圖組件。 ² 將注意力集中保持在核心庫，而將其他功能如路由和全局狀態管理交給相關的庫。
|
Vue 的一些語法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因為 AngularJS 是 Vue 早期開發的靈感來源。 |
|
Knockout 是 MVVM 領域內的先驅，並且追蹤依賴。 |
|
|
| 不同點 |
² 運行時性能 ² HTML & CSS ² 規模 ² 原生渲染 ² MobX |
² 復雜性 ² 靈活性和模塊化 ² 數據綁定 ² 指令與組件 ² 運行時性能 ² TypeScript ² 體積 ² 學習曲線
|
|
|
|
|
注：https://cn.vuejs.org/v2/guide/comparison.html
1.2 環境搭建和腳手架工具的使用
1.2.1 環境搭建
Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鍾即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
【對於Window系統，應該先安裝node和git】
1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基於node.js,利用淘寶npm鏡像安裝相關依賴
在cmd里直接輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回車，等待安裝...(windows使用管理員身份進行安裝)
- 安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架在cmd里
1)輸入：cnpm install -g vue-cli，回車，等待安裝...
2).輸入：vue，回車，若出現vue信息說明表示成功
- 創建項目：
在cmd里項目路徑下輸入：vue init webpack vue_test(項目文件夾名，不要有大寫)，回車，等待一小會兒，依次出現‘git’下的項，可按下圖操作
- 安裝依賴：【下載項目運行所需文件——依賴node_modules】
在cmd里
1).輸入：cd vue_test（項目名），回車，進入到具體項目文件夾
2).輸入：cnpm install，回車，等待一小會兒
6.測試環境是否搭建成功
方法1：在cmd里輸入：npm run dev
方法2：在瀏覽里輸入：localhost:8080 (默認端口為8080)
注：NPM（Node Package Manager）在這里指的是一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標准。Nodejs自身提供了基本的模塊，但是開發實際應用過程中僅僅依靠這些基本模塊則還需要較多的工作。幸運的是，Nodejs庫和框架為我們提供了幫助，讓我們減少工作量。但是成百上千的庫或者框架管理起來又很麻煩，有了NPM，可以很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。
無需關注多余的結構，只需要編輯src中的文件即可，頁面主要由app.vue控制
【注：每次需要打開時，先啟動cmd，在項目目錄下npm run dev，才可以通過localhost:8080 進入】
1.2.2 腳手架工具的使用
注：腳手架：腳手架的意思是幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝，讓我們不需要為了編輯或者一些其他事情浪費時間 。 總而言之，就是快速搭建項目的，讓我們可以早點去寫代碼。
1.3 從*.vue到界面
1.3.1 Vue.js的組件概念
文件內容寫在【*.vue】文件中，主要包含三部分內容：HTML（<template>）、JavaScript（<script>）和CSS（<style>）。
從*.vue到界面是通過webpack的解析運行的。
1.3.2 vue.js的數據綁定
一個簡單的實例
1.4 Vue.js組件的重要選項（參數）
1.4.1 Vue對象的子對象
（1）data：創建Vue對象時，其子對象data是用於存儲頁面靜態數據
New Vue({
data:{
a：1
}
})
<p>{{ a }}</p>
（2）method：創建Vue對象時，其子對象method是用於存儲 操作data的 方法
New Vue({
data:{
a:1
},
method:{
doSometing:function(){ this.a ++ }
}
})
（3）watch：創建Vue對象時，其子對象watch是用於存儲 方法操作引起的數據變化的監聽
New Vue({
data:{
a:1
},
method:{
doSometing:function(){ this.a ++ }
},
watch :{
‘a’:function( val, oldVal ){
console.log(val,oldVal);
}
}
})
監聽數據’a’,當方法改變a的值時，監聽的程序就會自動執行
1.4.2 模板指令-html和Vue對象的粘合劑
（1）數據渲染：v-text 、 v-html 、 {{}} 熱更新
（2）控制模塊隱藏：v-if 、 v-show
（3）渲染循環列表：v-for
（4）模板指令：事件綁定 v-on 屬性綁定v-bind
1.5 學習基礎框架代碼
1.6 使用Vue.js做一個todolist
1.7 使用localstorage來存儲todolist
1、新建一個store.js文件
包含兩個方法，一個是讀取緩存中的數據——fetch()，一個是保存數據到緩存中——save()。
2、在App.vue的<script>模塊的第一行導入Store對象
在數據中存儲緩存中數據，表示加載完成時讀取緩存數據
定義watch，監聽items的所有變化，深度控制items數組的改變，保證無論是增刪改查，只要數據改變就存儲到緩存中。
1.8 如何划分組件
1.8.1 划分方式：
（1）功能模塊-select,pagenation……
（2）頁面區域-header,footer,sidebar……
1.8.2 組件之間的調用-重要選項-components
//導入組件
import Header from './header'
import Footer from './footer'
new Vue({
data:{
isShow:true
},
components:[
header,footer //注冊組件，注冊后組件才能使用
]
})
1.8.3 組件之間的通信
1、父組件向子組件傳參【props對象、$broadcast()廣播】
注意事項：父組件中有值，子組件使用props對象獲取父組件事先注冊的屬性參數
❤父向子組件傳參實例
① 在components文件夾中定義組件componentA.Vue
② 在父組件App.vue中導入子組件
③ 在父組件App.vue中使用屬性傳遞消息
④ 在子組件中使用props對象進行注冊獲取
3、子組件向父組件傳參【$on()、$emit()、$dispatch()派發】
注意事項：父組件中有值，子組件使用props對象獲取父組件事先注冊的參數
① 在子組件的時間函數中使用$emit()方法傳遞參數
② 在父組件中使用自定義事件獲取子組件傳遞過來的參數
父組件中使用v-on指令觸發自定義事件
2. Vue.js具體指令和項目實踐
工具使用：Visual Studio Code【Atom】
安裝完成后，需要安裝相應的插件去支持語法分析和代碼顯示等功能，注意事項：部分插件還不完善，如非必要不使用ESLint（禁用，否則函數簡寫報錯），在用戶設置中添加
否則指令v-for報錯。
