专栏首页大前端666Vue实战系列—头部模块编写(5)
原创

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Html5多媒体实现微信语音功能

    随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服、店小二功能,语音聊天成为了必不可少...

    前端大彬哥
  • Vue实战系列—评价组件的设计与实现(6)

    针对组件引用的图片可能产生变动性,我们将组件内的图片放入组件文件夹内,进行引用。使得组件更加便于维护。

    前端大彬哥
  • Vue实战—菜单栏商品展示数据交互(8)

    之前我们说过在created钩子,mounted钩子内可以发起请求,请求需要的数据。本次我们在created钩子内发起get请求,获取数据:

    前端大彬哥
  • 「类与对象」NSObject对象的分类

    刚开始接触Objective-C语言的时候,看到说到的最多的概念就是「类和对象」。最初的认识停留在把类实例化就变成对象了,天真认为只存在类与对象两种。

    Jacklin999
  • 类与对象」NSObject对象的分类

    刚开始接触Objective-C语言的时候,看到说到的最多的概念就是「类和对象」。

    Jacklin
  • 如何从传统单体架构转向微服务

    当今,把单体架构的应用拆成微型服务是很时髦的。让我想起了2000年世纪初的那些日子,那时SOA正在流行,大多数公司,供应商和系统集成商,正忙着挥动SOA魔杖,希...

    程序你好
  • 如何从传统单体架构转向微服务

    程序你好
  • 面试题: 什么是micro service?其优缺点是什么?

    在认识微服务之前,需要先了解一下与微服务对应的单体式(Monolithic)式架构。在Monolithic架构中,系统通常采用分层架构模式,按技术维度对系统进行...

    用户1263954
  • Spring Cloud集中环境中开发如何避免服务冲突

    使用中央环境开发Spring Cloud微服务,同时避免服务冲突。开发人员如何在同一个中央弹簧云环境中同时工作并且仍然不会互相干扰?

    lyb-geek
  • 学习微服务的十大理由

    始终关注新技术,语言和框架,以彻底改变您的组织。如果你仍然在你的立方体中使用整体框架中的代码搞乱,那么你可能生活在过去,那里有一个小应用程序和一些员工来处理它。...

    Java架构师历程

扫码关注云+社区

领取腾讯云代金券