Vue實戰-頭部模塊編寫（5）

經過上篇咱們瞭解到了vue能夠經過axios發送前端請求。

咱們知道的在發送請求能夠在creted（）鉤子內，也能夠在mounted（）鉤子內。

本篇咱們經過頭部模塊的編寫，將請求到的數據渲染到模塊內。

固然咱們先要準備靜態頁面：

01.分析製做靜態頁面

如圖所示，咱們能夠將整個一個頭部模塊分爲4個部分：

· 頂部通欄：返回，搜索，拼單，等；

· 主題內容：餐廳名字

· 公告：新用戶；

· 背景圖片。

而後咱們依據當前這三塊內容進行佈局

<div class="header">

<div class="top-wrapper"></div>

<div class="content-wrapper"></div>

<div class="bulletin-wrapper"></div>

<div class="bg-wrapper"></div>

</div>

結構定好了，咱們須要注意：

1.寫css，添加背景圖片，等通用的須要咱們放在static下，好比初始化css文件。

2.頭部組件須要用到的圖片直接放在頭部組件的文件夾內，如之後須要更改，操做，是很方便管理的。

3.bg-wrapper用絕對定位進行背景圖片的設置。

咱們將靜態頭部模塊完成後須要爲組件傳入數據，好比商家信息，公告，主題內容，經過後端獲取。

以下，咱們在app.vue中進行數據請求

<script>

// 一、導入頭部模塊

import Myheader from 'components/Header/Header';



export default {

name: 'app',

components: { // 二、註冊

Myheader

},

data() {

return {

// header組件須要的信息(商家信息)

poiInfo: {},

               commentNum: 0,

               

}

},

created() { // 發起異步請求，獲取數據

var that = this;

// 經過axios發起get請求

this.$axios.get('/api/goods')

.then(function(response) { // 獲取到數據

var dataSource = response.data;

if(dataSource.code == 0){

that.poiInfo = dataSource.data.poi_info;

}

})

.catch(function(error) { // 出錯處理

console.log(error);

});

}

}

</script>

咱們經過axios請求到了來自後端的商家信息。

02.處理數據

1.經過props進行父子組件通訊

父組件App.vue下：

進行數據綁定。

<Myheader :poiInfo='poiInfo'></Myheader>

頭部模塊組件內經過props接收數據：

export default {

props: {

  poiInfo: {

    type: Object,

    default: ""

  }

}

};

完善這些後，咱們在來擴充一個功能，就是點擊活動的時候，會彈出活動詳情頁：

<transition name="bulletin-detail"></transition>

咱們用transition來作簡單的頁面展現動畫。

2.防止數組越界

針對於公告內容：

<div class="bulletin-wrapper">

<img class="icon" v-if="poiInfo.discounts2" :src="poiInfo.discounts2[0].icon_url" />



<span class="text" v-if="poiInfo.discounts2">{{poiInfo.discounts2[0].info}}</span>



<div class="detail" v-if="poiInfo.discounts2" @click="showBulletin">

{{poiInfo.discounts2.length}}個活動

<span class="icon-keyboard_arrow_right"></span>

</div>

</div>

使用v-if控制數據與模板的渲染否。

v-if="poiInfo.discounts2"

到這裏今天的頭部模塊編寫，以及數據的渲染就結束了，就以上提到的比較重要，可能須要詳細瞭解的知識點，都在下方羅列好了。

03.data, prop, computed, method 的區別

omputed的應用。

CSS拼接

04.動畫

https://cn.vuejs.org/v2/api/#...

定義

進入

.xxx-enter   過渡開始的狀態

.xxx-enter-to 過渡結束的狀態

.xxx-enter-active 過渡時間、延遲、曲線函數

離開

.xxx-leave 過渡開始的狀態

.xxx-leave-to 過渡結束的狀態

.xxx-leave-active 過渡時間、延遲、曲線函數

*/



.bulletin-detail-enter-active,

.bulletin-detail-leave-active {

transition: 2s all;

}

.bulletin-detail-enter,

.bulletin-detail-leave-to {

   opacity: 0;

}

.bulletin-detail-enter-to,

.bulletin-detail-leave {

   opacity: 1;

}

調用



  <transition name="bulletin-detail"></transition>

vue項目的頭部模塊編寫到此就結束了，下篇咱們對評價模塊進行設計與實踐，不見不散。