1.传递参数时,第二个参数要与前面的逗号有一个空格

window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))

2. 注意空格

正确格式

<script>
import Store from './store'
console.log(Store)
export default {
   ...
 }
</script>

错误格式

<script>
  import Store from './store'
  console.log(Store)
export default {
   ...
 }
</script>

3. 父向子组件传参

父组件中

//模板中
<template>
  <div id="app">
    //之前老版本  <conponent-a msgfromfather="父亲传给儿子!"></conponent-a>
    <ConponentA msgfromfather="父亲传给儿子!"></ConponentA>
  </div>
</template>

//Js
<script>
export default {
  //注册ConponentA
  components: {ConponentA},
}
</script>

子组件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="onClickMe()">点我啊,小样儿</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'hello from component A!'
      }
    },
    //props 可以是数组或对象，用于接收来自父组件的数据
    props: ['msgfromfather'],
    methods: {
      onClickMe: function () {
         //打印从父组件传过来的值
        console.log(this.msgfromfather)
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-weight: normal;
  }
</style>

4. 子向父组件传参

儿子告诉父亲 需要使用vm.$emit 和vm.$on 触发事件和监听事件

子组件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{msgfromfather}}</h1>
    <button v-on:click="onClickMe()">点我啊,小样儿</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'hello from component A!'
      }
    },
    methods: {
      onClickMe: function () {
//        子传父 触发当前实例上的事件
        this.$emit('child-tell-me-something', this.msg)
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-weight: normal;
  }
</style>

父组件中

<template>
  <div id="app">
    <p>child tells me: {{childWorlds}}</p>
    <ConponentA msgfromfather="父亲传给儿子!" v-on:child-tell-me-something="listenToMyBoy"></ConponentA>
  </div>
</template>

<script>
import ConponentA from './components/componentA.vue'
export default {
  data: function () {
    return {
      childWorlds: ''
    }
  },
  components: {ConponentA},
  watch: {
    items: {
      handler: function (items) {
        Store.save(items)
      },
      deep: true
    }
  },
  methods: {
    //监听
    listenToMyBoy: function (msg) {
      console.log(msg)
      this.childWorlds = msg
    }
  }
}
</script>

除了这个方法外,还有其他方法,详见Vue.js官网

• 自定义组件指定属性数据类型

export default {
  props: {
    slides: {
      type: Array,     //数组
      default: []      //默认值
    }
  },

• 在加载完毕执行某个方法

  mounted () {
    this.loadxxx()
  }

• @mouseover="xxxx" 鼠标进入(执行某个事件), @mouseout="xxxx" 鼠标移出(执行某个事件);
• transiotions动画对left和right等无效,要想实现动画效果,只能用x轴了;
• slot 插槽
• this.abc = false 等同于 this['abc'] = false
• 父组件style不添加scoped,这样他的子组件可以共用他的样式,也就是说,可以把子组件的样式,写在父组件中.

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
......
</style>

• & 代表父元素

<!--css书写规范 可被继承的写在前面,不让继承的的写在后面-->

<style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center
        /* & > a & 代表父元素 tab-item 子元素选择器 */
        & > a
          display: block
          font-style: 14px
          color: rgb(77,85,93)
          &.active
            color: rgb(240,20,20)
</style>

• 1像素边框的实现
  在pc端可以通过下面的设置,来实现,

border-bottom: 1px solid rgba(7,17,27,0.1)

pc端1像素边框

• 引入stylus

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  #app
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center
        border-1px(rgba(7,17,27,0.1))
        /* & > a & 代表父元素 tab-item 子元素选择器 */
        & > a
          display: block
          font-style: 14px
          color: rgb(77,85,93)
          &.active
            color: rgb(240,20,20)
</style>

• 一行显示 ,显示不全显示省略号

      /*设置一行显示 显示不全显示...*/
      white-space: nowrap
      overflow: hidden
      /*显示省略号*/
      text-overflow: ellipsis

• 模糊高斯效果
  1.让自身边模糊

filter: blur(10px)

让自身边模糊

2. 背景变模糊(仅仅在iOS上有效果)

backdrop-filter: blur(10px)

WechatIMG5.jpeg

• 在前端开发中,只要设置了display: flex,它就变成了水平布局.
• CSS中,上下margin是有重叠效果的,只显示一个margin的高度.
• 在chrome浏览器中,最低只能显示12px的字体,小于12px的字体按12px显示.
• CSS书写规则:
  影响布局的写在前面
  影响样式的写在后面
• img标签的宽高建议写在标签里面
  img width="57" height="57" :src="food.icon"
• Vue.js 1.0版本获取dom对象使用v-el,(Vue.js 1.0版本中v-el已经废除)

//v-el:food-wraper 注意: 用中划线连接 不能使用驼峰
<div class="menu-wrapper" v-el:food-wraper>

调用的时候,使用驼峰

this.menuScroll = new BScroll(this.$els.foodWraper);

• 获取dom节点的高度clientHeight;

item.clientHeight;

• Math.abs()取正值 ; Math.round() 四舍五入成整数
• 参数传递@click="selectMenu($index,$event)"把index和点击事件event传递到下面的函数中

<li @click="selectMenu($index,$event)">
    ......
</li>

• 设置圆

border-radius: 50%

• 设置文字居中,如果把text-align: center设在当前元素上没效果,试试设置在它的父元素上看看!!!

text-align: center

• 在Vue里,如果你的props是数组或者Object, 那么它的 default 就是一个函数, 并return一个默认的值

    props: {
      selectFoods: {
        type: Array,
        /* 在Vue里,如果你的props是数组或者Object, 那么它的 default 就是一个函数, 并return一个默认的值*/
        default() {
          return [];
        }
      },
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      }
    }

• forEach() 遍历

let total = 0;
this.selectFoods.forEach((food) => {
     total += food.price * food.count;
});

• 设置阴影

box-shadow: 0px 4px 8px 0 orange

购物车阴影

• 给对象添加新的属性(1)

/* 给对象新增属性 */
Vue.set(this.food, 'count', 1); // 给food对象新增了count属性,赋值为1

使用:

// 如果count的属性不存在,就新增count属性
 if (!this.food.count) {
    /* 给对象新增属性 */
    Vue.set(this.food, 'count', 1);
} else {
    this.food.count++;
}

• 给对象添加新的属性(2)

this.seller = Object.assign({}, this.seller, response.data);

• 获取dom使用v-el

<div class="list-content" v-el:list-content>

• 获取子组件使用v-ref

<food :food="selectedFood" v-ref:food></food>

• 主动触发浏览器重绘 let rf = el.offsetHeight;
• 组件的 私有方法 , 公有方法

私有方法,不允许外部调用的,书写规范

 methods: {
/* 如果不允许被外部调用的话,在方法前加 "_" 下划线 */
  _show() {
        this.showFlag = true;
      }
}

公有方法,允许外部调用

methods: {
   /* 该方法可以被外部调用 */
  show() {
     this.showFlag = true;
  }
}

• 设置图片宽高相等

html部分

<template>
  <div class="food">
    <div class="image-header">
      <i mg :src="food.image">
    </div>
  </div>
</template>

CSS部分 => 黑魔法 设置宽高相等 当设置padding-top: 100%时,它是相对于盒子的宽度计算的

<style lang="stylus" rel="stylesheet/stylus">
  .food

    ......

    .image-header
      position: relative
      width: 100%
      height: 0
      /* 黑魔法 设置宽高相等 当设置padding-top: 100%时,它是相对于盒子的宽度计算的 */
      padding-top: 100%
      /* 用绝对定位,设置宽高100%,把图片嵌套到父容器中 */
      img
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
</style>

宽高相等的图片

----------------------------以下已经废掉----------------------------

• 子组件向父组件派发事件儿this.$dispatch('ratingtype.select', type);

    methods: {
      select(type, event) {
        if (!event._constructed) {
          return;
        }
        this.selectType = type;
        /* 向父组件派发事件 */
        this.$dispatch('ratingtype.select', type);
      }
    }

在父组件events方法中,监听这个事件

    events: {
      'ratingtype.select'(type) {
        this.selectType = type;
        /* 异步刷新UI */
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      }
    }

------------------------------以上已经废掉-------------------------

• 数组过滤 filter()

computed: {
      /* 计算出推荐的数组 */
      positives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === POSITIVE;
        });
      },
      /* 计算出吐槽的数组 */
      negatives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        });
      }
    },

• :class如果绑定的内容是对象的话,可以为多个对象!

如下:

 <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>

• 设置圆:border-radius: 50%

border-radius: 50%

• 不同结构(标签)水平布局,css需要设置vertical-align: top,
  相同结构(标签)水平布局,不需要设置。
• 给特殊尺寸屏幕做适配 @media only screen and (max-width: 320px)

.overview-left
   flex: 0 0 137px
   padding: 6px 0
   width: 137px
   border-right: 1px solid rgba(7, 17, 27, 0.1)
   text-align: center
   /* 适配小屏幕 320px 手机 */
   @media only screen and (max-width: 320px)
      flex: 0 0 120px
      width: 120px

-img标签src前面一定要交“ : ”,不然报错!!!

![](rating.avatarxcz)

• 年月日

html中

<div class="time">
   {{rating.rateTime | formatDate}}
</div>

js中
先引用进来

import {formatDate} from 'common/js/date';

filters: {
   formatDate(time) {
     let date = new Date(time);
     return formatDate(date, 'yyyy-MM-dd hh:mm');
   }
}

时间处理

• 对象也可以是一个函数

data() {
      return {
        favorite: (() => {
          return loadFromLocal(this.seller.id, 'favorite', false); // 他的返回值是 true or false;
        })()
      };
}

• router-view的keep-alive属性,保证该视图只渲染一次,来回切换不重复渲染

<router-view :seller="seller" keep-alive></router-view>

router-view的keep-alive属性