1 首頁(yè)模塊知識(shí)點(diǎn)
圖標(biāo)使用iconfont? 動(dòng)態(tài)渲染數(shù)據(jù)使用axios(e sou)發(fā)送ajax請(qǐng)求json文件數(shù)據(jù),
0.1針對(duì)如何使用外部組件 在router下面配置index
0.2 外部組件如何使用局部組件(即是父子組件)肖抱?
只需要在外部組件中引用局部組件,然后聲明組件即可
例如:
0.3 如何使用ajax獲取json數(shù)據(jù)
第一步:下載 axios插件 他能夠?qū)崿F(xiàn)跨域 能發(fā)送不同的請(qǐng)求 使用方法 在外部組件中引入就可與使用
第二步:如何實(shí)現(xiàn)父子間傳值
引用官網(wǎng)的一句話:父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞备典,事件向上傳遞。父組件通過(guò) prop 給子組件下發(fā)數(shù)據(jù)意述,子組件通過(guò)事件給父組件發(fā)送消息提佣,如下圖所示:
父組件中定義個(gè)data 返回json數(shù)據(jù)
子組件中接收父組件傳來(lái)的數(shù)據(jù)
在頭部組件中 通過(guò)屬性形式傳遞使用
關(guān)于父子組件傳值說(shuō)好了。
1.1接下來(lái)來(lái)說(shuō)一下ajax如何獲取json數(shù)據(jù)
1.01? 首先要定義一個(gè)生命周期函數(shù)(mounted 讀mang ti)? 在生命周期函數(shù)中寫(xiě)一個(gè)調(diào)用方法 也就是當(dāng)前指向的獲取數(shù)據(jù)this.getHomeInfor
1.02 生命周期函數(shù)寫(xiě)完后 我們還需要在methods(讀me fors) 寫(xiě)一個(gè)調(diào)用放法的函數(shù)getHomeInfor通過(guò)get方式獲取ajax請(qǐng)求? 異步操作它返回值是一個(gè)promise對(duì)象,可以.用then(this..getHomeInfoSucc)來(lái)表示
1.03? 再寫(xiě)一個(gè)與之對(duì)應(yīng)的 再寫(xiě)一個(gè)與之對(duì)應(yīng)的getHomeInfoSucc(res)方法這個(gè)方法就可以接收到模擬數(shù)據(jù)的結(jié)果 ,console.log(res)然后打印結(jié)果 res就是resolved(res)這時(shí)候如果結(jié)果是res就能夠訪問(wèn)到j(luò)son文件
通過(guò)router-link to 動(dòng)態(tài)賦值
總結(jié):promise是javascript異步接口的規(guī)范欲险,他有三個(gè)狀態(tài)值 pending(異步操作未完成) rejected(異步操作失敻湟馈)resolve 異步操作已完成
css3 flex布局 彈性盒子
display:flex匹涮;
當(dāng)flex=1時(shí) 它能夠把盒子等分模塊?
flex垂直居中