vue-imooc-mall

flex 和 ellipsis 冲突 在flex 内部添加ellipsis

 <h1 class="mine-navbar-title" v-if="title">
    <span class="mine-navbar-text" v-text="title"></span>
  </h1>
h1 flex-center
span ellipsis

---

npm i vue-awesome-swiper 基于swiper的vue插件

npm i -S jsonp jsonp插件

实现图片正方形

<p class="recommend-pic">
            <img class="recommend-img" :src="item.baseinfo.picUrlNew" />
          </p>

 &-pic {
    width: 100%;
    padding-top: 100%;
    position: relative;
    }
  &-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

---

图片的懒加载

npm install --save vue-lazyload

标签属性v-lazy

---

为元素绑定属性有3种方式的写法

类名： v-bind:class=”focus”

类名数组：v-bind:class=”[‘focus’, ‘shine’]”

样式对象：v-bind:classs=”{‘focus’: true/false, ‘shine’: true/flase }”，这种方式会根据样式名作为键的值来决定是否采用，如果值为：false，则不采用该样式，否则应用该样式。