内容简介:通过上篇我们了解到了vue可以通过axios发送前端请求。我们知道的在发送请求可以在creted()钩子内,也可以在mounted()钩子内。本篇我们通过头部模块的编写,将请求到的数据渲染到模块内。
通过上篇我们了解到了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> // 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: "" } } };
完善这些后,我们在来扩充一个功能,就是点击活动的时候,会弹出活动详情页:
<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.动画
定义
进入 .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项目的头部模块编写到此就结束了,下篇我们对评价模块进行设计与实践,不见不散。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 将 Swift 序列切分为头部和尾部
- 移动端页面头部固定定位的绝对定位实现
- IPV4与IPV6的头部PK
- Vue-SSR: head Mixin 实现头部信息管理
- 程序员难逃二八法则,如何晋升为头部 20% 玩家?
- Proxy-Go v10.3 发布,新增 Proxy 私密头部控制参数!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
BSD Hacks
Dru Lavigne / O'Reilly Media, Inc. / 2004-05-24 / USD 24.95
If you want more than your average BSD user--you want to explore and experiment, unearth shortcuts, create useful tools, and come up with fun things to try on your own--BSD Hacks is a must-have. This ......一起来看看 《BSD Hacks》 这本书的介绍吧!