組件化
組件為Vue強(qiáng)大的特性之一,可以進(jìn)行重復(fù)利用,封裝可重用的代碼,讓我們代碼模塊化
全局注冊(cè)語法:Vue.component(targetName,options).組件名不能重復(fù),否則會(huì)覆蓋.如果你使用webpack來構(gòu)建,即使這個(gè)組件你不使用,也會(huì)包含在最終的構(gòu)建中,無疑增加了下載流量
局部注冊(cè)格式為:組件名:模板對(duì)象.給指定的Vue實(shí)例注冊(cè)組件,多個(gè)Vue實(shí)例之間是獨(dú)立的.需要在Vue實(shí)例中,添加components屬性,進(jìn)行注冊(cè)組件
使用組件,則需要2步:1)引入組件; 2)注冊(cè)組件
給組件傳遞參數(shù),使用prop,你可以在組件上注冊(cè)的一些自定義 attribute.當(dāng)一個(gè)值傳遞給一個(gè) prop attribute 的時(shí)候,它就變成了那個(gè)組件實(shí)例的一個(gè)屬性
自定義事件,子組件發(fā)送數(shù)據(jù)給父組件,子組件可以通過調(diào)用內(nèi)建的 $emit方法并傳入事件名稱來觸發(fā)一個(gè)事件
通過插槽分發(fā)內(nèi)容,可以向一個(gè)組件傳遞內(nèi)容
Vue路由
?this.$router.push進(jìn)行編程式路由跳轉(zhuǎn);<router-link to="/a"> 進(jìn)行頁面按鈕式路由跳轉(zhuǎn);?this.$route.params獲取路由傳遞參數(shù);this.$route.query獲取路由傳遞參數(shù);(params 和 query 都是傳遞參數(shù)的,params不會(huì)在url上面出現(xiàn),并且params參數(shù)是路由的一部分,是一定要存在的 query則是我們通乘郑看到的url后面的跟在蝠引?后面的顯示參數(shù).地址欄出現(xiàn)#是hash模式,#以后的不被后臺(tái)獲取;history模式,具有對(duì)url歷史記錄進(jìn)行修改的功能,需要后臺(tái)配合處理404的問題.在微信支付,分享中url作為參數(shù)傳遞時(shí)#不能滿足需求.index中Router對(duì)象添加mode: "history".路由的鉤子函數(shù)首頁可以控制導(dǎo)航跳轉(zhuǎn),beforeEach,afterEach等,一般用于頁面title的修改.一些需要登錄才能調(diào)整頁面的重定向功能)
Vuex狀態(tài)管理模式
vuex 是一個(gè)專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,這個(gè)狀態(tài)我們可以理解為在data中的屬性,需要共享給其他組件使用的部分.有默認(rèn)的五種基本的對(duì)象:1.state:存儲(chǔ)狀態(tài)(變量); 2.getters:對(duì)數(shù)據(jù)獲取之前的再次編譯,可以理解為state的計(jì)算屬性.我們?cè)诮M件中使用 $sotre.getters.fun(); 3.mutations:修改狀態(tài),并且是同步的.在組件中使用$store.commit('',params).這個(gè)和我們組件中的自定義事件類似; 4.actions:異步操作.在組件中使用是$store.dispath(''); 5.modules:store的子模塊,為了開發(fā)大型項(xiàng)目,方便狀態(tài)管理而使用的。這里就不解釋了,用起來和上面的一樣