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

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

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

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

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

ECMAScript6.0

簡稱為

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

THANKS模塊二：Vue內(nèi)部指令榮耀·分享·共成長01.

單元一:條件指令和循環(huán)指令02.單元二:事件命令單元目錄榮耀·分享·共成長03.單元三:html命令1單元一：條件指令和循環(huán)指令榮耀·分享·共成長知識(shí)點(diǎn)榮耀·分享·共成長知識(shí)點(diǎn)1：v-ifv-elsev-show知識(shí)點(diǎn)2：v-for指令：解決模板循環(huán)問題知識(shí)點(diǎn)1：v-ifv-elsev-showv-if：根據(jù)表達(dá)式的布爾值判斷是否插入標(biāo)簽，當(dāng)條件為true時(shí)顯示標(biāo)簽內(nèi)容，當(dāng)條件為false時(shí)隱藏標(biāo)簽內(nèi)容v-if是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。v-if也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。榮耀·分享·共成長

v-if案例：<divid="app"><pv-if="msg==1">相等</p><pv-if="msg===1">相等類型不同</p><hr/><pv-if="msg=='1'">相等</p><pv-if="msg==='1'">相等</p></div><script>varvm=newVue({el:'#app',data:{msg:'1'}});</script>知識(shí)點(diǎn)1：v-ifv-elsev-show榮耀·分享·共成長知識(shí)點(diǎn)1：v-ifv-elsev-show榮耀·分享·共成長

v-else是緊跟在v-if或v-else-if之后。

前邊v-if或v-else-if表達(dá)式的布爾值判斷為false時(shí)才顯示標(biāo)簽內(nèi)容

v-else案例：<divid="root"><divv-if="show===a">ThisisA</div><divv-else-if="show===b">ThisisB</div><divv-else>Thisisothers</div></div><script>varvm=newVue({el:root,data:{show:true}})</script>知識(shí)點(diǎn)1：v-ifv-elsev-show榮耀·分享·共成長知識(shí)點(diǎn)1：v-ifv-elsev-show

條件渲染：v-if:每次都會(huì)重新刪除或者創(chuàng)建元素有比較高的切換性能的消耗如果元素設(shè)計(jì)頻繁的切換，最好不使用v-ifv-show：每次不會(huì)重新進(jìn)行DOM元素的刪除和創(chuàng)建，只是切換了元素的display樣式有較高的初始渲染的消耗如果元素很少被現(xiàn)實(shí)在頁面，不推薦使用v-show榮耀·分享·共成長榮耀·分享·共成長知識(shí)點(diǎn)2：v-ifv-elsev-showV-show案例<divid="app"><!--<inputtype="button"value="切換"@click="toggle"/>

<inputtype="button"value="切換"@click="flag=!flag"/><divv-if="flag">這是條件渲染元素</div><divv-show="flag">這是條件渲染元素</div></div><script>varvm=newVue({el:'#app',data:{flag:false注意：data中最后數(shù)據(jù)沒有；。用，隔開},/*methods:{toggle(){this.flag=!this.flag;}}*/});</script>榮耀·分享·共成長知識(shí)點(diǎn)2：v-for指令：解決模板循環(huán)問題如何解決vuejs中復(fù)用形式造成的渲染的數(shù)據(jù)的問題？

key用來表示每一向單獨(dú)的數(shù)據(jù)注意：使用v-for遍歷數(shù)據(jù)的時(shí)候，使用key作為每榮耀·分享·共成長知識(shí)點(diǎn)2：v-for指令：解決模板循環(huán)問題

V-for案例：<divv-for="iteminlist":key="item.id"><inputtype="checkbox"/>{{item.id}}{{}}</div>2單元二：事件命令榮耀·分享·共成長知識(shí)點(diǎn)榮耀·分享·共成長知識(shí)點(diǎn)1：v-on：綁定事件監(jiān)聽器知識(shí)點(diǎn)2：v-model指令知識(shí)點(diǎn)3：v-bind指令榮耀·分享·共成長v-on指令：事件綁定直接使用指令v-on v-on:事件名；簡化形式，縮寫，語法糖 @事件名；注意：無：號(hào)注意：綁定以后可以使用在vue實(shí)例中數(shù)據(jù)和方法知識(shí)點(diǎn)1：v-on：綁定事件監(jiān)聽器知識(shí)點(diǎn)1：v-on：綁定事件監(jiān)聽器榮耀·分享·共成長v-on案例：<divid="app"><!--方式1--><inputtype=“button”value=“點(diǎn)擊有驚喜”v-on:click=“show”/>注意：括號(hào)可有可無，有參數(shù)時(shí)必須寫<!--方式2縮寫，語法糖--><inputtype="button"value="點(diǎn)擊有驚喜"@click="show"/></div><script>varvm=newVue({el:'#app',data:{msg:'hello'},methods:{/*show:function(){//寫法1：alert('哈哈');console.log('哈哈');}*///寫法2：ES6語法ES6就是ECMAScript6是新版本JavaScript語言的標(biāo)準(zhǔn)，目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言。show(){//alert(‘哈哈’);//console.log(‘哈哈’);alert(this.msg);//注意：this必須有，指當(dāng)前的對(duì)象。多個(gè)方法之間使用，分開}}});</script>知識(shí)點(diǎn)2：

v-model指令榮耀·分享·共成長v-model指令：雙向數(shù)據(jù)綁定；指令使用；什么是雙向數(shù)據(jù)綁定？單向綁定：data里的數(shù)據(jù)可以影響dom元素的表現(xiàn)，但是dom不能影響data，即數(shù)據(jù)都是從data傳向dom。雙向綁定：data里的數(shù)據(jù)和dom元素的表現(xiàn)雙方可以互相決定對(duì)方的值榮耀·分享·共成長v-model案例：<divid="app">單向的數(shù)據(jù)綁定M->V<inputtype="text"v-bind:value="msg"/>雙向的數(shù)據(jù)綁定M<->V<inputtype="text"v-model="msg"/></div><script>varvm=newVue({el:'#app',data:{msg:'哈哈'}});</script>知識(shí)點(diǎn)2：

v-model指令榮耀·分享·共成長v-bind指令：屬性綁定；（注意v-bind綁定屬性和樣式，如src、style、class）直接使用指令 v-bind:屬性名；簡化形式，縮寫，語法糖 :屬性名；知識(shí)點(diǎn)3：v-bind指令榮耀·分享·共成長v-bind案例：<divid="app"> <imgsrc="img/1.png"><br/> <!--方式1--><imgv-bind:src="url"><br/> <!--方式2：語法糖,縮寫--><img:src="url"><br/></div><script> varvm=newVue({ el:'#app’, data:{url:'img/1.png’ } });</script><imgv-bind:src="url"v-bind:width="myWidth"/>data:{myWidth:'200px',url:'img/1.jpg'}知識(shí)點(diǎn)3：v-bind指令3單元三：html命令榮耀·分享·共成長知識(shí)點(diǎn)榮耀·分享·共成長知識(shí)點(diǎn)1：文本插值知識(shí)點(diǎn)2：v-pre&v-cloak&v-once知識(shí)點(diǎn)3：v-text&v-html知識(shí)點(diǎn)1：文本插值插值表達(dá)式（Mustache）錯(cuò)誤的：不可以連續(xù)寫{{firstNamelastName}}<br/> 正確的：可以寫變量，也可以寫表達(dá)式{{firstName+lastName}}<br/> {{firstName+''+lastName}}<br/> {{firstName}}{{lastName}}<br/> 可以寫表達(dá)式 {{counter*2}}<br/>榮耀·分享·共成長榮耀·分享·共成長知識(shí)點(diǎn)1：文本插值插值表達(dá)式（Mustache）案例<divid="app"> {{msg}} </div> <!--注意：script位于<div>之后，放在頭部不顯示ViewModel中間的調(diào)度者--> <script> varvm=newVue({ el:'#app’, data:{ msg:'中國加油’ } }); </script>事件修飾符；.stop 阻止冒泡。冒泡：點(diǎn)擊子元素，會(huì)觸發(fā)父元素的事件。給子元素添加stop.prevent阻止默認(rèn)事件.capture添加事件偵聽器時(shí)使用事件捕獲模式。實(shí)現(xiàn)捕獲觸發(fā)事件的機(jī)制,即是給元素添加一個(gè)監(jiān)聽器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。給父元素添加capture.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)。給父元素設(shè)置.once事件只觸發(fā)一次榮耀·分享·共成長.prevent阻止默認(rèn)事件知識(shí)點(diǎn)2：v-pre&v-cloak&v-once榮耀·分享·共成長.prevent阻止默認(rèn)事件案例<divid="app"><ahref="">百度一下</a><br/>觸發(fā)事件，默認(rèn)的跳轉(zhuǎn)實(shí)現(xiàn)<ahref=""@click="link">百度一下</a><br/>觸發(fā)事件，默認(rèn)的行為被阻止<ahref=""@click.prevent="link">百度一下</a><br/></div><script>varvm=newVue({el:'#app',data:{},methods:{link(){console.log('觸發(fā)a標(biāo)簽的事件');}}})</script>使用場景：<a>刪除</a>知識(shí)點(diǎn)2：v-pre&v-cloak&v-once榮耀·分享·共成長可以使用v-cloak指令設(shè)置樣式，這些樣式會(huì)在Vue實(shí)例編譯結(jié)束時(shí)，從綁定的HTML元素上被移除。當(dāng)網(wǎng)絡(luò)較慢，網(wǎng)頁還在加載Vue.js，而導(dǎo)致Vue來不及渲染，這時(shí)頁面就會(huì)顯示出Vue源代碼。我們可以使用v-cloak指令來解決這一問題。知識(shí)點(diǎn)2：v-pre&v-cloak&v-once榮耀·分享·共成長v-cloak案例：<script>varapp=newVue({el:'#app',data:{context:'互聯(lián)網(wǎng)頭部玩家鐘愛的健身項(xiàng)目'}});</script><divid="app"v-cloak>{{context}}</div>css：[v-cloak]{display:none;}知識(shí)點(diǎn)2：v-pre&v-cloak&v-once榮耀·分享·共成長榮耀·分享·共成長.once事件只觸發(fā)一次知識(shí)點(diǎn)2：v-pre&v-cloak&v-once知識(shí)點(diǎn)2：v-pre&v-cloak&v-once榮耀·分享·共成長.once事件只觸發(fā)一次案例<divid="app">觸發(fā)事件，默認(rèn)的行為被阻止<ahref=""@click.once.prevent="link">百度一下</a><br/>觸發(fā)事件，默認(rèn)的行為被阻止，只有一次<ahref=""@click.once.prevent="link">百度一下</a><br/></div><script>varvm=newVue({el:'#app',data:{},methods:{link(){console.log('觸發(fā)a標(biāo)簽的事件');}}})</script>v-text用于渲染普通文本，無論何時(shí)，綁定的數(shù)據(jù)對(duì)象上msg屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。知識(shí)點(diǎn)3：v-text&v-html榮耀·分享·共成長榮耀·分享·共成長v-text使用<divid="app"> <div>原來的內(nèi)容{{msg}}</div> <divv-text="msg">原來的內(nèi)容</div><script> varvm=newVue({ el:'#app’, data:{ msg:'<h1>中國加油</h1>’ } });</script>知識(shí)點(diǎn)3：v-text&v-htmlv-html如果你想輸出真正的HTML，你需要使用v-html指令，v-text僅渲染標(biāo)簽，不能解析HTML代碼。知識(shí)點(diǎn)3：v-text&v-html榮耀·分享·共成長榮耀·分享·共成長v-html使用<divid="app"> <div>原來的內(nèi)容{{msg}}</div> <divv-html="msg">原來的內(nèi)容</div></div><script> varvm=newVue({ el:'#app’, data:{ msg:'<h1>中國加油</h1>’ } });</script>結(jié)果圖：知識(shí)點(diǎn)3：v-text&v-html相同點(diǎn)：都可以向頁面中插入內(nèi)容；不同點(diǎn)：位置不同-插值表達(dá)式（Mustache）在文本中，v-text/v-html在標(biāo)簽里對(duì)原來內(nèi)容的影響-插值表達(dá)式相當(dāng)于占位符，不會(huì)覆蓋原來的內(nèi)容，v-text/v-html指令會(huì)覆蓋頁面中原有的內(nèi)容帶有標(biāo)簽的字符串的展示樣式v-html指令，會(huì)以html響應(yīng)的形式展示字符串內(nèi)容相對(duì)來說，后續(xù)課程中插值表達(dá)式用的比較多，但是v-text和v-html頁需要掌握；知識(shí)點(diǎn)3：v-text&v-html知而獲智，智達(dá)高遠(yuǎn)

THANKSVue組件開發(fā)目錄5認(rèn)識(shí)組件化1Vue組件化開發(fā)247638子級(jí)向父級(jí)傳遞父級(jí)向子級(jí)傳遞父子組件通信注冊組件組件其他補(bǔ)充組件數(shù)據(jù)存放插槽slot人面對(duì)復(fù)雜問題的處理方式：任何一個(gè)人處理信息的邏輯能力都是有限的所以，當(dāng)面對(duì)一個(gè)非常復(fù)雜的問題時(shí)，我們不太可能一次性搞定一大堆的內(nèi)容。但是，我們?nèi)擞幸环N天生的能力，就是將問題進(jìn)行拆解。如果將一個(gè)復(fù)雜的問題，拆分成很多個(gè)可以處理的小問題，再將其放在整體當(dāng)中，你會(huì)發(fā)現(xiàn)大的問題也會(huì)迎刃而解。組件化也是類似的思想：如果我們將一個(gè)頁面中所有的處理邏輯全部放在一起，處理起來就會(huì)變得非常復(fù)雜，而且不利于后續(xù)的管理以及擴(kuò)展。但如果，我們講一個(gè)頁面拆分成一個(gè)個(gè)小的功能塊，每個(gè)功能塊完成屬于自己這部分獨(dú)立的功能，那么之后整個(gè)頁面的管理和維護(hù)就變得非常容易了。什么是組件化？Vue組件化開發(fā)我們將一個(gè)完整的頁面分成很多個(gè)組件。每個(gè)組件都用于實(shí)現(xiàn)頁面的一個(gè)功能塊。而每一個(gè)組件又可以進(jìn)行細(xì)分。Vue組件化思想組件化是Vue.js中的重要思想它提供了一種抽象，讓我們可以開發(fā)出一個(gè)個(gè)獨(dú)立可復(fù)用的小組件來構(gòu)造我們的應(yīng)用。任何的應(yīng)用都會(huì)被抽象成一顆組件樹。Vue組件化開發(fā)組件化思想的應(yīng)用：有了組件化的思想，我們在之后的開發(fā)中就要充分的利用它。盡可能的將頁面拆分成一個(gè)個(gè)小的、可復(fù)用的組件。這樣讓我們的代碼更加方便組織和管理，并且擴(kuò)展性也更強(qiáng)。所以，組件是Vue開發(fā)中，非常重要的一個(gè)篇章，要認(rèn)真學(xué)習(xí)。注冊組件的基本步驟Vue組件化開發(fā)組件的使用分成三個(gè)步驟：創(chuàng)建組件構(gòu)造器。注冊組件。使用組件。我們來看看通過代碼如何注冊組件。查看運(yùn)行結(jié)果：和直接使用一個(gè)div看起來并沒有什么區(qū)別。但是我們可以設(shè)想，如果很多地方都要顯示這樣的信息，我們是不是就可以直接使用<my-cpn></my-cpn>來完成呢？注冊組件步驟解析這里的步驟都代表什么含義呢？Vue組件化開發(fā)1.Vue.extend()：調(diào)用Vue.extend()創(chuàng)建的是一個(gè)組件構(gòu)造器。通常在創(chuàng)建組件構(gòu)造器時(shí)，傳入template代表我們自定義組件的模板。該模板就是在使用到組件的地方，要顯示的HTML代碼。事實(shí)上，這種寫法在Vue2.x的文檔中幾乎已經(jīng)看不到了，它會(huì)直接使用下面我們會(huì)講到的語法糖，但是在很多資料還是會(huì)提到這種方式，而且這種方式是學(xué)習(xí)后面方式的基礎(chǔ)。2.Vponent()：調(diào)用Vponent()是將剛才的組件構(gòu)造器注冊為一個(gè)組件，并且給它起一個(gè)組件的標(biāo)簽名稱。所以需要傳遞兩個(gè)參數(shù)：1、注冊組件的標(biāo)簽名2、組件構(gòu)造器。3.組件必須掛載在某個(gè)Vue實(shí)例下，否則它不會(huì)生效。（見下頁）我們來看下面我使用了三次<my-cpn></my-cpn>而第三次其實(shí)并沒有生效：第三部的解析Vue組件化開發(fā)Vue組件化開發(fā)注冊組件步驟解析當(dāng)我們通過調(diào)用Vponent()注冊組件時(shí)，組件的注冊是全局的。這意味著該組件可以在任意Vue示例下使用。如果我們注冊的組件是掛載在某個(gè)實(shí)例中,那么就是一個(gè)局部組件。在前面我們看到了組件樹：組件和組件之間存在層級(jí)關(guān)系。而其中一種非常重要的關(guān)系就是父子組件的關(guān)系。我們來看通過代碼如何組成的這種層級(jí)關(guān)系：父子組件錯(cuò)誤用法：以子標(biāo)簽的形式在Vue實(shí)例中使用因?yàn)楫?dāng)子組件注冊到父組件的components時(shí)，Vue會(huì)編譯好父組件的模塊。該模板的內(nèi)容已經(jīng)決定了父組件將要渲染的HTML（相當(dāng)于父組件中已經(jīng)有了子組件中的內(nèi)容了）。<child-cpn></child-cpn>是只能在父組件中被識(shí)別的。類似這種用法，<child-cpn></child-cpn>是會(huì)被瀏覽器忽略的。父組件和子組件Vue組件化開發(fā)Vue組件化開發(fā)注冊組件語法糖在上面注冊組件的方式，可能會(huì)有些繁瑣。Vue為了簡化這個(gè)過程，提供了注冊的語法糖。主要是省去了調(diào)用Vue.extend()的步驟，而是可以直接使用一個(gè)對(duì)象來代替。模塊的分離寫法剛才，我們通過語法糖簡化了Vue組件的注冊過程，另外還有一個(gè)地方的寫法比較麻煩，就是template模塊寫法。如果我們能將其中的HTML分離出來寫，然后掛載到對(duì)應(yīng)的組件上，必然結(jié)構(gòu)會(huì)變得非常清晰。Vue提供了兩種方案來定義HTML模塊內(nèi)容：使用<script>標(biāo)簽使用<template>標(biāo)簽Vue組件化開發(fā)組件可以訪問Vue實(shí)例數(shù)據(jù)嗎?Vue組件化開發(fā)組件是一個(gè)單獨(dú)功能模塊的封裝：這個(gè)模塊有屬于自己的HTML模板，也應(yīng)該有屬性自己的數(shù)據(jù)data。組件中的數(shù)據(jù)是保存在哪里呢？頂層的Vue實(shí)例中嗎？我們先來測試一下，組件中能不能直接訪問Vue實(shí)例中的data。我們發(fā)現(xiàn)不能訪問，而且即使可以訪問，如果將所有的數(shù)據(jù)都放在Vue實(shí)例中，Vue實(shí)例就會(huì)變的非常臃腫。

結(jié)論：Vue組件應(yīng)該有自己保存數(shù)據(jù)的地方。組件數(shù)據(jù)的存放組件自己的數(shù)據(jù)存放在哪里呢?組件對(duì)象也有一個(gè)data屬性(也可以有methods等屬性，下面我們有用到)。只是這個(gè)data屬性必須是一個(gè)函數(shù)。而且這個(gè)函數(shù)返回一個(gè)對(duì)象，對(duì)象內(nèi)部保存著數(shù)據(jù)。Vue組件化開發(fā)為什么是一個(gè)函數(shù)呢？為什么data在組件中必須是一個(gè)函數(shù)呢?首先，如果不是一個(gè)函數(shù)，Vue直接就會(huì)報(bào)錯(cuò)。其次，原因是在于Vue讓每個(gè)組件對(duì)象都返回一個(gè)新的對(duì)象，因?yàn)槿绻峭粋€(gè)對(duì)象的，組件在多次使用后會(huì)相互影響。Vue組件化開發(fā)父子組件的通信Vue組件化開發(fā)在上一個(gè)小節(jié)中，我們提到了子組件是不能引用父組件或者Vue實(shí)例的數(shù)據(jù)的。但是，在開發(fā)中，往往一些數(shù)據(jù)確實(shí)需要從上層傳遞到下層：比如在一個(gè)頁面中，我們從服務(wù)器請(qǐng)求到了很多的數(shù)據(jù)。其中一部分?jǐn)?shù)據(jù)，并非是我們整個(gè)頁面的大組件來展示的，而是需要下面的子組件進(jìn)行展示。這個(gè)時(shí)候，并不會(huì)讓子組件再次發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求，而是直接讓大組件(父組件)將數(shù)據(jù)傳遞給小組件(子組件)。如何進(jìn)行父子組件間的通信呢？Vue官方提到通過props向子組件傳遞數(shù)據(jù)。通過事件向父組件發(fā)送消息。在下面的代碼中，我直接將Vue實(shí)例當(dāng)做父組件，并且其中包含子組件來簡化代碼。真實(shí)的開發(fā)中，Vue實(shí)例和子組件的通信和父組件和子組件的通信過程是一樣的。props基本用法Vue組件化開發(fā)在組件中，使用選項(xiàng)props來聲明需要從父級(jí)接收到的數(shù)據(jù)。props的值有兩種方式：方式一：字符串?dāng)?shù)組，數(shù)組中的字符串就是傳遞時(shí)的名稱。方式二：對(duì)象，對(duì)象可以設(shè)置傳遞時(shí)的類型，也可以設(shè)置默認(rèn)值等。我們先來看一個(gè)最簡單的props傳遞：props數(shù)據(jù)驗(yàn)證Vue組件化開發(fā)在前面，我們的props選項(xiàng)是使用一個(gè)數(shù)組。我們說過，除了數(shù)組之外，我們也可以使用對(duì)象，當(dāng)需要對(duì)props進(jìn)行類型等驗(yàn)證時(shí)，就需要對(duì)象寫法了。驗(yàn)證都支持哪些數(shù)據(jù)類型呢？StringNumberBooleanArrayObjectDateFunctionSymbol當(dāng)我們有自定義構(gòu)造函數(shù)時(shí)，驗(yàn)證也支持自定義的類型。子級(jí)向父級(jí)傳遞Vue組件化開發(fā)props用于父組件向子組件傳遞數(shù)據(jù)，還有一種比較常見的是子組件傳遞數(shù)據(jù)或事件到父組件中。我們應(yīng)該如何處理呢？這個(gè)時(shí)候，我們需要使用自定義事件來完成。什么時(shí)候需要自定義事件呢？當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí)，就要用到自定義事件了。我們之前學(xué)習(xí)的v-on不僅僅可以用于監(jiān)聽DOM事件，也可以用于組件間的自定義事件。自定義事件的流程：在子組件中，通過$emit()來觸發(fā)事件。在父組件中，通過v-on來監(jiān)聽子組件事件。我們來看一個(gè)簡單的例子：我們之前做過一個(gè)兩個(gè)按鈕+1和-1，點(diǎn)擊后修改counter。我們整個(gè)操作的過程還是在子組件中完成，但是之后的展示交給父組件。這樣，我們就需要將子組件中的counter，傳給父組件的某個(gè)屬性，比如total。單擊此處添加大標(biāo)題自定義事件代碼Vue組件化開發(fā)父子組件的訪問方式：$childrenVue組件化開發(fā)有時(shí)候我們需要父組件直接訪問子組件，子組件直接訪問父組件，或者是子組件訪問跟組件。父組件訪問子組件：使用$children或$refsreference(引用)子組件訪問父組件：使用$parent我們先來看下$children的訪問this.$children是一個(gè)數(shù)組類型，它包含所有子組件對(duì)象。我們這里通過一個(gè)遍歷，取出所有子組件的message狀態(tài)。父子組件的訪問方式：$refs$children的缺陷：通過$children訪問子組件時(shí)，是一個(gè)數(shù)組類型，訪問其中的子組件必須通過索引值。但是當(dāng)子組件過多，我們需要拿到其中一個(gè)時(shí)，往往不能確定它的索引值，甚至還可能會(huì)發(fā)生變化。有時(shí)候，我們想明確獲取其中一個(gè)特定的組件，這個(gè)時(shí)候就可以使用$refs。$refs的使用：$refs和ref指令通常是一起使用的。首先，我們通過ref給某一個(gè)子組件綁定一個(gè)特定的ID。其次，通過this.$refs.ID就可以訪問到該組件了。Vue組件化開發(fā)父子組件的訪問方式：$parentVue組件化開發(fā)如果我們想在子組件中直接訪問父組件，可以通過$parent注意事項(xiàng)：盡管在Vue開發(fā)中，我們允許通過$parent來訪問父組件，但是在真實(shí)開發(fā)中盡量不要這樣做。子組件應(yīng)該盡量避免直接訪問父組件的數(shù)據(jù)，因?yàn)檫@樣耦合度太高了。如果我們將子組件放在另外一個(gè)組件之內(nèi)，很可能該父組件沒有對(duì)應(yīng)的屬性，往往會(huì)引起問題。另外，更不好做的是通過$parent直接修改父組件的狀態(tài)，那么父組件中的狀態(tài)將變得飄忽不定，很不利于我的調(diào)試和維護(hù)。非父子組件通信剛才我們討論的都是父子組件間的通信，那如果是非父子關(guān)系呢?非父子組件關(guān)系包括多個(gè)層級(jí)的組件，也包括兄弟組件的關(guān)系。在Vue1.x的時(shí)候，可以通過$dispatch和$broadcast完成$dispatch用于向上級(jí)派發(fā)事件。$broadcast用于向下級(jí)廣播事件。但是在Vue2.x都被取消了。在Vue2.x中，有一種方案是通過中央事件總線，也就是一個(gè)中介來完成。但是這種方案和直接使用Vuex的狀態(tài)管理方案還是遜色很多。并且Vuex提供了更多好用的功能，所以這里我們暫且不討論這種方案，后續(xù)我們專門學(xué)習(xí)Vuex的狀態(tài)管理。Vue組件化開發(fā)ABC為什么使用slotslot翻譯為插槽：在生活中很多地方都有插槽，電腦的USB插槽，插板當(dāng)中的電源插槽。插槽的目的是讓我們原來的設(shè)備具備更多的擴(kuò)展性。比如電腦的USB我們可以插入U(xiǎn)盤、硬盤、手機(jī)、音響、鍵盤、鼠標(biāo)等等。組件的插槽：組件的插槽也是為了讓我們封裝的組件更加具有擴(kuò)展性。讓使用者可以決定組件內(nèi)部的一些內(nèi)容到底展示什么。栗子：移動(dòng)網(wǎng)站中的導(dǎo)航欄。移動(dòng)開發(fā)中，幾乎每個(gè)頁面都有導(dǎo)航欄。導(dǎo)航欄我們必然會(huì)封裝成一個(gè)插件，比如nav-bar組件。一旦有了這個(gè)組件，我們就可以在多個(gè)頁面中復(fù)用了。Vue組件化開發(fā)

如何封裝這類組件呢？slot如何去封裝這類的組件呢？它們也很多區(qū)別，但是也有很多共性。如果，我們每一個(gè)單獨(dú)去封裝一個(gè)組件，顯然不合適：比如每個(gè)頁面都返回，這部分內(nèi)容我們就要重復(fù)去封裝。但是，如果我們封裝成一個(gè)，好像也不合理：有些左側(cè)是菜單，有些是返回，有些中間是搜索，有些是文字，等等。如何封裝合適呢？抽取共性，保留不同。最好的封裝方式就是將共性抽取到組件中，將不同暴露為插槽。一旦我們預(yù)留了插槽，就可以讓使用者根據(jù)自己的需求，決定插槽中插入什么內(nèi)容。是搜索框，還是文字，還是菜單。由調(diào)用者自己來決定。這就是為什么我們要學(xué)習(xí)組件中的插槽slot的原因。Vue組件化開發(fā)了解了為什么用slot，我們再來談?wù)勅绾问褂胹lot？在子組件中，使用特殊的元素<slot>就可以為子組件開啟一個(gè)插槽。該插槽插入什么內(nèi)容取決于父組件如何使用。我們通過一個(gè)簡單的例子，來給子組件定義一個(gè)插槽：<slot>中的內(nèi)容表示，如果沒有在該組件中插入任何其他內(nèi)容，就默認(rèn)顯示該內(nèi)容有了這個(gè)插槽后，父組件如何使用呢？Vue組件化開發(fā)slot基本使用Vue組件化開發(fā)具名插槽slot當(dāng)子組件的功能復(fù)雜時(shí)，子組件的插槽可能并非是一個(gè)。比如我們封裝一個(gè)導(dǎo)航欄的子組件，可能就需要三個(gè)插槽，分別代表左邊、中間、右邊。那么，外面在給插槽插入內(nèi)容時(shí)，如何區(qū)分插入的是哪一個(gè)呢？這個(gè)時(shí)候，我們就需要給插槽起一個(gè)名字。如何使用具名插槽呢？非常簡單，只要給slot元素一個(gè)name屬性即可。<slotname='myslot'></slot>Vue全局指令vm.$refVue全局指令ref主要有兩種用法：1、ref加在普通的元素上，獲取頁面中所有含有ref屬性的DOM元素。使用的時(shí)候用this.$refs.（ref值）獲取到的是dom元素。<!--`vm.$refs.p`將會(huì)是DOM結(jié)點(diǎn)--><pref="p">hello</p>注意：如vm.$refs.hello，獲取頁面中含有屬性ref=“hello”的DOM元素，如果有多個(gè)元素，那么只返回最后一個(gè)。2、ref加在子組件上，用this.refs.（ref值）獲取到的是組件實(shí)例，可以使用組件的所有方法。在使用方法的時(shí)候直接this.refs.（ref值）.方法（）就可以使用了。<!--`vm.$refs.child`將會(huì)是子組件實(shí)例--><child-componentref="child"></child-component>注意：ref需要在dom渲染完成后才會(huì)有，在使用的時(shí)候確保dom已經(jīng)渲染完成。比如在生命周期mounted(){}鉤子中調(diào)用，或者在this.$nextTick(()=>{})中調(diào)用。Vue.useVue全局指令通過全局方法Vue.use()使用插件。它需要在你調(diào)用newVue()啟動(dòng)應(yīng)用之前完成。//調(diào)用`MyPlugin.install(Vue)`Vue.use(MyPlugin)newVue({//...組件選項(xiàng)})Vue.use會(huì)自動(dòng)阻止多次注冊相同插件，屆時(shí)即使多次調(diào)用也只會(huì)注冊一次該插件。Vue.js官方提供的一些插件(例如vue-router)在檢測到Vue是可訪問的全局變量時(shí)會(huì)自動(dòng)調(diào)用Vue.use()。然而在像CommonJS這樣的模塊環(huán)境中，你應(yīng)該始終顯式地調(diào)用Vue.use()vm.$optionsVue全局指令vm.$options是用來獲取data屬性之外屬性的方法。通過這種方式我們可以定義一些變量屬性，避免污染全局。請(qǐng)視情況使用。 newVue({customOption:'foo',created:function(){console.log(this.$options.customOption)//=>'foo'}})Vue全局指令vm.$el獲取Vue實(shí)例使用的根DOM元素。ABrender簡單的說，在vue中我們使用模板HTML語法來組建頁面的，使用render函數(shù)我們可以用js語言來構(gòu)建DOM。因?yàn)関ue是虛擬DOM，所以在拿到template模板時(shí)也要轉(zhuǎn)譯成VNode的函數(shù)，而用render函數(shù)構(gòu)建DOM，vue就免去了轉(zhuǎn)譯的過程。當(dāng)使用render函數(shù)描述虛擬DOM時(shí)，vue提供一個(gè)函數(shù)，這個(gè)函數(shù)是就構(gòu)建虛擬DOM所需要的工具。官網(wǎng)上給他起了個(gè)名字叫createElement。還有約定它的簡寫叫h。createElementVue全局指令Vue.js利用createElement方法創(chuàng)建VNode。createElement方法實(shí)際上是對(duì)_createElement方法的封裝，它允許傳入的參數(shù)更加靈活，在處理這些參數(shù)后，調(diào)用真正創(chuàng)建VNode的函數(shù)_createElement。_createElement方法有5個(gè)參數(shù)，context表示VNode的上下文環(huán)境，它是Component類型；tag表示標(biāo)簽，它可以是一個(gè)字符串，也可以是一個(gè)Component；data表示VNode的數(shù)據(jù)，它是一個(gè)VNodeData類型，可以在flow/vnode.js中找到它的定義，這里先不展開說；children表示當(dāng)前VNode的子節(jié)點(diǎn)，它是任意類型的，它接下來需要被規(guī)范為標(biāo)準(zhǔn)createElementVue全局指令

的VNode數(shù)組；normalizationType表示子節(jié)點(diǎn)規(guī)范的類型，類型不同規(guī)范的方法也就不一樣，它主要是參考render函數(shù)是編譯生成的還是用戶手寫的。那么至此，我們大致了解了createElement創(chuàng)建VNode的過程，每個(gè)VNode有children，children每個(gè)元素也是一個(gè)VNode，這樣就形成了一個(gè)VNodeTree，它很好的描述了我們的DOMTree?；氐絤ountComponent函數(shù)的過程，我們已經(jīng)知道vm._render是如何創(chuàng)建了一個(gè)VNode，接下來就是要把這個(gè)VNode渲染成一個(gè)真實(shí)的DOM并渲染出來，這個(gè)過程是通過vm._update完成的，接下來分析一下這個(gè)過程。THANKSVue-cli腳手架VueCLI安裝前注意事項(xiàng)Vue-cli腳手架4配置文件CLI插件vuecreate創(chuàng)建項(xiàng)目安裝@vue/cli

vue-cli舊版本卸載VueCLI的包名稱由

vue-cli改成了@vue/cli。如果你已經(jīng)全局安裝了舊版本的

vue-cli(1.x或2.x)，你需要先通過npmuninstallvue-cli-g或yarnglobalremovevue-cli卸載它。安裝vue-cli3.0可以使用下列任一命令來安裝新版本npminstall-g@vue/cli或yarnglobaladd@vue/cli。這里node版本必須在8.9或更高版本，可以通過node-v檢測，如果低于8.9可去官網(wǎng)下載：/zh-cn/download/這里在安裝的時(shí)候可能會(huì)安裝的特別慢或者安裝不下來的情況，這里可以用cnpm去安裝：

1.先導(dǎo)入cnpmnpminstall-gcnpm--registry=

2.安裝@vue/clicnpminstall-g@vue/cli。然后通過vue-V檢測版本是否在3.0及以上VueCLI安裝前注意事項(xiàng)Vue-cli腳手架安裝@vue/cli1.安裝@vue/cli默認(rèn)簡單配置和手動(dòng)配置cnpm

install

-g

@vue/cli@3.3.0

2.使用vuecreate來創(chuàng)建一個(gè)新項(xiàng)目。默認(rèn)簡單配置和手動(dòng)配置Vue-cli腳手架使用vuecreate

來創(chuàng)建一個(gè)新項(xiàng)目。Vue-cli腳手架vue項(xiàng)目用到的模塊路由history模式Vue-cli腳手架選擇Sass/Scss預(yù)處理選擇Standard標(biāo)準(zhǔn)語法檢查及兩模塊使用vuecreate

來創(chuàng)建一個(gè)新項(xiàng)目。Vue-cli腳手架各個(gè)模塊存為單獨(dú)的頁面是否存配置記錄,如果存則下次可選擇此記錄配置使用vuecreate

來創(chuàng)建一個(gè)新項(xiàng)目。Vue-cli腳手架進(jìn)入項(xiàng)目文件夾并且vue啟動(dòng)項(xiàng)目使用vuecreate

來創(chuàng)建一個(gè)新項(xiàng)目。Vue-cli腳手架訪問vue項(xiàng)目界面使用vuecreate

來創(chuàng)建一個(gè)新項(xiàng)目。CLI插件Vue-cli腳手架vue項(xiàng)目配置中已經(jīng)安裝的模塊CLI插件Vue-cli腳手架Vue項(xiàng)目的常用安裝的模塊Elment-uiMint-uiVant在cmd中安裝ui模塊并且main.js中配置CLI插件Vue-cli腳手架Vue項(xiàng)目的常用安裝的模塊SwiperAxios在cmd中安裝ui模塊并且main.js中配置配置文件Vue-cli腳手架vue.config.js去掉語法檢查Vue代理配置及修改端口號(hào)配置文件Vue-cli腳手架Vue項(xiàng)目結(jié)構(gòu)謝謝觀看Vue路由初識(shí)路由vue路由基礎(chǔ)2query方式傳參什么是動(dòng)態(tài)路由vue-router基本使用vue-router工作原理路由對(duì)象屬性params方式傳參什么是嵌套路由9什么是命名視圖什么是命名路由常用的router的指令初識(shí)路由對(duì)于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源；vue-router工作原理SPA(singlepageapplication):單一頁面應(yīng)用程序，只有一個(gè)完整的頁面；它在加載頁面時(shí)，不會(huì)加載整個(gè)頁面，而是只更新某個(gè)指定的容器中內(nèi)容。vue-router使用

path-to-regexp

作為路徑匹配引擎，用來匹配path和params單頁面應(yīng)用(SPA)的核心之一是:更新視圖而不重新請(qǐng)求頁面vue-router在實(shí)現(xiàn)單頁面前端路由時(shí)，提供了三種方式：Hash模式和History模式；根據(jù)mode參數(shù)以及運(yùn)行環(huán)境決定采用哪一種方式初識(shí)路由vue路由基礎(chǔ)引入vue框架和vue-router模塊生成子組件或?qū)胱咏M件使用VueRouter實(shí)例化VueRouter配置路由掛路由使用路由router-link和router-viewvue路由基礎(chǔ)vue-router

基本使用使用路由對(duì)象屬性在使用了vue-router的應(yīng)用中，路由對(duì)象會(huì)被注入每個(gè)組件中，賦值為this.$route，并且當(dāng)路由切換時(shí)，路由對(duì)象會(huì)被更新。vue路由基礎(chǔ)使用路由對(duì)象屬性vue路由基礎(chǔ)$route.path

字符串，等于當(dāng)前路由對(duì)象的路徑，會(huì)被解析為絕對(duì)路徑，如"/home/news"。$route.params

對(duì)象，包含路由中的動(dòng)態(tài)片段和全匹配片段的鍵值對(duì)。$route.query

對(duì)象，包含路由中查詢參數(shù)的鍵值對(duì)。例如，對(duì)于/home/news/detail/01?favorite=yes，會(huì)得到$route.query.favorite=='yes'。$route.matched

數(shù)組，包含當(dāng)前匹配的路徑中所包含的所有片段所對(duì)應(yīng)的配置參數(shù)對(duì)象。$

當(dāng)前路徑的名字，如果沒有使用具名路徑，則名字為空。Vue路由傳參vue路由傳參什么是動(dòng)態(tài)路由動(dòng)態(tài)路由是指路由器能夠自動(dòng)的建立自己的路由表，并且能夠根據(jù)實(shí)際情況的變化實(shí)時(shí)地進(jìn)行調(diào)整。Vue路由傳參的主要有query和params兩種方式Query方式傳參vue路由傳參query傳值字符串和對(duì)象寫法$route.query接收query對(duì)象傳值Params方式傳參vue路由傳參params傳值字符串和對(duì)象寫法$route.params接收params對(duì)象傳值使用vuecreate

來創(chuàng)建一個(gè)新項(xiàng)目vue路由傳參$router.push編程式路由Vue-router在vue-cli項(xiàng)目中的使用Vue-router的導(dǎo)入實(shí)例化及配置和導(dǎo)出路由高級(jí)使用Vue-router在vue-cli項(xiàng)目中的使用路由高級(jí)使用子組件Home.vue和About.vueVue-router在vue-cli項(xiàng)目中的使用路由高級(jí)使用Main.js中導(dǎo)入router對(duì)象并在Vue中掛載Vue-router在vue-cli項(xiàng)目中的使用路由高級(jí)使用Router-link實(shí)現(xiàn)路由跳轉(zhuǎn)什么是嵌套路由路由高級(jí)使用嵌套路由就是路由里面嵌套他的子路由，子路由關(guān)鍵屬性children每一個(gè)子路由里面可以嵌套多個(gè)組件，子組件又有路由導(dǎo)航和路由容器舉例：假設(shè)page頁面下包含home子組件和goods子組件配置嵌套路由（在page路由下增加一個(gè)children屬性，配置home和goods兩個(gè)子組件路由）什么是嵌套路由路由高級(jí)使用什么是命名路由給路由命名就是在routers配置路由的時(shí)候加一個(gè)name屬性，特別是在嵌套路由path名稱特別長的時(shí)候，通過name名稱來標(biāo)識(shí)一個(gè)路由更加方便一些。以下四種方式都可以導(dǎo)航到/page/home路徑：template模板里什么是命名視圖路由高級(jí)使用簡單來說就是，給不同的router-view定義不同的名字，通過名字進(jìn)行對(duì)應(yīng)組件的渲染。如果router-view沒有設(shè)置名字，那么默認(rèn)名字為default。適用場景

有時(shí)候我們想在一個(gè)界面里同時(shí)(同級(jí))展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有

topNav(頂部導(dǎo)航)、sidebar(側(cè)導(dǎo)航)和main(主要內(nèi)容)三個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場了。配置路由：根路由下定義了三個(gè)組件index(主內(nèi)容)：映射在router-view默認(rèn)視圖上。topNav(頂部導(dǎo)航)：映射在router-view的name為top的視圖上。sideNav(側(cè)邊欄)：映射在router-view的name為side的視圖上。常用的router的指令路由高級(jí)使用路由元信息meta定義對(duì)象的keepAlive使用常用的router的指令路由高級(jí)使用路由衛(wèi)士全局路由衛(wèi)士beforeEach先拋出一個(gè)問題,在SPA項(xiàng)目中如何修改網(wǎng)頁標(biāo)題?

網(wǎng)頁標(biāo)題是通過<title></title>來顯示的,但是SPA只有一個(gè)固定的HTML,切換到不同頁面時(shí),標(biāo)題并不會(huì)變化,但是可以通過JavaScript修改window.document.title='要修改的標(biāo)題'

那么問題來了,在VUE工程里,在哪里,什么時(shí)候修改呢?比較理想的一個(gè)方法是,在路由頁面發(fā)生改變時(shí),統(tǒng)一配置.vue-router提供了導(dǎo)航鉤子beforeEach和afterEach,它們會(huì)在路由即將改變和改變后觸發(fā),所以設(shè)置標(biāo)題可以在beforeEach中完成.導(dǎo)航鉤子有3個(gè)參數(shù)

·to即將進(jìn)入的目標(biāo)的路由對(duì)象

·from當(dāng)前導(dǎo)航即將要離開的路由對(duì)象

·next調(diào)用該方法后才能進(jìn)入下一個(gè)鉤子常用的router的指令路由高級(jí)使用全局路由衛(wèi)士afterEach某些頁面需要判斷是否登錄，如果登錄了可以訪問，否則跳轉(zhuǎn)到登錄頁面。這里我們通過

localStorage來簡易判斷：常用的router的指令路由高級(jí)使用局部衛(wèi)士beforeRouteEnter謝謝觀看VueX狀態(tài)管理什么是Vuexvuex基礎(chǔ)stateVuex狀態(tài)管理模式mutationsgettersactionsmodulesdevtoolsplugins

vuex基礎(chǔ)什么是Vuex

Vuex是一個(gè)專為

Vue.js

應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化.Vuex

作用狀態(tài)管理-非父子通信緩存后端數(shù)據(jù)避免重復(fù)請(qǐng)求，影響用戶體驗(yàn)時(shí)光旅行-調(diào)試什么是vuex安裝npminstallvuex--savesrc中創(chuàng)建store/index.js文件在store.js中導(dǎo)入vuex狀態(tài)管理庫

importVuefrom'vue’

importVuexfrom'vuex'Vue.use(Vuex)實(shí)例化并導(dǎo)出vuexExportdefaultnewVuex.Store({…})vuex基礎(chǔ)Vuex狀態(tài)管理模式使用步驟Vuex使用原理圖Vuex使用Vuex

的對(duì)象stateMutationsActionsGettersmodulespluginsdevtoolsVuex中的stateVuex的使用state:單一狀態(tài)樹

,每個(gè)應(yīng)用將僅僅包含一個(gè)

store

實(shí)例,vuex的基本數(shù)據(jù)，用來存儲(chǔ)變量。store/index.js定義state子組件template使用stateVuex中muationsVuex的使用提交更新state數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。每個(gè)mutation都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler)。store/index.js定義mutations子組件template使用mutationsVuex中actionsVuex的使用

actions提交的是mutations，而不是直接變更狀態(tài),actions可以包含任意異步操作。store/index.js定義actions子組件template使用actionsVuex中g(shù)ettersVuex的使用store/index.js定義getters從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性,具有返回值的方法子組件template使用gettersVuex中modulesVuex的使用模塊化vuex，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。store/index.js定義modules子組件template定義子模塊cart子組件template使用modules中的vuex對(duì)象Vuex中PluginsVuex的使用vuex

可以提供一些組件的使用，這個(gè)參數(shù)可以訂閱一個(gè)函數(shù)，讓這個(gè)函數(shù)在所有的mutations結(jié)束之后執(zhí)行。Devtools工具Vuex的使用工具包的安裝vue-devtools

工具包：/vuejs/vue-devtoolsDevtools的調(diào)試使用mapState,mapGetters,mapActions的使用Vuex的使用mapState,mapGetters是把state,getters對(duì)象映射到computed中，mapActions是把a(bǔ)ctions中的方法映射到methods中謝謝觀看Vue動(dòng)畫Vue動(dòng)畫transition組件使用@keyframes創(chuàng)建CSS動(dòng)畫appear初始渲染動(dòng)畫什么是過渡和動(dòng)畫 自定義類名結(jié)合animate.css實(shí)現(xiàn)動(dòng)畫 鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫Vue動(dòng)畫什么是過渡和動(dòng)畫CSS3的出現(xiàn)，使得前端動(dòng)畫直接上了一個(gè)層次。我們可以拋掉落后的.animate()方法，通過transition、animation等樣式屬性，只需要配置起點(diǎn)終點(diǎn)、時(shí)間、加速度曲線，甚至還可以配置關(guān)鍵幀、循環(huán)播放等，就可以實(shí)現(xiàn)超級(jí)高大上的動(dòng)效，同時(shí)還不用小心翼翼地避開性能問題。而Vue則是再一次優(yōu)化了動(dòng)畫的使用，提供了多組件過渡、多元素過渡、CSS動(dòng)畫、Javascript動(dòng)畫等各種方式，開發(fā)者可以很方便地實(shí)現(xiàn)一些常用的列表過渡、頁面切換等動(dòng)畫效果。不知道大家平時(shí)用的多不多，但如果你也有仔細(xì)研究的話，會(huì)發(fā)現(xiàn)還是挺有意思的。Vue動(dòng)畫transition組件<transition>元素作為單個(gè)元素/組件的過渡效果，它只會(huì)把過渡效果應(yīng)用到其包裹的內(nèi)容上，而不會(huì)額外渲染DOM元素，也不會(huì)出現(xiàn)在檢測過的組件層級(jí)中。Vue過渡主要分為兩類：CSS動(dòng)畫和Javascript動(dòng)畫。根據(jù)官方描述，Vue在插入、更新或者移除DOM時(shí)，提供多種不同方式的應(yīng)用過渡效果，舉例如下：在CSS過渡和動(dòng)畫中自動(dòng)應(yīng)用class（CSS動(dòng)畫）可以配合使用第三方CSS動(dòng)畫庫，如Animate.css（CSS動(dòng)畫）在過渡鉤子函數(shù)中使用JavaScript直接操作DOM（Javascript動(dòng)畫）可以配合使用第三方JavaScript動(dòng)畫庫，如Velocity.js（Javascript動(dòng)畫）Vue動(dòng)畫CSStransitionCSStransitions提供了一種在更改CSS屬性時(shí)控制動(dòng)畫速度的方法。其可以讓屬性變化成為一個(gè)持續(xù)一段時(shí)間的過程，而不是立即生效的。比如，將一個(gè)元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用CSStransitions后該元素的顏色將逐漸從白色變?yōu)楹谏?，按照一定的曲線速率變化。這個(gè)過程可以自定義。通常將兩個(gè)狀態(tài)之間的過渡稱為隱式過渡（implicittransitions），因?yàn)殚_始與結(jié)束之間的狀態(tài)由瀏覽器決定。transition使用CSStransitions可以決定哪些屬性發(fā)生動(dòng)畫效果(明確地列出這些屬性)，何時(shí)開始(設(shè)置delay），持續(xù)多久(設(shè)置duration)以及如何動(dòng)畫(定義timingfuntion，比如勻速地或先快后慢)。CSS過渡由簡寫屬性transition定義是最好的方式：CSS過渡Vue動(dòng)畫csstransition的基本使用csstransition屬性說明property 指定哪個(gè)或哪些CSS屬性用于過渡。只有指定的屬性才會(huì)在過渡中發(fā)生動(dòng)畫，其它屬性仍如通常那樣瞬間變化。all則為全部屬性duration 指定過渡的時(shí)長?；蛘邽樗袑傩灾付ㄒ粋€(gè)值，或者指定多個(gè)值，為每個(gè)屬性指定不同的時(shí)長timing-function 指定一個(gè)函數(shù)，定義屬性值怎么變化。常用如linear、easedelay 指定延遲，即屬性開始變化時(shí)與過渡開始發(fā)生時(shí)之間的時(shí)長例子，下面是簡寫和不簡寫的例子：Vue動(dòng)畫transition組件使用Vue提供了transition的封裝組件，可以給元素和組件添加entering/leaving過渡。我們看看有哪些情況下可以使用transition：條件渲染(使用v-if)條件展示(使用v-show)動(dòng)態(tài)組件組件根節(jié)點(diǎn)transition的封裝組件，主要是結(jié)合組件生命周期，在一些特殊邏輯（如v-if、v-show、v-for）里增加鉤子，來觸發(fā)動(dòng)畫的實(shí)現(xiàn)。我們知道，Vue里面實(shí)現(xiàn)動(dòng)畫過渡有CSS和Javascript兩種，而兩種又是可以結(jié)合的。Vue動(dòng)畫transition組件例子Vue動(dòng)畫transition組件例子解析這里是使用的CSStransition方式來實(shí)現(xiàn)動(dòng)畫過渡的，我們看看在切換v-if的時(shí)候都發(fā)生了什么:(1)v-if綁定值的變更，導(dǎo)致插入或刪除包含在transition組件中的元素。(2)自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了CSS過渡或動(dòng)畫。這里的確使用CSS過渡，于是會(huì)在元素添加時(shí)添加CSS類名，并判斷動(dòng)畫加載完之后刪除CSS類名。(3)如果過渡組件提供了JavaScript鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。（這里由于沒有使用到，故不會(huì)執(zhí)行）(4)如果沒有找到JavaScript鉤子并且也沒有檢測到CSS過渡/動(dòng)畫，DOM操作(插入/刪除)在下一幀中立即執(zhí)行。（當(dāng)然在我們的例子中，這一步也不會(huì)生效）Vue動(dòng)畫transition組件實(shí)現(xiàn)邏輯根據(jù)前面內(nèi)容，我們可以獲得以下的信息?？梢允褂胷equestAnimationFrame來請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來更新動(dòng)畫當(dāng)CSStransition結(jié)束時(shí)，會(huì)觸發(fā)transitionend事件所以結(jié)合之前的Vue源碼，能大概得到這里的實(shí)現(xiàn)方式transition組件關(guān)注子元素是否展示，包括使用v-if/v-else/v-for等指令綁定數(shù)據(jù)生成的元素。當(dāng)元素狀態(tài)變更（display->none或none->display）時(shí)，預(yù)埋的鉤子檢測是否應(yīng)用了CSS過渡。若使用了CSS過渡，則分兩種情況討論。Vue動(dòng)畫transition組件實(shí)現(xiàn)邏輯進(jìn)入動(dòng)畫可當(dāng)元素插入完成后（mounted），給元素添加對(duì)應(yīng)v-enter和v-enter-active類名，此時(shí)元素開始動(dòng)畫過渡。同時(shí)通過requestAnimationFrame來指定下一幀繪制前，給元素添加v-enter-to類名，同時(shí)移除v-enter類名。設(shè)置動(dòng)畫結(jié)束時(shí)間，或者通過transitionend事件監(jiān)聽，在過渡結(jié)束后，移除v-enter-to和v-enter-active類名。離開動(dòng)畫

當(dāng)元素刪除前（beforeDestroy），給元素添加對(duì)應(yīng)v-leave和v-leave-active類名，此時(shí)元素開始動(dòng)畫過渡。同時(shí)通過requestAnimationFrame來指定下一幀繪制前，給元素添加v-leave-to類名，同時(shí)移除v-leave類名。設(shè)置動(dòng)畫結(jié)束時(shí)間，或者通過transitionend事件監(jiān)聽，在過渡結(jié)束后，移除v-leave-to和v-leave-active類名，同時(shí)執(zhí)行元素刪除操作。Vue動(dòng)畫關(guān)鍵幀動(dòng)畫通一旦完成動(dòng)畫的時(shí)間設(shè)置，接下來就需要定義動(dòng)畫的表現(xiàn)。通過使用@keyframes建立兩個(gè)或兩個(gè)以上關(guān)鍵幀來實(shí)現(xiàn)。每一個(gè)關(guān)鍵幀都描述了動(dòng)畫元素在給定的時(shí)間點(diǎn)上應(yīng)該如何渲染。因?yàn)閯?dòng)畫的時(shí)間設(shè)置是通過CSS樣式定義的，關(guān)鍵幀使用percentage來指定動(dòng)畫發(fā)生的時(shí)間點(diǎn)。0%表示動(dòng)畫的第一時(shí)刻，100%表示動(dòng)畫的最終時(shí)刻。因?yàn)檫@兩個(gè)時(shí)間點(diǎn)十分重要，所以還有特殊的別名：from和to。當(dāng)然，也可包含額外可選的關(guān)鍵幀，描述動(dòng)畫開始和結(jié)束之間的狀態(tài)。Vue動(dòng)畫CSSanimationCSSanimations使得可以將從一個(gè)CSS樣式配置轉(zhuǎn)換到另一