Vue遇到的坑

1. 给router-link 标签添加事件@click 、@mouseover等无效的情况

 自定义组件绑定原生事件，router-link会阻止click事件，需要加.native修饰符。@click.native="displayArticle('hot')"

2.Vue2.0通过二级路由实现页面切换

index.js中的路由配置/一级路由对应的组件中向二级路由跳转：

//

二级路由对应的组件的样式设计：

3. better-scroll的使用

条件：① 必须包含两个大的div，外层和内层div
② 外层div设置可视的大小(宽或者高)-有限制宽或高
③ 内层div，包裹整个可以滚动的部分
④ 内层div高度一定大于外层div的宽或高，才能滚动

竖向滚动

（1）html

<div class="wrapper" ref='wrapper'>
  <div class="xxx">
      ...
  </div>
</div>

（2）js，在挂载时初始化scroll

import Bscroll from 'better-scroll'
export default {
  data () {
    return {}
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}

（3）css

/*对外层div进行了高度上的限制*/
.wrapper {
  overflow: hidden;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
}

4. router-link 标签在选中的时候，会自动给整个标签添加一个 router-link-active的class

5. 在.vue文件中嵌入一个网页

<template>
  <div class='toilet'>
    <iframe src='../../../static/html/nearby.html' class='toilet-html'></iframe>
  </div>
</template>

<style>
.toilet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40px;
}
.toilet-html {
  width: 100%;
  height: 100%;
}
</style>

6.重定向路由

route/index.js

// 正确实例
import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/components/Goods.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/goods'
    },
    {
      path: '/goods',
      component: Goods
    }
  ]
})

// 错误示例
export default new Router({
  mode: 'history',
  // 路由有问题
  routes: [
    {
      path: '/',
      component: Goods,
      redirect: '/goods'
    }
  ]
})

7. props接收来自父组件的动态数据时，在methods里可能获取不到props的值。

原先的代码：

  props: {
    star: {
      type: Number,
      default: 0
    }
  },
  created () {
    this._initStar()
  }

修改后的代码：

  props: {
    star: {
      type: Number,
      default: 0
    },
  },
  created () {
    this._initStar()
  },
  watch: {
    star () {
      this._initStar()
    }
  }

8. this.$refs.name  或 this.$refs[name] (当name是变量时)

9. computed 和 data 中不能命名相同的变量

10. HTMLCollection有length属性，但是js调用时length为0的问题

可以知道在mounted阶段，mounted 不会承诺所有的子组件也都一起被挂载，所以在此阶段，dom结构还没加载完，js就执行了。

  created () {
    getGoodsData().then(res => {
      res = res.data
      this.goods = res.result
      this.$nextTick(() => {   // 关键
        this._calcHeight()
      })
    })
  },
  methods: {  
    _calcHeight () {
      let foodList = this.$refs.wrapper2.getElementsByClassName('goods-right-content')
      console.log(foodList, foodList.length)
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    }
  }

11. 在能用v-if控制显示子组件的情况下，就不要用二级路由。

12. 不能通过vm.b = 2为对象添加属性，具体查看官方手册：

  methods: {
    add () {
      if (!this.food.count) {
        this.$set(this.food, 'count', 1)
      } else {
        this.food.count++
      }
    }
  }

13. 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

14. ①触发子元素事件而不触发父元素事件

stopPropagation() 阻止事件传播

在vue中使用.stop事件修饰符

②触发父元素事件而不触发子元素事件(用于点击遮罩层黑色部分关闭遮罩层)

 <div class="check-list" v-show="show" @click="closeList">
 ....
 </div>

 methods: {
    closeList (e) {
      console.log(e)
      let checkList = document.querySelector('.check-list')
      if (e.target === checkList) {
        this.show = false
      }
    }
  }
}

15. sessionStorage和localStorage 在存储对象时只会得道字符串类型得值，无法得到期望得值

问题描述：

无轮是字符串，数字，布尔值 虽然值是和想要得一样但是类型却都是字符串 
并且数组 只会将里面得值打印出来 而非是一个数组对象了 
更加糟糕得是打印在localStorage中的对象仅仅得到”Object”，而且对于数组对象也会的和对象一样的结果，而非数组那样的结果。

解决方法：

在存储到storage之前将相应的值变成JSON格式，然后出来后在使用JSON.parse将值在变为对象。

var obj1 = {
      name: 'a1',
      age: 1
  }
 var json_obj1 = JSON.stringify(obj1)
 window.localStorage.setItem('json_obj1', json_obj1)
 console.log(JSON.parse(window.localStorage.json_obj1));

16. Vue父组件接收不到子组件$emit事件的原因分析

     (1) 事件名称不全是小写。事件名称要求全小写。

     this.$emit('increment')

     (2) 不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。

17. 购物车小球动画

https://segmentfault.com/a/1190000009294321?utm_source=tag-newest

18. mapState、mapGetters、mapActions、mapMutations返回的是包含多个函数的对象。