06、Vue-Header组件(商家信息)《饿了吗》

一、数据获取

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。

• 关于axios插件的引入
  在main.js中引入，但是 axios 并不能Vue.use，只能每个需要发送请求的组件中即时引入。为了解决这个问题，是在引入 axios 之后，修改原型链。

  // main.js
  // 导入Axios插件
  import Axios from 'Axios';
  // 如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性
  Vue.prototype.$ajax = Axios;

  // 其他组件，例如App.vue
  export default {
    created() { 
      // this.$ajax ==> Axios 
      this.$ajax.get('/api/seller')
        .then( function(response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log('获取数据失败:' + error);
        });
     },
  }

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()。

  // 导入vue-router插件
  import VueRouter from 'vue-router';
  // 全局注册，在其他组件就是可以使用
  Vue.use(VueRouter);

二、header界面

三、公告以及优惠信息 --- 详情弹层页

CSS sticky footers布局: Sticky footers设计是最古老和最常见的效果之一，可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。

  <div v-show="detailShow" class="more">
    <div class="detail-wrapper clearfix">
        <div class="detail-main"></div>
    </div>
    <div class="detail-close"></div>
  </div>

  .more{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: auto;
    left: 0;
    top: 0;
    transition: all 1s;
    background: rgba(7, 17, 27, 0.8);
  }
  .more .moreShow-wrapper{
    /* 最小高度和视口一样*/
    min-height: 100%;
  }
  .more .moreShow-wrapper .moreShow-main{
    padding: 64px 0;
  }
  .more .moreShow-close{
    position: relative;
    width: 32px;
    height: 32px;
        
    /* 注意*/
    margin: -64px auto 0;
  }

四、star组件

    export default {
        // 父组件传递过来的两个参数
        props: {
            size:{  // 尺寸大小24, 36, 48
                type: Number        // 指定参数类型
            },
            score:{
                type: Number
            }
        },
        /*
         计算属性computed的使用
         描述：在同一个实例化对象中，其中一个属性改变，要求另外一个属性也跟着改变
         */
        computed: { 
            // 传入尺寸不同，类名即不一样
            starType() {    
                return 'star-' + this.size;
            },
            items() {
                let result = [];
                // 分数处理，只有整数和0.5
                let score = Math.floor(this.score * 2) / 2;
                let has = score % 1 !== 0;  // 是否有小数
                let integer = Math.floor(score);  // 整数部分
                
                // 点亮的星
                for(let i=0; i<integer; i++){
                    result.push(CLS_ON);
                }
                if(has){        // 半星
                    result.push(CLS_HALF);
                }
                while(result.length < LENGTH){
                    result.push(CLS_OFF);
                }
                
                return result;
            }
        }
    }

五、自适应经典flex布局

六、添加动画效果

Vue过渡效果

 <transition name="fade">
    <p v-if="show">hello</p>
 </transition>

  // v对应的即是name属性
  - v-enter: 过渡的开始状态(进入时)
  - v-enter-to: 过渡的结束状态(进入时)
  - v-enter-active: 定义过渡的过程时间，延迟和曲线函数(进入时)
  
  - v-leave: 过渡的开始状态(离开时)
  - v-leave-to: 过渡的结束状态(离开时)
  - v-leave-active: 定义过渡的过程时间，延迟和曲线函数(离开时)

  <transition name='fade'>
    <div v-show="moreShow" class="more">
      // ...
    </div>
  </transition>