vue2.0我踩过的坑，希望你别踩

这是一个伤心的故事，vue2.0做1.0的东西踩过的坑…

express

（还有许多依赖包也是如此比如css-loader等）
这东西在1.0的时候只需要在package.json里面声明一下然后

1	npm install

express的依赖就安装完毕了，但是在2.0这样玩的时候报出express is not defind
解决方案就是安装一下express，安装命令：

1	npm install express --save

假如是暂时安装而不将其添加到依赖项列表中，则忽略–save，安装完之后直接跑起来如果还是报错，到依赖包package.json里面定义一下，然后npm install，
webpack配置文件再定义一下，就可以跑了

1	var express = require('express');

。。。也许你都装了那些配置，然后只是忘了var express = require(‘express’）,非常尴尬的说我就是如此hhhhh，装完一切才发现我是没var就用，这个例子很简单，但是2.0的很多依赖都是这么整的，所以碰到坑的时候不妨一试

vue路由（vue-router）

在用脚手架构建项目的时候会提示时候安装vue-router，如果选了它就直接帮忙安装好，路由的东西写在脚手架生成的router文件下的index.js下面，假如选择了否之后，就需要自己装路由

1	npm install vue-router

package.json里（dependencies）加上”vue-router”: “^0.7.13（这个版本号是看你自己要装什么版本）”

它的坑：

1	Cannot read property 'component' of undefined

解决方案：
1.打开package.json将”dependencies”中的 “vue-router”版本改为：”^2.2.0”
2.npm install
3.在App.vue中

将
<a v-link="{path:'/xxx'}">xxx</a>
改成
<router-link to="/xxx">xxx</router-link>

4.然后在main.js中import

1	import VueRouter from 'vue-router';

否则如图

使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

//定义路由
var routes=[
{path:'/',redirect: '/xxx'}, 
{path:'/xxx',component:xxx},
{path:'/yyy',component:yyy},
{path:'/zzz',component:zzz}
]
//创建 router 实例，然后传 `routes` 配置
var router=new VueRouter({
linkActiveClass: 'active',
  routes
});
//=>是ES6的箭头语法
new Vue({
el:'#app',
router,
render:h=>h(App)
})

处理前后端数据交互vue–resource

安装

1	npm install vue-resource

交互也可以用axios

better-scroll操作dom的时候的坑

这里先装一下better-scroll
1、package.json写上”better-scroll”: “^1.8.1”
2、执行命令

1	npm install

（用这个的时候的坑）
在vue1.0的时候两个外部dom获取写成

<div class="menu-wrapper" v-el:menu-wrapper>
<div class="foods-wrapper" v-el:foods-wrapper>、

//挂载到els的时候
this.meunScroll = new BScroll(this.$els.menuWrapper, {});
this.foodsScroll = new BScroll(this.$els.foodsWrapper, {});
created() {
      this.$http.get('/api/goods').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.goods = response.data;
          this.$nextTick(() => {
            this._initScroll();
            this._calculateHeight();
          });
        }
      });
    },
methods: {
      _initScroll() {
        this.meunScroll = new BScroll(this.$els.menuWrapper, {});
        this.foodsScroll = new BScroll(this.$els.foodsWrapper, {});
      }
    }

在1.0里面这样写没问题，但是到了2.0版本就爆炸了，所以在2.0里面要换一种写法

//两个外部dom获取写成ref
<div class="menu-wrapper" ref="menuWrapper">
<div class="foods-wrapper" ref="foodsWrapper">

//挂载的时候挂在到refs
created() {
      this.$http.get('/api/goods').then((response) => {
        response = response.body
        if (response.errno === ERR_OK) {
          this.goods = response.data
          this.$nextTick(() => {
            this._initScroll()
          })
        }
      })
    },
methods: {
      _initScroll() {
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {})
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
      }
    }

$dispatch

这个的坑比较简单，因为在2.0版本的时候这东西被废弃了，用它肯定Uncaught TypeError: this.$dispatch is not a function啊

这是因为在vue2.0的时候$dispatch和$broadcast已经被弃用了
解决方案：
可以改成用#$emit方法，$on也可以试试

props的问题

解决方案：
在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，不能修改由外层传来的props数据。可以把product-list.vue中的products放到data中。

另外Vue1.0中可以使用的双向props，2.0中不再支持双向props，且规定组件自身修改props是反模式的。可以使用computed和data来代替props的操作。

拓展

切换组件时，组件当前的状态能被保留，vue.js给我们提供了一个非常方便的api，组件状态保留功能
用法：在APP.vue路由标签加上keep-alive

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

当然这是vue1.0版本的用法，vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗
用法（同APP.vue）：

  <!--组件缓存-->
<keep-alive>

<component>
  <!-- 组件将被缓存 -->
</component>
</keep-alive>
有时候可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下
<keep-alive>
    <router-view :seller="seller" keep-alive></router-view>
</keep-alive>

2.0中的transition用法也有所改变不再是以前写在标签内，而是用transition组件包住需要写动画的地方
具体可以瞄一眼api

来一个题外话
1W是多少度电？？（这和it木有关系，只因我比较喜欢养鱼，因为仔细观察鱼很神奇）
这个问题相信很多喜欢养鱼的朋友都在想，毕竟增氧泵24小时都在工作，担心耗电的话来算一算，度是用电器耗电量的单位千瓦时,1度=1千瓦时,1W的电器工作1000小时耗1度电,1000瓦的用电器工作1小时耗1度电,500瓦的用电器工作2小时耗1度电。