专栏首页大前端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 条评论
登录 后参与评论

相关文章

  • Java并发编程实战系列5之基础构建模块

    1 同步容器类 同步容器类包括Vector和HashTable,二者是早期JDK一部分,此外还包括在JDK 1.2中添加的一些功能相似的类,这些的同步封装器类是...

    JavaEdge
  • 最有效、最全的Vue 2.0 学习路线,各个阶段适用

    对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作d...

    一墨编程学习
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,My...

    程序员追风
  • [第5期] AST 与前端工程化实战AST 与前端工程化实战

    AST 是一个非常基础但是同时非常重要的知识点,我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的。本文...

    皮小蛋
  • AST 与前端工程化实战

    AST 是一个非常基础但是同时非常重要的知识点,我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的。本文...

    用户1462769
  • Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统

    最近在开发一个 Vue 3.0 + element-plus 练手项目,后面测试完成后,会把代码全部开源,部分页面的预览图如下:

    程序员十三
  • 当前 GitHub 上排名前十的热门 Vue 项目

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地...

    疯狂的技术宅
  • 2020年 Python学习路线及学习目标规划 拿走不谢!

    找不到完整的学习路线?小编分享2020年Python学习路线及学习目标规划拿走不谢,Python作为今年来特别受欢迎的编程语言,是AI时代头牌语言AI领域的敲门...

    python学习教程
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,My...

    乔戈里
  • vue必会面试题+答案

    React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,但是很多组件实际上是肯定不会发生变化的,...

    it优课
  • 7个实用的 Vue.js 工具和库

    本文总结了一些最值得关注的工具和库,相信你迟早会用在自己的 Vue.js 项目中。同类文章经常只会列举一些 UI 组件库,而本文涉及的范围更广,探讨了 Vue ...

    王小婷
  • web前端开发入门,学习路径以及具体的学习内容

    在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性。这 个部分内容非常简单,而且非常容易掌握。相信你也更愿意学习这个部分...

    用户5827212
  • 人类高质量 Java 学习路线【一条龙版】

    大家好,我是鱼皮。现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了。大部分的博主推荐资源,也就是把播放量高的视频说一遍,水...

    程序员鱼皮
  • 15个 Vue.js 高级面试题[每日前端夜话0xF2]

    渲染项目列表时,key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。

    疯狂的技术宅
  • 应届渣渣前端面经(还有游戏策划以及鸡汤)

    牛客网
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    项目地址:https://github.com/zhangdaiscott/jeecg-boot

    Java架构师必看
  • 学Python要先学什么?Python入门方法

    学Python要先学什么?对于零基础的学员来说没有任何的编程基础,应该学习Python基础:计算机组成原理、Python开发环境、Python变量、流程控制语句...

    python学习教程
  • web前端与手机应用的这些重点和知识点,你知道多少呢

    随着互联网、移动互联网的发展,HTML5成为了客户端软件开发的主流技术,HTML5实际上是由:HTML5语言、CSS3、JAVASCRIPT语言组成。

    用户5827212
  • Vue3.0入门 + Vant3.0移动端实践(一)

    Vue3.0出来了,感觉Vue3.0比2.0好用多啦,且据说性能也有不少的提升,那么今后拥抱Vue3.0吧,会是个趋势。

    独行猫A

扫码关注云+社区

领取腾讯云代金券