【vue】饿了么项目-header组件开发

1.数据传递的理解

在App.vue中用到了header组件，首先注册组件

components: {

      'v-header': header

    }

然后才能引用

<v-header :seller="seller"></v-header>

:seller="seller"的意思是将seller对象传递给v-header中的seller，而v-header中从哪里获得seller呢？

通过props从父组件中获得，且要指定数据类型

export default {

    props: {

      seller: {

        type: Object

      }

    }

}

所以在父组件中需要将seller作为数据导出

export default {

    data() {

      return {

        seller: {},

    }

     }

}

header组件引用star组件也是一样的道理，再巩固下吧

header.vue中

import star from '../star/star.vue';    //红色的star对应的就是star.vue中exportdefault的object

components: {

      star

    }

引用：

<div class="star-wrapper">

            <star :size="48" :score="seller.score"></star>

 </div>

star.vue中就可以取到48和seller.score数据了，并用computed将这两个数据进行相应计算

export default {

    props: {

      size: {

        type: Number

      },

      score: {

        type: Number

      }

    },

    computed: {

      starType() {

        return 'star-' + this.size;

      },

      itemClasses() {

        let result = [];

        let score = Math.floor(this.score * 2) / 2;

        let hasDecimal = score % 1 !== 0;

        let integer = Math.floor(score);

        for (let i = 0; i < integer; i++) {

          result.push(CLS_ON);

        }

        if (hasDecimal) {

          result.push(CLS_HALF);

        }

        while (result.length < LENGTH) {

          result.push(CLS_OFF);

        }

        return result;

      }

    }

  };

即可对应显示相应的星星：

<div class="star-item" :class="starType">

      <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" ></span>

    </div>

star组件（评星的星星，多处使用，写成组件）

<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" ></span>

:class="itemClass"//给每个itemClass设置class(itemClass是通过itemClasses遍历来的)

而itemClasses()也放到conputed中计算

2.@import "star.styl";

3.vue中通过操作变量，不用写DOM部分的代码，省去了很多工作

data() {

      return {

        detailShow: false

      };

    },

    methods: {

      showDetail() {

        this.detailShow = true;//控制变量即可，自动更新

      },

      hideDetail() {

        this.detailShow = false;

      }

    },

4.经典CSS sticky footer布局

4.1固定高度的解决方案

为容器推算出其高度,我们可以使用一个容器将<header>和<main>元素包裹起来，这样我们只需要计算页脚的高度

.detail-wrapper

      width 100%

      min-height 100%    定义基于包含它的块级对象的百分比最小高度。

      .detail-main

        margin-top 64px

        padding-bottom 64px

    .detail-close

      position relative

      width 32px

      height 32px

      margin -64px auto 0 auto

      clear both

      font-size 32px

    <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">

      <div class="detail-wrapper clearFix">　　　　　//内容的包装层

        <div class="detail-main">                   //关键padding-bottom 64px

          <h1 class="name">{{seller.name}}</h1>

          <div class="star-wrapper">

            <star :size="48" :score="seller.score"></star>

          </div>

          <div class="title">

            <div class="line"></div>

            <div class="text">优惠信息</div>

            <div class="line"></div>

          </div>

          <ul v-if="seller.supports" class="supports">

            <li class="support-item" v-for="(item, index) in seller.supports">

              <span class="icon" :class="classMap[seller.supports[index].type]"></span>

              <span class="text">{{seller.supports[index].description}}</span>

            </li>

          </ul>

          <div class="title">

            <div class="line"></div>

            <div class="text">商家公告</div>

            <div class="line"></div>

          </div>

          <div class="bulletin">

            <p class="content">{{seller.bulletin}}</p>

          </div>

        </div>

      </div>

      <div class="detail-close" @click="hideDetail">//底层

        <i class="iconfont icon-cha"></i>

      </div>

    </div>

4.2Flexbox解决方案，Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现，而且不需要一些奇怪的计算或添加额外的HTML元素。首先，我们需要在<body>元素上设置display:flex。

flex属性是flex-grow、flex-shrink和flex-basis三个属性缩写。任何元素设置了flex大于0，元素就会灵活的控制自己的尺寸，来适配容器的剩余空间。例如，如果<main>设置了flex:2，<footer>设置了flex:1，那么页脚的高度是主内容高度的二分之一，同样的，如果值设置的是4和2而不是2和1，他们效果是一样的，因为他们的倍数比例值一样

body {

display: flex;

flex-flow: column;

min-height: 100vh;

}

main { flex:; }

5.clearfix复习

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹，可以保证外部div的height，即清除"浮动元素脱离了文档流，包围图片和文本的 div 不占据空间"的问题。在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

after是个伪元素，意思就是在class为clear的元素后面加入新内容好文推荐:http://blog.csdn.net/puncha/article/details/10174683

.clearFix

  display inline-block

  &:after

    display block

    content "."

    height 0

    line-height 0

    clear both

    visibility hidden

6.clear both

clear : none | left|right| both

none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

用于使用了float css样式后产生浮动，最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动，大对象背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动。

7.如何得到itemClasses()

itemClasses() {

        let result = [];//它是一个数组

        let score = Math.floor(this.score * 2) / 2;   //获取score并转换，如4.5会转换成4.5,而4.3转换成4

        let hasDecimal = score % 1 !== 0;     //是否有小数

        let integer = Math.floor(score);

        for (let i = 0; i < integer; i++) {

          result.push(CLS_ON);   //满星

        }

        if (hasDecimal) {

          result.push(CLS_HALF);    //半星

        }

        while (result.length < LENGTH) {   //空星

          result.push(CLS_OFF);

        }

        return result;

      }

8.自适应线条-采用flex布局

　　　　　　<div class="title">

            <div class="line"></div>

            <div class="text">优惠信息</div>

            <div class="line"></div>

          </div>

    .title

          width 80%

          display flex     //vue会依赖Postcss自动考虑兼容性问题

          margin 28px auto 0 auto

          .line

            flex: 1

            position relative

            top -6px

            border-bottom 1px solid rgba(255, 255, 255, 0.2)

          .text         <--文字根据内容自动撑开，不用flex-->

            padding 0px 12px

            font-size 16px

            font-weight 700px

9.遍历

v-if 是“真正的”条件渲染，根据其后表达式的bool值进行判断是否渲染该元素，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

v-if指令只渲染他身后表达式为true的元素；在这里引入v-show指令，因为二者的区别是v-show指令会渲染他身后表达式为false的元素，这样的元素上会添加css代码：style="display:none"; 将上面v-if的实例代码改为v-show

            <ul v-if="seller.supports" class="supports">   //v-if条件渲染，传进来true或false

            <li class="support-item" v-for="(item, index) in seller.supports">

              <span class="icon" :class="classMap[seller.supports[index].type]"></span>    //icon是本身的class

              <span class="text">{{seller.supports[index].description}}</span>

            </li>

          </ul>

10.vue中设置过渡、动画，可以使用现成的transition组件

通常采用给过渡命名的方式（这里没有选用v-方式），这样如果我想应用到另一个动画时就不会有冲突。这是不难做到的，正如你所看到的，我们只是简单地给过渡组件添加了一个 name 属性:name="fade" 。

    <transition name="fade">

    <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">

      ...

    </div>

    </transition>

既然有了钩子，我们就可以利用它们创建过渡，我们可以在 CSS 中使用。

其中enter/leave 定义动画开始第一帧的位置， enter-active/leave-active 定义动画运行阶段—— 你需要把动画属性放在这里， enter-to/leave-to 指定元素在最后一帧上的位置。

    &.fade-enter-active

          animation: bounce-in .5s;

    &.fade-leave-active

      animation: bounce-out .5s;

    @keyframes bounce-in {

      0% {

        transform: scale(0);   <--缩放-->

      }

      50% {

        transform: scale(1.5);

      }

      100% {

        transform: scale(1);

      }

    }

    @keyframes bounce-out {

      0% {

        transform: scale(1);

      }

      50% {

        transform: scale(1.5);

      }

      100% {

        transform: scale(0);

      }

    }

动画和过渡的区别并不仅仅是设置最终的状态或者在开始和结束之间插入状态，我们将使用 CSS 中的 @keyframes 创建有趣可爱的效果。

@keyframes创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。

11.针对iPhone的模糊-webkit-backdrop-filter blur(10px)

12.文本一行显示，显示不完出现省略号，隐藏滚动条

<div class="bulletin-wrapper" @click="showDetails()">

    <span class="bulletin-title"></span>

    <span class="bulletin-text">{{seller.bulletin}}</span>

    <i class="icon-keyboard_arrow_right"></i>

  </div>

  .bulletin-wrapper

    position relative

    height 28px

    line-height 28px

    padding 0 22px 0 12px

    white-space nowrap  //规定段落中的文本不进行换行

    overflow hidden

    text-overflow ellipsis   //text-overflow 属性规定当文本溢出包含元素时发生的事情。  ellipsis 显示省略符号来代表被修剪的文本。

    background rgba(7,17,27,0.2)

【vue】饿了么项目-header组件开发的更多相关文章

vue 饿了么项目笔记
vue 饿了么项目 1.图标字体引用链接 2.scss 二三倍图切换 1像素边框链接 3.better-scroll 4.布局商品主页面 <div id="app"&g ...
每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法由于很多朋友用的其他ORM如S ...
【vue】饿了么项目-页面骨架开发
1.页面骨架开发 1.1组件拆分手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...
项目Header组件的开发注意事项
npm install stylus --save npm install stylus-loader --save 移动端一般采用rem布局方式 Header组件里iconfont的使用和代码优化: ...
外卖app的header组件开发
1.webpack框架创建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpa ...
vue+webpack多个项目共用组件动态打包单个项目
原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置 ...
vue之cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
VUE+ELEMENT-UI的后台项目封装组件--查询form的封装
最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下查询form,先上效果图子组件页面: <template> <div class ...
小白学习vue第五天(理解使用组件开发，组件第一弹)
组件怎么从创建到使用? 第一步创建组件构造器对象感觉个人理解就是创建一个模板,和创建MongoDB数据模板相似 const cpnC = Vue.extend({ template: ` <d ...

随机推荐

7、包装类、System、Math、Arrays、大数据运算
基本类型封装基本数据类型对象包装类概述 *A:基本数据类型对象包装类概述 *a.基本类型包装类的产生在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们需要把字 ...
基于Spark GraphX计算二度关系
关系计算问题描述二度关系是指用户与用户通过关注者为桥梁发现到的关注者之间的关系.目前微博通过二度关系实现了潜在用户的推荐.用户的一度关系包含了关注.好友两种类型,二度关系则得到关注的关注.关注的好友 ...
java：模拟队列操作
import java.util.LinkedList; public class Myqueue { private LinkedList<Object> linkedList; pub ...
spss C# 二次开发学习笔记（五）——Spss系统集成模式
Spss官方不支持Server2008R2等Server系列,但做Spss的二次开发,调用Spss的Web系统,一般部署在Server系列上,例如Server2008R2. 起初,在Server上安装 ...
SQL语句的拼凑
StringBuilder sql = new StringBuilder("SELECT * FROM t_customer WHERE 1=1"); /* * 2. 判断条件, ...
JS 处理浮点型问题
function disposeNumber(value){ if(value == null || value == ""){ return 0; }else if(value. ...
MongoDB Limit/限制记录
Limit() 方法要限制 MongoDB 中的记录,需要使用 limit() 方法. limit() 方法接受一个数字型的参数,这是要显示的文档数. 语法: limit() 方法的基本语法如下 & ...
剑指offer相关问题
1. 变态跳台阶 Fib(n) = Fib(n-1)+Fib(n-2)+Fib(n-3)+..........+Fib(n-n) =Fib(0)+Fib(1)+Fib(2)+..... ...
Java学习-1
数组运算符包访问权限修饰符数组 1. 数组的声明: int[] a; 2. 数组的创建使用new运算符数组的创建int[] a = new int[100] 数组的长度不要求是常量:new ...
Windows事件--重复事件检测
监视器--Windows事件--重复事件检测--计时器重置: 自动重置计时器:指定等待时间10分钟,则在10分钟后自动关闭该警报,更改状态为正常(绿色) 检测事件1,事件3重置计数器状态,2分钟内检 ...

【vue】饿了么项目-header组件开发

【vue】饿了么项目-header组件开发的更多相关文章

随机推荐

热门专题