Vue实战系列—头部模块编写（5）
原创
通过上篇我们了解到了vue可以通过axios发送前端请求。
我们知道的在发送请求可以在creted（）钩子内，也可以在mounted（）钩子内。
本篇我们通过头部模块的编写，将请求到的数据渲染到模块内。
当然我们先要准备静态页面：
1.分析制作静态页面
如图所示，我们可以将整个一个头部模块分为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、注册
Myheade
},
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请求到了来自后端的商家信息。
2.处理数据
2.1 通过props进行父子组件通信
父组件App.vue下：
进行数据绑定。
<Myheader :poiInfo='poiInfo'></Myheader>头部模块组件内通过props接收数据：
export default {
props: {
poiInfo: {
type: Object,
default: ""
}
}
};
完善这些后，我们在来扩充一个功能，就是点击活动的时候，会弹出活动详情页：
<transition name="bulletin-detail"></transition>
我们用transition来做简单的页面展示动画。
2.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"到这里今天的头部模块编写，以及数据的渲染就结束了，就以上提到的比较重要，可能需要详细了解的知识点，都在下方罗列好了。
3.data, prop, computed, method 的区别
omputed的应用。
CSS拼接
4.动画
https://cn.vuejs.org/v2/api/#transition
定义
进入
.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项目的头部模块编写到此就结束了，下篇我们对评价模块进行设计与实践，不见不散。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。