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>元素包裹起来，这样我们只需要计算页脚的高度

好文推荐：http://www.w3cplus.com/css3/css-secrets/sticky-footers.html?utm_source=tuicool&utm_medium=referral

.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组件

好文推荐：http://www.cnblogs.com/nzbin/p/6380679.html

通常采用给过渡命名的方式（这里没有选用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组件开发的更多相关文章

  1. vue 饿了么项目笔记

    vue 饿了么项目 1.图标字体引用 链接 2.scss 二三倍图切换 1像素边框 链接 3.better-scroll 4.布局 商品主页面 <div id="app"&g ...

  2. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  3. 【vue】饿了么项目-页面骨架开发

    1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...

  4. 项目Header组件的开发注意事项

    npm install stylus --save npm install stylus-loader --save 移动端一般采用rem布局方式 Header组件里iconfont的使用和代码优化: ...

  5. 外卖app的header组件开发

    1.webpack框架创建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpa ...

  6. vue+webpack多个项目共用组件动态打包单个项目

    原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置 ...

  7. vue之cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  8. VUE+ELEMENT-UI的后台项目封装组件--查询form的封装

    最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下查询form,先上效果图 子组件页面: <template> <div class ...

  9. 小白学习vue第五天(理解使用组件开发，组件第一弹)

    组件怎么从创建到使用? 第一步创建组件构造器对象 感觉个人理解就是创建一个模板,和创建MongoDB数据模板相似 const cpnC = Vue.extend({ template: ` <d ...

随机推荐

  1. Spring MVC No converter found for return value of type 解决方法

    1.在pom中添加 jackson <properties> <jackson.version>2.8.5</jackson.version> </prope ...

  2. linux的环境变量与文件查找

    1. 环境变量 1.1 变量 shell 中的变量有不同类型,可参与运算,有作用域限定 变量的作用域即变量的有效范围(比如一个函数中.一个源文件中或者全局范围),在该范围内只能有一个同名变量.一旦离开 ...

  3. 使用 maven 创建 java web 工程

    本文主要讲述使用 maven 命令行的形式来创建  java web 工程 开发环境 jdk 1.7 maven 3.5.0 spring 3.2 tomcat 7 eclipse Mars Rele ...

  4. 使用Hugo搭建个人博客站点

    Hugo是个什么东东这里直接忽略,想了解的请查阅其他资料,我们直接上手操作. 安装Hugo 到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件 解压后得到 hugo_0.17_ ...

  5. BaseActivity合集

    1.出自“高仿京东商城”: package com.itau.jingdong.ui.base; import com.itau.jingdong.AppManager; import com.ita ...

  6. vue2.0中的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...

  7. 第十五章——自编码器（Autoencoders）

    自编码器是一种能够通过无监督学习,学到输入数据高效表示的人工神经网络.输入数据的这一高效表示称为编码(codings),其维度一般远小于输入数据,使得自编码器可用于降维(查看第八章).更重要的是,自编 ...

  8. eclipse设置模板及格式

    1)     首先要有code_templates.xml 及 code_formatter.xml 两个文件,下面有代码,直接拷贝出来. code_formatter.xml: <?xml v ...

  9. hibernate对象的三种状态及转换

    一.hibernate对象三种状态 Transient(瞬时状态):没有session管理,同时数据库没有对应记录 举例:new 出来的对象还没有被session管理,此时该对象处于Transient ...

  10. Visual studio 2015已经停止工作无限重启

    今天遇到一个问题,某个文件在撤销的时候vs报错,然后提示到路径 “C:\Users\username\AppData\Roaming\Microsoft\VisualStudio\14.0\***.x ...