一、什么是MVVM框架
MV*包括MVC、MVP、MVVM
MVVM框架由Model、View、ViewModel構成。
Model指的是數據，在前端對應的是JavaScript對象。
View指的是視圖，在前端對應的是DOM
ViewModel觀察Model和View的變化來做更新，實現了數據的雙向綁定。
前端MVVM框架主要包括：angularJS、reactJS、VueJS
二、Vuejs的核心思想（數據驅動、組件化）
1、數據驅動：數據雙向綁定
2、組件化：
頁面任何部分都可以作為一個組件，頁面只是組件的容器，一個組件對應一個vue文件，組件之間可以傳遞參數，例如：某個頁面分為菜單、內容、底部，可以將菜單作為一個組件。
三、Vue-cli
幫助寫好Vuejs代碼的工具，幫助我們做目錄結構、本地調試、代碼部署、熱加載、單元測試等工作，它是vuejs的腳手架
安裝：
全局安裝：npm install -g vue-cli
新建項目（這里使用webpack模板）：vue init webpack
接着：
cd 進入項目
npm install 安裝依賴代碼庫
npm run dev 啟動服務
四、vue組件
<template><div @click="showDetail">Hellodiv><OtherComponent>OtherComponent>template><style lang="stylus" type="text/stylus">/*樣式*/style><script type="text/ecmascript-6">
import OtherComponent from './components/other.vue'//導入其它組件 export default{
//props對象是引用當前組件可能需要傳的參數，以便后續的計算操作，這里是一個數字類型的參數 props: {
argu: {
type: Number
}
},
//data函數，返回一個對象，里面是能進行雙向綁定的數據 data(){
return{
detailShow:false
}
},
//computed計算屬性 處理復雜的邏輯 computed: {
count () {
returnthis.argu +1
}
},
//事件方法 methods: {
showDetail: function () {
this.detailShow =true
}
},
//注冊組件 components:{
'other-component':OtherComponent,
}
}
script>
五、vue-router基礎用法（2.x版本）
文檔：http://router.vuejs.org/zh-cn/ 最詳細的用法還需要多看文檔
安裝：
在package.json文件的依賴添加vue-router值
執行npm install 命令，它能根據package.json里列舉的npm模塊來安裝所有模塊
使用：
比如說頁面常見的tab切換，通過點擊，在一個區域內切換相應的組件
切換按鈕：router-link組件作為單頁某個路由組件的鏈接，它會渲染成a鏈接，to屬性指定鏈接地址
切換區域：router-view組件，路由匹配的組件在這塊區域渲染
導入需要的組件
