Vue实战-头部模块编写(5)

通过上篇我们了解到了vue可以通过axios发送前端请求。

我们知道的在发送请求可以在creted()钩子内,也可以在mounted()钩子内。

本篇我们通过头部模块的编写,将请求到的数据渲染到模块内。

当然我们先要准备静态页面:

01.分析制作静态页面
《Vue实战-头部模块编写(5)》

如图所示,我们可以将整个一个头部模块分为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>

// 1、导入头部模块

import Myheader from 'components/Header/Header';



export default {

name: 'app',

components: { // 2、注册

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: ""

  }

}

};

《Vue实战-头部模块编写(5)》
完善这些后,我们在来扩充一个功能,就是点击活动的时候,会弹出活动详情页:
《Vue实战-头部模块编写(5)》

<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 的区别
《Vue实战-头部模块编写(5)》

omputed的应用。

CSS拼接

04.动画

《Vue实战-头部模块编写(5)》
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项目的头部模块编写到此就结束了,下篇我们对评价模块进行设计与实践,不见不散。

    原文作者:前端大彬哥
    原文地址: https://segmentfault.com/a/1190000019513244
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞