什么是MVVM（ViewModel）？
ViewModel能夠觀察到數(shù)據(jù)的變化，并對(duì)視圖對(duì)應(yīng)的內(nèi)容進(jìn)行更新。
ViewModel能夠監(jiān)聽(tīng)到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生改變。

Vue.js就是一個(gè)MVVM的實(shí)現(xiàn)者，他的核心就是實(shí)現(xiàn)了DOM監(jiān)聽(tīng)和數(shù)據(jù)綁定。

idea集成Vue（第一個(gè)小demo用于理解mvvm模式）：
1.直接新建一個(gè)空文件夾，用idea打開(kāi)?；蛘咝陆ㄒ粋€(gè)。
2.file-setting-plugins
3.搜索vue，安裝成功。
5.在線導(dǎo)包：cdn：
<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.js"></script>
6.新建一個(gè)html，引入包
7.新建一個(gè)vue對(duì)象并綁定

vue基本語(yǔ)法
還可以使用v-bind來(lái)綁定元素特性

<span v-bind:title:"message">
鼠標(biāo)懸停幾秒查看此處動(dòng)態(tài)綁定的信息
</span>
<script type="text/javascript">
var app=new Vue({
  el:#app,
  data:{
    message:"我是動(dòng)態(tài)綁定的信息"
  }
})
</script>

v-等稱之為一個(gè)指令。指令帶有前綴v-以表示他們是vue提供的特殊屬性。
條件判斷語(yǔ)句：v-if v-else v-else-if
===三個(gè)等于號(hào)表示數(shù)據(jù)類型和數(shù)值都相等
循環(huán)：v-for

vue綁定事件：v-on指令可以監(jiān)聽(tīng)dom事件，并且在觸發(fā)時(shí)候運(yùn)行一些js代碼
vue的七大屬性：元素 el、數(shù)據(jù)data、方法methods、
方法必須定義在vue的methods對(duì)象中

vue雙向綁定
vue.js就是一個(gè)mvvm框架，即數(shù)據(jù)可以雙向綁定。
在表單中實(shí)現(xiàn)數(shù)據(jù)雙向綁定：v-model指令
在<input> <select> <textarea>元素上創(chuàng)建雙向數(shù)據(jù)綁定，它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。
v-model會(huì)忽略所有表單元素的value，checked、selected特性的初始值，而始終將vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。

vue組件講解
組件是vue可復(fù)用的實(shí)例，說(shuō)白了就是可以重復(fù)使用的模板。

//定義一個(gè)vue組件component
Vue.component("第一個(gè)組件",{
        props:['qin']
        template:'<li>{{qin}}</li>'
      })

使用props屬性傳遞參數(shù)

axios異步通信
網(wǎng)絡(luò)通信
Axios是一個(gè)開(kāi)源的可以用在瀏覽器和NodeJs的異步通信框架，他的主要作用就是實(shí)現(xiàn)AJAX異步通信。
其功能特點(diǎn)如下：
從瀏覽器創(chuàng)建XMLHttpRequests
從node.js創(chuàng)建http請(qǐng)求
支持PromiseAPI（JS中的鏈?zhǔn)骄幊蹋?br> 攔截請(qǐng)求和響應(yīng)
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換json數(shù)據(jù)
客戶端支持防御XSRF（跨站請(qǐng)求偽造）
為什么要使用AXIOS？
由于vue.js是一個(gè)視圖層框架，并且作者是嚴(yán)格遵守soc（關(guān)注度分離原則）原則的，所以vue.js中并不包含AJAX的通信功能，推薦使用axios，少用jquery，因?yàn)閐om操作太頻繁。
vue實(shí)例有一個(gè)完整的生命周期：
也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載dom、渲染、更新、渲染，卸載等一系列功能，我們稱這是vue的生命周期。通俗說(shuō)這就是vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。
鉤子函數(shù)：beforeCreate：創(chuàng)建實(shí)例之前執(zhí)行的鉤子事件。
create：實(shí)例創(chuàng)建完成后執(zhí)行的鉤子
beforeMount：將編譯完成的HTML掛載到對(duì)應(yīng)的虛擬dom時(shí)觸發(fā)的鉤子，此時(shí)頁(yè)面沒(méi)有內(nèi)容
mounted：編譯好的html掛載到頁(yè)面完成后執(zhí)行是事件鉤子，此鉤子函數(shù)中一般后做一些ajax請(qǐng)求獲取數(shù)據(jù)進(jìn)行數(shù)據(jù)初始化
beforeUpdate：更新之前的鉤子
updated：更新之后的鉤子
beforeDestory：實(shí)例銷毀之前執(zhí)行的鉤子
destoryed：實(shí)例銷毀執(zhí)行完成后的鉤子
mounted這個(gè)鉤子函數(shù)比較重要，因?yàn)橛糜趯?shí)現(xiàn)請(qǐng)求獲取數(shù)據(jù)。

mouted(){
    axios.get('data.json').then(response=>(console.log(response.data)));
}

v-clock解決閃爍問(wèn)題：自定義標(biāo)簽v-clock

<style>
    [v-clock]{
        display:none;
          }
    </style>

使用axios的步驟：
1.使用鉤子函數(shù)

mouted(){
    axios.get('data.json').then(response=>(console.log(response.data)));
}

2.data函數(shù)將數(shù)據(jù)返回

data(){
    return{
    //請(qǐng)求的返回參數(shù)合適，必須和json字符串一樣
      }
}

計(jì)算屬性
計(jì)算屬性的重點(diǎn)突出在屬性兩個(gè)字上，屬性是名詞，計(jì)算是動(dòng)詞。
簡(jiǎn)單來(lái)說(shuō)：就是一個(gè)能夠?qū)⒂?jì)算結(jié)果緩存起來(lái)的屬性（將行為轉(zhuǎn)化為靜態(tài)的屬性），可以理解為緩存。
好處：在內(nèi)存中運(yùn)行

//計(jì)算屬性
computed:{
  }

computed和methods的區(qū)別：
1.里面的方法名不能重名，重名之后methods中方法的優(yōu)先級(jí)高于computed中的。
2.調(diào)用方式不同。
調(diào)用methods中的方法時(shí)：方法名()
調(diào)用計(jì)算屬性中的方法時(shí)：方法名
3.同樣計(jì)算一個(gè)值，計(jì)算屬性中的結(jié)果可以緩存在內(nèi)存中，節(jié)約瀏覽器成本。
計(jì)算屬性的主要特性就是為了將不經(jīng)常變化的計(jì)算結(jié)果緩存起來(lái)，以節(jié)約我們的系統(tǒng)開(kāi)銷。

插槽slot
在vue.js中我們使用<slot>元素作為承載分發(fā)內(nèi)容的出口，可以應(yīng)用在組合組件的場(chǎng)景中。

Vue.componet("todo",{
        template:
                //這里定義插槽
        })
Vue.componet("todo-title",{
      props:[title],
      template:
            //這里定義一個(gè)替代上面插槽的一個(gè)模板
          <div>{{title}}</div>
      })
    methods:{//跟上面插槽模板綁定的事件函數(shù)都在這里
       remove:function(){
          alert("111")      
}      }

自定義事件內(nèi)容分發(fā)：

Vue.componet("todo",{
        template:
                //這里定義插槽
        })
Vue.componet("todo-title",{
      props:[title],
//只能調(diào)用當(dāng)前組件的方法
      template:
            //這里定義一個(gè)替代上面插槽的一個(gè)模板
          <div>{{title}}</div>
methods:
      })

//寫在vm中的一個(gè)刪除方法
removeItems:function(index){
        this.todoItems.slice(index,1);//刪除一個(gè)元素
        }

刪除操作要在組件中完成，那么組件如何才能刪除vue實(shí)例中的數(shù)據(jù)呢，此時(shí)就涉及到參數(shù)傳遞和事件分發(fā)了。
vue提供的一個(gè)自定義事件的功能，使用this.$emit('自定義事件名',參數(shù))
vue對(duì)象是前后端進(jìn)行交接的關(guān)鍵。

vue入門小結(jié)：
核心：數(shù)據(jù)驅(qū)動(dòng)，組件化
優(yōu)點(diǎn)：借鑒了AngulaJS的模塊化開(kāi)發(fā)和React的虛擬dom，虛擬dom就是把dom操作放到內(nèi)存中執(zhí)行。
常用屬性：
v-if
v-else-if
v-else
v-for
v-bind:給組件綁定參數(shù)，簡(jiǎn)寫 :
v-on:簡(jiǎn)寫@
v-model:數(shù)據(jù)雙向綁定
組件化：
組合組件slot插槽
組件內(nèi)部綁定事件需要使用this.$emit('自定義事件名',參數(shù))
計(jì)算屬性的特色：緩存計(jì)算數(shù)據(jù)。
遵循Soc關(guān)注度分離原則，Vue是純粹的視圖框架，不包含通信功能，推薦使用axios框架做異步通信。
Vue開(kāi)發(fā)一般都要基于NodeJS，實(shí)際開(kāi)發(fā)中采用vue-cli腳手架開(kāi)發(fā)，vue-router路由，vuex做狀態(tài)管理；Vue UI界面一般使用Element UI（餓了么出品），或ICE（阿里巴巴出品），來(lái)快速搭建前端項(xiàng)目。

第一個(gè)vue-cli項(xiàng)目
vue-cli是官方提供的一個(gè)腳手架，用于快速生成一個(gè)vue的項(xiàng)目模板
預(yù)先定義好的目錄結(jié)構(gòu)及基礎(chǔ)代碼，就好比咱們?cè)趧?chuàng)建maven項(xiàng)目時(shí)可以選擇創(chuàng)建一個(gè)骨架項(xiàng)目，這個(gè)骨架項(xiàng)目就是腳手架，我們的開(kāi)發(fā)更加快速。
主要的功能：
統(tǒng)一的目錄結(jié)構(gòu)
本地調(diào)試
熱部署
單元測(cè)試
集成打包上線

webpack學(xué)習(xí)使用
webpack是一個(gè)現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器（module bundler）當(dāng)webpack處理應(yīng)用程序時(shí)，他會(huì)遞歸的構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用需要的每個(gè)模塊，然后將所有模塊打包成一個(gè)或多個(gè)bundle。
通過(guò)export顯式的暴露接口供其他接口調(diào)用。
前端開(kāi)發(fā)和其他主要開(kāi)發(fā)工作的主要區(qū)別，首先是前端基于多語(yǔ)言，多層次的編碼和組織工作，其次是前端產(chǎn)品的交付是基于瀏覽器的，這些資源是通過(guò)增量加載的方式運(yùn)行到瀏覽器端。

模塊化的演進(jìn)
1.通過(guò)script標(biāo)簽將js文件加載進(jìn)來(lái)，如果把每個(gè)文件都看作一個(gè)模塊，那么他們的接口是暴露到全局作用域中，也就是定義在window對(duì)象下，不同模塊的調(diào)用都是同一作用域。
這種原始的加載方式暴露了一些弊端：
全局作用域下容易造成變量沖突
文件只能按照script標(biāo)簽的書寫順序進(jìn)行加載進(jìn)來(lái)
開(kāi)發(fā)人員必須主觀解決模塊和代碼庫(kù)的依賴關(guān)系
在大型項(xiàng)目中，各種資源難以管理，長(zhǎng)期積累的問(wèn)題導(dǎo)致代碼庫(kù)混亂不堪。
2.CommonJS
服務(wù)端的的NodeJS遵循CommonJS規(guī)范，該規(guī)范的核心思想是通過(guò)require方法來(lái)同步加載所需依賴的其他模塊，通過(guò)exports或者module.exports來(lái)導(dǎo)出需要暴露的接口。
優(yōu)點(diǎn)：
服務(wù)器端模塊包便于重用
NPM中已經(jīng)有超過(guò)45萬(wàn)個(gè)可以使用的模塊包
簡(jiǎn)單易用。
缺點(diǎn)：
同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著加載阻塞，瀏覽器資源是異步加載的
不能非阻塞的并行加載多個(gè)模塊。
3.AMD
AMD規(guī)范中，要在生命模塊時(shí)指定所有的依賴，并且還要當(dāng)作形參傳到factory中，對(duì)于依賴的模塊提前執(zhí)行。
優(yōu)點(diǎn)：
適合在瀏覽器環(huán)境中異步加載模塊
可以并行加載多個(gè)模塊
缺點(diǎn)：
提高了開(kāi)發(fā)成本，代碼的閱讀和書寫比較簡(jiǎn)單，模塊定義方式的語(yǔ)義不暢。
不符合通用的的模塊化思維方式，是一種妥協(xié)的實(shí)現(xiàn)。
4.CMD
5.ES6模塊
es6的設(shè)計(jì)思想：盡量靜態(tài)化，使編譯時(shí)就能確定這些模塊的依賴關(guān)系，以及輸入和輸出變量。之前的CommonJS和AMD都只能在運(yùn)行時(shí)確定這些東西。
優(yōu)點(diǎn)：容易進(jìn)行靜態(tài)分析
面向未來(lái)的es6標(biāo)準(zhǔn)
缺點(diǎn)：
原生瀏覽器端還沒(méi)有實(shí)現(xiàn)這些標(biāo)準(zhǔn)
全新的命令，新版的NodeJS才支持。
6.安裝webpack
是一款模塊化加載器加打包工具，他能把各種資源，如JS,JSX,ES6,SASS,LESS圖片等都作為模塊來(lái)處理和使用。
作用：把es6開(kāi)發(fā)的軟件打包成es5瀏覽器都支持的規(guī)范。
配置文件：
創(chuàng)建webpack.config.js配置文件
entry：入口文件，指定webpack用哪個(gè)文件作為入口文件
output：輸出，制定webpack把處理完的文件放置到指定路徑。
module：模塊，用于處理各種類型的文件
plugins：插件，如熱更新，代碼重用等。
resolve：設(shè)置路徑指向。
watch：監(jiān)聽(tīng)，用于設(shè)置文件改動(dòng)后自動(dòng)打包。
使用webpack：
1.創(chuàng)建項(xiàng)目
2.創(chuàng)建一個(gè)名為modules的目錄，用于放置JS模塊等資源文件。
webpack --watch：實(shí)現(xiàn)熱部署，監(jiān)聽(tīng)改變；

vue-router路由：多頁(yè)面跳轉(zhuǎn)
Vue Router是Vue.js官方的路由管理器，他和vue.js的核心深度集成，讓構(gòu)建。
包含的功能有：
嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于Vue.js過(guò)渡系統(tǒng)的視圖過(guò)渡效果。
細(xì)粒度的導(dǎo)航控制。
帶有自動(dòng)激活的CSS Class鏈接
HTML5歷史模式和hash模式，在IE9中自動(dòng)降級(jí)
自定義的滾動(dòng)條模式。
1.安裝路由
2.定義一個(gè)專門的文件夾，在src目錄下，專門存放路由。
3.導(dǎo)入路由插件，編寫路由插件。
4.在Main.js中配置路由
5.在App.vue中使用路由。

Vue+ElementUI

嵌套路由

參數(shù)傳遞以及重定向