从 0 开始，vue 饿了么项目 (1)

App.vue

<template>
  <div>
    <v-header :get-seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商家</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>
    <router-view></router-view>
  </div>

</template>

<script type="text/ecmascript-6">
  /*props:
  * 简单来说，就是父子组件之间传递数据的，就你的代码来说就是可以在子组件里定义
  *
  <!--this.seller 传递到 props属性中数据存储对象getSeller, 父子组件之间的数据交互关系-->
  */
  import header from './components/header/header.vue';
  export default {
      /*子组件里面data是函数,data函数的作用是初始化数据,不是父组件中的选项*/
      /*结果返回到Vue实例*/
      data:function () {
        return{
          /*拿到seller对象的数据,现初始化对象*/
          seller:{

          }
        }
      },
    /*vue生命周 ， vue实例创建以后，（data,event数据，事件还没有初始化），配置之前 调用createdBefore 状态，*/
    /*（data,event数据，事件）初始化的状态*/
    /*一般可以在created函数中调用ajax获取页面初始化所需的数据*/

    /*获取数据阶段*/
    created:function () {
      /*this.seller 对象初始化的添加数据,数据传递的阶段*/
      this.$http.get('/api/seller').then(function (res) {
        res=res.body;
        /*如果没有错误*/
        if(res.errno==0){
          /*拿到数据传递到seller对象*/
          this.seller=res.data;
        }
      }).then(function (res) {
          console.log("err....");
      })
    },
      components:{
        'v-header':header
      }
  }
</script>
<style lang="less" rel="stylesheet/less">
  @import "./assets/less/mixin.less";
  .tab{
    width: 100%;
    height:40px;
    line-height: 40px;
    display: flex;
    text-align: center;
    .border-1px(rgba(7,17,27,0.1));
    .tab-item{
      flex:1;
      &>a{
        display: block;
        font-size: 14px;
        color:rgb(77,85,93);
        &.active{
          color: rgb(240,20,20);
        }
      }
    }
  }
</style>

header.vue

<template>
  <div class="header">
    <!--内容区域-->
    <div class="content-wrapper">
      <!--头像-->
      <div class="avatar">
        <img :src="getSeller.avatar" alt="" width="64" height="64">
      </div>
      <!--内容-->
      <div class="content">
        <!--题目-->
        <div class="title">
          <!--小图标-->
          <span class="brand"></span>
          <span class="name">{{getSeller.name}}</span>
        </div>
        <!--描述-->
        <div class="desc">
            <p>{{getSeller.description}}/{{getSeller.deliveryTime}}分钟送达</p>
        </div>
        <!--有没有seller.supports数据,如果有true否則false-->
        <div class="supports" v-if="getSeller.supports">
          <!--綁定class,  classMap计算出设置不同的样式-->
          <span class="icon" :class="classMap[getSeller.supports[0].type]"></span>
          <!--获取supports数组的第一个集合的description属性-->
          <span class="text">{{getSeller.supports[0].description}}</span>
        </div>
      </div>
    </div>
    <div class="bulletin-wrapper">

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data:function () {
      return{
        classMap:[]
      }
    },
    props:{
      /*get-seller == getSeller , 如果有（-）符号，两边添加单引号*/
      'get-seller':{
        type:Object
      }
    },
    created:function(){
      /*0,1,2,3,4 是 Array index*/
      this.classMap=['decrease','discount','guarantee','invoice','special']
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  @import "../../assets/less/mixin.less";
  .header{
    color: #fff;
    background: #000;
    .content-wrapper{
      /* top,right,bottom,left*/
      padding: 24px 12px 18px 24px;
      .avatar{
        display: inline-block;
        vertical-align: top;
        img{
          border-radius: 2px;
        }
      }
      .content{
        display: inline-block;
        margin-left:16px;
        font-size: 14px;
        .title{
          margin: 2px 0 8px 0;
          .brand{
            width: 30px;
            height:18px;
            /*span 是 行内元素，宽度，高度无效，所以加上display属性*/
            display: inline-block!important;
            /*导入mixin设置图片*/
            .bg-image('brand');
            background-size: 30px 18px;
            background-repeat: no-repeat;
            vertical-align: top;

          }
          .name{
            margin-left: 6px;
            font-size: 16px;
            font-weight: bold;
            vertical-align: -webkit-baseline-middle;
          }
        }
        .desc{
          margin-bottom: 10px;
          font-size: 12px;
          line-height: 12px;
        }
        .supports{
          .icon{
            display: inline-block;
            width: 12px;
            height:12px;
            margin-right: 4px;
            background-size: 12px 12px;
            background-repeat: no-repeat;
            /*CSS中如何给不同的图片名设置不同的样式*/
            /* & 表示父样式*/
            &.decrease{
              .bg-image('decrease_1');
            }
            &.discount{
              .bg-image('discount_1');
            }
            &.guarantee{
              .bg-image('guarantee_1');
            }
            &.invoice{
              .bg-image('invoice_1');
            }
            &.special{
              .bg-image('special_1');
            }
            /*這些class数据怎么对应关联起来*/
          }
          .text{
            line-height: 12px;
            font-size: 12px;
            vertical-align: text-top;
          }
        }
      }
    }
  }

</style>