(1) better-scroll插件

官网：https://ustbhuangyi.github.io/better-scroll/#/examples
详细：https://zhuanlan.zhihu.com/p/27407024

安装：

cnpm install better-scroll --save

使用

js部分



----------------------------------------------------------------------------
vue的DOM部分

使用进阶
当better-scroll处在时刻变化的场景中的时候( 比如：在显示隐藏一个modal的时候，每次状态的变化都需要new BScroll？不需要，better-scroll中有 refresh() 接口 )

//初始化函数


initBetterScroll() {      
            if (!this.modalScroll) {
              this.modalScroll = new BScroll(this.$refs.modalDom, { click: true });
            } else {
                this.modalScroll.refresh();      // 不存在就new，已经存在就refresh()
            }
        }

---------------------------------------------------------------

//调用


  showDetail() {
            if (!this.selectTotalCount) {    // 当数量为0的时候，不显示
                return;
            } else {
              this.showModal = !this.showModal;      // 切换显示状态
            } if (this.showModal) {      // 显示的时候，调用better-scroll
              this.$nextTick(() => {     //dom更新后，执行
                this.initBetterScroll();
              });
          }
        }

(2) 父组件调用子组件的方法

(1) ref属性
ref 绑定在一般元素上，ref指 ( DOM元素 )
ref 绑定在组件上，ref指 ( 组件实例）
(2) 例子说明

子组件的函数


methods: {
        show() {
            this.foodsDetail = !this.foodsDetail;
        }
    }

------------------------------------------------------------------

父组件调用子组件的函数

dom



 // 点击，执行 selectFoodsFunction函数，并把当前的 foods 作为参数传入





 // ref绑定子组件实例调用子组件方法 ， 将selectedFoodsObject对象 传给子组件



 selectFoodsFunction(foods) {
        this.selectedFoodsObject = foods;   // 将foods对象保存在data的selectedFoodsObject 中
        this.$refs.foodsChildrenComponent.show();    //调用子组件的show()函数
      }

(3) click.stop阻止冒泡，click.prevent阻止默认事件

(4) @media 媒体查询




@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

// 如果文档宽度小于 300 像素则修改背景颜色(background-color):
// ( min-width: 300px) 浏览器宽度大于300px时

(5) 1px像素边框

html


  
      定义伪类，缩放class
    

---------------------------------------------------------------------------------------------

stylus


.suo
      position: relative
      &:after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-bottom: 1px solid red
        content: ' '
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
      .suo:after
          -webkit-transform: scaleY(0.7)
          transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
      .suo:after
          -webkit-transform: scaleY(0.5)       // ratio: 比例
          transform: scaleY(0.5)

(6) 省略号。。。

(1) white-space：nowrap ( 规定段落中的文本不进行换行 )
(2) overflow: hidden ( 内容会被修剪，并且其余内容是不可见的 )
(3) text-overflow: ellipsis ( 显示省略符号来代表被修剪的文本 )


 .right
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis    //ellipsis是省略的意思

(7) filter: blur(10px) 模糊效果

（filter详解）http://www.cnblogs.com/moqiutao/p/4843437.html

 filter: blur(10px);
 overflow: hidden;      //一般会让超出的模糊部分隐藏

(8) filter: drop-shadow() 阴影效果


filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

(9) box-shadow：盒阴影效果


box-shadow: x偏移, y偏移, 模糊大小, 色值

两者区别：http://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/

(10) VUE中 css3 过渡和动画

动画：

vue部分

 
      
        关闭
      
 

-----------------------------------

css部分

  .aa-enter-active {
    animation: bounce-in .4s;
  }
  .aa-leave-active {
    animation: bounce-in .4s reverse;    // reverse反转的意思
  }
  @keyframes bounce-in {
    0% {
      transform: translateX(-100px);
    }
    100% {
      transform: translateX(0);
    }
  }

(11) flex固定宽度

flex: 0 0 80px;
width: 80px;

(12) display:table 多行垂直居中布局

.li
        display: table
        background:red
        border-bottom: 1px solid red
        line-height:14px;
        height:54px;
        width:56px;
        padding: 0 12px
        .table-cell
          display: table-cell
          background:yellow
          vertical-align: middle

(13) 用数组控制不同的class的显示


template

 
      
      {{ item.name }}
 
------------------------------------------------------------------------------------------
script

    created() {
      this.classMap = ['jian', 'jia', 'cheng', 'chu', 'mo'];

     //这里也可以在data(){}中直接初始化classMap
     //data() {
     // return {
     //  goods: [],
     //  classMap: ['jian', 'jia', 'cheng', 'chu', 'mo']
     //   };
     //    }

      this.$http.get('/api/goods')
        .then((response) => {
          response = response.body;
          if (response.errno === ERR_OK) {
            this.goods = response.data;
          }
        });
    }
--------------------------------------------------------------------------------------------
css

        .jian
          background:blue
        .jia
          background:blueviolet
        .cheng
          background:black

(14) 在vue中如果props是一个（数组Array）或者一个（对象Object），那么default就是一个函数

cart组件中js部分



export default {
      props: {
        sellerCart: {          //  父组件传过来的对象
            type: Object,
            default() {       // props是对象，所以default是一个函数
                return {};
            }
        },
        selectFoods: {
            type: Array,    
            default() {    // props是数组，所以default是一个函数
                return [
                  {
                      price: 10,     // 在selectFoods传过来的不存在时，返回defaut中值
                      count: 20
                  }
                ];
            }
        }
      },
      computed: {                               // 计算属性
          selectTotalPrice() {
              let total = 0;
              this.selectFoods.forEach((foods) => {     // 遍历selectFoods
                total += foods.price * foods.count;
              });
              return total;
          },
          selectTotalCount() {
              let count = 0;
              this.selectFoods.forEach((foods) => {
                  count += foods.count;
              });
              return count;
          },
           stateRight() {            //结算的三种状态
              if (this.selectTotalPrice === 0) {
                  return `${this.sellerCart.minPrice}元起送`;     // `${...}` es6带变量的字符串写法
              } else if (this.selectTotalPrice < this.sellerCart.minPrice) {
                  let diff = this.sellerCart.minPrice - this.selectTotalPrice;
                  return `还差 ${diff}元起送`;
              } else {
                  return '去结算';
              }
          }
      }

  };
-----------------------------------------------------------------------------------

cart的vue的dom部分

(15) 手机，浏览器下点击触发两次解决方案：

js部分

 methods: {
          add(event) {
              if (!event._constructed) {
                 return;
              }
              console.log('add');
           }
         }
--------------------------------------------------------

html部分

 +
 
//这里要加上add($event)