模塊一：Vue基礎(chǔ)榮耀·分享·共成長01.單元一:初始Vue02.單元二:環(huán)境安裝單元目錄榮耀·分享·共成長1單元一：初始Vue榮耀·分享·共成長知識點榮耀·分享·共成長知識點1：前端技術(shù)的發(fā)展知識點2：MVVM風(fēng)格開發(fā)框架知識點3：什么是Vue知識點4：Vue的優(yōu)勢知識點1：前技術(shù)的發(fā)展著web2.0時代的到來，前端在web開發(fā)中所占的比重越來越大，專注于內(nèi)容呈現(xiàn)和網(wǎng)站交互的前端開發(fā)人員也逐漸展現(xiàn)出其不可替代性。前端所涉及的領(lǐng)域甚至不限于web應(yīng)用，如HTML5技術(shù)允許我們開發(fā)原生的移動應(yīng)用；ReactNative、Flutter等跨平臺框架可以用于開發(fā)跨平臺的移動應(yīng)用；還有近些年相當(dāng)流行的微信/支付寶小程序等。此外，隨著微軟的新項目ReactNativeforWindows的發(fā)布，使用前端技術(shù)開發(fā)Windows桌面應(yīng)用也成為了可能。web1.0時代-靜態(tài)內(nèi)容呈現(xiàn)。web2.0時代-交互時代。web3.0時代-前端需要具備呈現(xiàn)更加復(fù)雜的數(shù)據(jù)的能力，并提供不亞于復(fù)雜的系統(tǒng)應(yīng)用的交互能力和業(yè)務(wù)邏輯處理能力。榮耀·分享·共成長前端的主要工作？主要負(fù)責(zé)MVC中的V這一層；主要工作就是和界面打交道，來制作前端頁面效果；MVC是后端的分層開發(fā)概念;MVVM是前端視圖層的概念，主要關(guān)注于視圖層分離；MVVM可以拆分成：View---ViewModel---Model三部分

，看下面的視圖。知識點2：MVVM風(fēng)格開發(fā)框架榮耀·分享·共成長MVVM分三部分Model,View,VMViewModel。MVVM是前端視圖層的分層開發(fā)思想，主要把每個頁面分成了M/V/VM，其中VM是MVVM思想的核心，因為VM是M和V之間的調(diào)度者。注前端頁面使用MVVM的思想主要是為了開發(fā)更加方便，因為MVVM的思想提供了雙向數(shù)據(jù)綁定。意：雙向數(shù)據(jù)綁定是由VM提供的。知識點2：MVVM風(fēng)格開發(fā)框架榮耀·分享·共成長榮耀·分享·共成長Vue.js是目前最火的一個前端框架；Vue.js、Angular.js、React.js一起，并成為前端三大框架。

知識點3：什么是VueAngular來自GoogleReact來自FacebookVue是尤雨溪本人維護的，雖然沒有大公司支持，但是也比較流行。Vue.js（讀音/vju?/,類似于

view）是一套構(gòu)建用戶界面的

漸進式框架。與其他重量級框架不同的是，Vue采用自底向上增量開發(fā)的設(shè)計。Vue的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項目整合。另一方面，Vue完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。Vue.js的目標(biāo)是通過盡可能簡單的API實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。軟件下載：官網(wǎng)安裝install=-找到開發(fā)版本-右擊目標(biāo)另存為。榮耀·分享·共成長1、輕量級框架只關(guān)注視圖層,是一個構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十kb。Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。2、簡單易學(xué)國人開發(fā)，中文文檔,不存在語言障礙，易于理解和學(xué)習(xí)。3、雙向數(shù)據(jù)綁定也就是所謂的響應(yīng)式數(shù)據(jù)綁定。這里的響應(yīng)式不是@media媒體查詢中的響應(yīng)式布局，而是指vue.js會自動對頁面中某些數(shù)據(jù)的變化做出同步的響應(yīng)。也就是說，vue.js會自動響應(yīng)數(shù)據(jù)的變化情況，并且根據(jù)用戶在代碼中預(yù)先寫好的綁定關(guān)系，對所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進行修改。而這種綁定關(guān)系，就是以input標(biāo)簽的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。知識點4：Vue的優(yōu)勢榮耀·分享·共成長這也就是vue.js最大的優(yōu)點，通過MVVM思想實現(xiàn)數(shù)據(jù)的雙向綁定，讓開發(fā)者不用再操作dom對象，有更多的時間去思考業(yè)務(wù)邏輯。4、組件化Vue.js通過組件，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只要先在父級應(yīng)用中寫好各種組件標(biāo)簽（占坑），并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)，然后再分別寫好各種組件的實現(xiàn)（填坑），然后整個應(yīng)用就算做完了。5、視圖,數(shù)據(jù),結(jié)構(gòu)分離使數(shù)據(jù)的更改更為簡單,不需要進行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關(guān)操作6、虛擬DOM現(xiàn)在的網(wǎng)速越來越快了，但打開已經(jīng)有緩存的頁面還是感覺很慢，是因為瀏覽器知識點4：Vue的優(yōu)勢榮耀·分享·共成長本身處理DOM也是有性能瓶頸的，尤其是在傳統(tǒng)開發(fā)中，用JQuery或原生的JavaScriptDOM操作函數(shù)對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導(dǎo)致頁面看起來非常卡頓。而VirtualDOM則是虛擬DOM的英文，就是一種可以預(yù)先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化，由于這個DOM操作屬于預(yù)處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。7、運行速度更快像比較與react而言,同樣都是操作虛擬dom,就性能而言,vue存在很大的優(yōu)勢知識點4：Vue的優(yōu)勢2單元二：環(huán)境安裝榮耀·分享·共成長知識點榮耀·分享·共成長知識點1：Vue環(huán)境安裝知識點2：node環(huán)境安裝以及npm包管理格開發(fā)框架榮耀·分享·共成長軟件下載：官網(wǎng)安裝install-找到開發(fā)版本-右擊目標(biāo)另存為知識點1：Vue環(huán)境安裝知識點2：node環(huán)境安裝以及npm包管理榮耀·分享·共成長nodejs是js運行時的運行環(huán)境，類比java中jvm。nodejs不是一個js框架，千萬不要認(rèn)為是類似jquery的框架。大家習(xí)慣將

ECMAScript6.0

簡稱為

ES6，它是Javascript語言的下一代標(biāo)準(zhǔn)，它的目標(biāo)，是使得Javascript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。1.安裝nodejs2.使用nodejs直接運行js文件在工作空間打開shift+右擊-此處打開命令行node文件名.js知識點2：node環(huán)境安裝以及npm包管理榮耀·分享·共成長1.下載node軟件2.安裝的時候，一路next下去，不用做任何的額外設(shè)置，裝完即可。3.安裝完成之后，可以查看其版本號：win+r打開cmd方式1：輸入node-v即可查看版本號方式2：輸入node--version即可查看版本號榮耀·分享·共成長1、安裝nodejs，自動帶npm命令工具檢測node和npm裝包工具：node–v和npm–v2、裝cnpm因為npm是國外網(wǎng)址。比較慢。所以采用cnpm裝包工具cnpm安裝命令：npmicnpm–g如果以上指令嘗試多次失敗。注意：自己的機器安裝：npminstall-gcnpm-registry=3、安裝nrmnrm是鏡像源切換工具。注意：nrm只是提供了一些npm常用的鏡像地址（下載包的url地址），幫助我們快速切換地址。還是使用npm和cnpm進行安裝。nrm安裝：npminrm–g或者：運行：cnpmInrm-g知識點2：node環(huán)境安裝以及npm包管