2018-08-30 vue項目實戰(zhàn)經(jīng)驗

1 首頁模塊知識點

圖標使用iconfont? 動態(tài)渲染數(shù)據(jù)使用axios(e sou)發(fā)送ajax請求json文件數(shù)據(jù),

0.1針對如何使用外部組件 在router下面配置index

0.2 外部組件如何使用局部組件(即是父子組件)?

只需要在外部組件中引用局部組件,然后聲明組件即可

例如:

0.3 如何使用ajax獲取json數(shù)據(jù)

第一步:下載 axios插件 他能夠實現(xiàn)跨域 能發(fā)送不同的請求 使用方法 在外部組件中引入就可與使用


第二步:如何實現(xiàn)父子間傳值

引用官網(wǎng)的一句話:父子組件的關系可以總結為 prop 向下傳遞,事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù),子組件通過事件給父組件發(fā)送消息,如下圖所示:

父組件中定義個data 返回json數(shù)據(jù)


子組件中接收父組件傳來的數(shù)據(jù)


在頭部組件中 通過屬性形式傳遞使用


關于父子組件傳值說好了。

1.1接下來來說一下ajax如何獲取json數(shù)據(jù)

1.01? 首先要定義一個生命周期函數(shù)(mounted 讀mang ti)? 在生命周期函數(shù)中寫一個調(diào)用方法 也就是當前指向的獲取數(shù)據(jù)this.getHomeInfor


1.02 生命周期函數(shù)寫完后 我們還需要在methods(讀me fors) 寫一個調(diào)用放法的函數(shù)getHomeInfor通過get方式獲取ajax請求? 異步操作它返回值是一個promise對象,可以.用then(this..getHomeInfoSucc)來表示

1.03? 再寫一個與之對應的 再寫一個與之對應的getHomeInfoSucc(res)方法這個方法就可以接收到模擬數(shù)據(jù)的結果 ,console.log(res)然后打印結果 res就是resolved(res)這時候如果結果是res就能夠訪問到json文件

頁面跳轉

通過router-link to 動態(tài)賦值

總結:promise是javascript異步接口的規(guī)范,他有三個狀態(tài)值 pending(異步操作未完成) rejected(異步操作失?。﹔esolve 異步操作已完成


css3 flex布局 彈性盒子

display:flex;

當flex=1時 它能夠把盒子等分模塊?

flex垂直居中


?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容