Elm仿饿了么vuejs app学习笔记

两端横线，中间文字

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

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


.title
 display:flex
.line
flex:1----------------------------------------------------------------flex弹性布局
position:relative
top:-6px
border-bottom: 1px solid rgba(255, 255, 255, 0.2)------------------横线的效果
.text
padding:0 12px
font-size:14px




postcss工具-------》自动补齐兼容性css代码
 
 
mixin方法：
border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

border-none()
  &:after
    display:none


设置最后一个元素没有底边的：
.food-item
  display:flex
  margin:18px
  border-1px(rgba(7,17,27,0.1))------>1px border-bottom设置display:block  
  &:last-child
     border-none()  ---------->设置底边display:none


 
 
  <ul>
<li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">------------每一个食品分类进行遍历。点击某一个食品，跳转商品详情页面。
 <div class="icon">
<img width="57" height="57" :src="food.icon">
 </div>
 <div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}</p>
<div class="extra">
 <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
</div>
<div class="price">
 <span class="now">￥{{food.price}}</span><span class="old"
v-show="food.oldPrice">￥{{food.oldPrice}}</span>
</div>
<div class="cartcontrol-wrapper">
 <cartcontrol :food="food"></cartcontrol>
</div>
 </div>
</li>
  </ul>


<food :food="selectedFood" v-ref:food></food>-----------商品详情页面组件作为子组件引入。
  
  import shopcart from 'components/shopcart/shopcart';
  import cartcontrol from 'components/cartcontrol/cartcontrol';
  import food from 'components/food/food';
components: {
 shopcart,
 cartcontrol,
 food
},

    selectFood(food, event) {
        if (!event._constructed) {
          return;
        }
        this.selectedFood = food;
        this.$refs.food.show();---------父组件调用子组件的方法show()
      },
 


子页面：详情页面
<div v-show="showFlag" class="food" transition="move" v-el:food>----------增加了transition="move"页面切换的过渡效果
</div>


  .food
    position: fixed
    left: 0
    top: 0
    bottom: 48px
    z-index: 30
    width: 100%
    background: #fff
    &.move-transition
      transition: all 0.2s linear-----------------过渡效果
      transform: translate3d(0, 0, 0)-------------最终位置
    &.move-enter, &.move-leave
      transform: translate3d(100%, 0, 0)----------进入离开的位置
.image-header
 position: relative
 width: 100%
 height: 0----------------------设置height:0
 padding-top: 100%-------------->padding-top值等于width的宽度值。占据了一个宽高相同的区域，留给img加载展示用
 img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
 
 show() {--------------------------子组件里面的方法
        this.showFlag = true;
        this.selectType = ALL;
        this.onlyContent = true;
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$els.food, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      },
 


最新价格/旧的价格：  
<div class="price">
  <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
</div>
 
.price
        font-weight: 700
        line-height: 24px
        .now
          margin-right: 8px
          font-size: 14px
          color: rgb(240, 20, 20)
        .old
          text-decoration: line-through------------>横线中间穿过，旧的价格
          font-size: 10px
          color: rgb(147, 153, 159)
 
 
详情页面内容超过视窗的高度时，引用BetterScroll，可以滚动内容，但是不会出现滚动条：
    1）BetterScroll绑定在外层div
    2）内层div的内容超出外层div的高度时，内层div可以进行滚动操作
 
<div v-show="showFlag" class="food" transition="move" v-el:food>
       <div class="food-content"></div>
</div>

import BScroll from 'better-scroll';
 
show() {
        this.showFlag = true;
        this.selectType = ALL;----------created时进行初始化设置
        this.onlyContent = true;--------created时进行初始化设置
        this.$nextTick(() => {--------------------------只有$nextTick才能够保证dom时渲染的，高度才能被计算过
          if (!this.scroll) {
            this.scroll = new BScroll(this.$els.food, {-------传入dom
              click: true-------------------------------------里面有些地方是可以被点击的，所以设置为click:true
            });
          } else {
            this.scroll.refresh();-----------------------重新做一次计算
          }
        });
      },
 


<div class="cartcontrol-wrapper">------------增加减少数量的组件
  <cartcontrol :food="food"></cartcontrol>
</div>
<div @click.stop.prevent="addFirst" class="buy" v-show="!food.count || food.count===0" transition="fade">加入购物车</div>-----------没有选数量的时候，出现“加入购物车”按钮  
----------------------------->@click.stop.prevent阻止点击穿透冒泡
      .cartcontrol-wrapper
        position: absolute
        right: 12px
        bottom: 12px
      .buy
        position: absolute
        right: 18px
        bottom: 18px
        z-index: 10------------------用来覆盖cartcontrol-wrapper组件的，所以设置z-index:10
        height: 24px
        line-height: 24px
        padding: 0 12px
        box-sizing: border-box
        border-radius: 12px
        font-size: 10px
        color: #fff
        background: rgb(0, 160, 220)
&.fade-transition--------------------加上transition过渡效果，同时解决了cartcontrol-wrapper组件的问题
          transition: all 0.2s
          opacity: 1
        &.fade-enter, &.fade-leave
          opacity: 0


addFirst(event) {
if (!event._constructed) {----------防止pc多次点击。better scroll传入的event有_constructed属性，屏蔽掉浏览器的默认操作即可
 return;
}
this.$dispatch('cart.add', event.target);
Vue.set(this.food, 'count', 1);
 },




 
<p class="text">
<span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>{{rating.text}}------------->：class=“{}”一个对象，写入多个属性值来判断用哪个class
</p>  
 



<div class="user">
<span class="name">{{rating.username}}</span>
<img class="avatar" width="12" height="12" :src="rating.avatar">
</div>

.user
position: absolute
right: 0
top: 16px
line-height: 12px
font-size: 0------------------父元素的font-size: 0，消除子元素之间(inline-block  图片与文字之间)默认存在的空白间隙
.name
 display: inline-block
 margin-right: 6px
 vertical-align: top---------与img的top对齐
 font-size: 10px
 color: rgb(147, 153, 159)
.avatar
 border-radius: 50%
 
 
'ratingtype.select'(type) {--------------改变选择评价按钮选项时，需要重新生成dom，刷新BetterScroll
        this.selectType = type;
        this.$nextTick(() => {----------------更新dom
          this.scroll.refresh();--------------重新计算BetterScroll
        });
      },  
 
 
 

preloader------------loader之前处理

include---只对该目录下文件检查
exclude---排除该目录下的文件          
              

<router-view :seller="seller" keep-alive></router-view>-------------seller是异步获取到的。

  export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse();
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, response.data);
        }
      });
    },
    components: {
      'v-header': header
    }
  };              
              
              
              
    <div class="seller" v-el:seller>
        <div class="pic-wrapper" v-el:pic-wrapper>
          <ul class="pic-list" v-el:pic-list>
            <li class="pic-item" v-for="pic in seller.pics">
              <img :src="pic" width="120" height="90">
            </li>
          </ul>
        </div>
    </div>

    import BScroll from 'better-scroll';    
              
                        
    watch: {
      'seller'() {------------由于是异步获取数据的，需要监测数据的变化，重新计算better-scroll高度和宽度值
        this._initScroll();
        this._initPics();
      }
    },
    ready() {
      this._initScroll();
      this._initPics();
    },          
              
          
  _initScroll() {
    if (!this.scroll) {
      this.scroll = new BScroll(this.$els.seller, {
        click: true
      });
    } else {
      this.scroll.refresh();
    }
  },
  _initPics() {
    if (this.seller.pics) {
      let picWidth = 120;
      let margin = 6;
      let width = (picWidth + margin) * this.seller.pics.length - margin;
      this.$els.picList.style.width = width + 'px';------------计算图片区域的宽度，并且赋值给该div
      this.$nextTick(() => {
        if (!this.picScroll) {
          this.picScroll = new BScroll(this.$els.picWrapper, {
            scrollX: true,-------------------------横向滚动
            eventPassthrough: 'vertical'-----------滚动该图片区域的时候，外层不进行竖向滚动
          });
        } else {
          this.picScroll.refresh();
        }
      });
    }
  }          
          
              
              
    data() {
      return {
        seller: {
          id: (() => {------------------------seller有一个id属性
            let queryParam = urlParse();
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, response.data);---------保留id属性，扩展seller的其他属性
        }
      });
    },          

 
 
 
 

E:\nodeWork\v0hivb\prod.server.js：
    var express = require('express');-----------------启动一个express服务
    var config = require('./config/index');

    var port = process.env.PORT || config.build.port;

    var app = express();

    var router = express.Router();

    router.get('/', function (req, res, next) {
        req.url = '/index.html';
        next();
    });    
              
              
    var appData = require('./data.json');------------相对路径变化，因为所在目录不一样了          
              
              
              
E:\nodeWork\v0hivb\config\index.js:          
    productionSourceMap: false,-----------------false:打包生成的文件中不含sourcemap文件了
    cssSourceMap: false    
              

vue2.0中过渡效果的设置：
      <transition name="fades" >  </transition>              
                  
      /*动画*/
      .fades-enter-active,
      .fades-leave-active {
        transition: all .2s linear;------------设置transition效果
        transform: translate3D(0, 0, 0);
      }

      .fades-enter,
      .fades-leave-active {-------------------leave-active而不是leave
        transform: translate3D(100%, 0, 0);
      }              
              
              
vue2.0中transition触发的函数，用法区别：              
    <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">  </transition>                  
              
              
    当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。          
              
              
    dropping(el, done) {
          /* eslint-disable no-unused-vars */
          let rf = el.offsetHeight;
          this.$nextTick(() => {
            el.style.webkitTransform = 'translate3d(0,0,0)';
            el.style.transform = 'translate3d(0,0,0)';
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = 'translate3d(0,0,0)';
            inner.style.transform = 'translate3d(0,0,0)';
            el.addEventListener('transitionend', done);------------done进行回调
          });
        },