vue1.0到vue2.0的变化

1. 组件模板不再支持片段代码，必须有一个顶级元素包裹，例如：

version1.0：

<template>
　　<h3>h3标签</h3>
　　<p>p标签</p>
</template>

version2.0：

<template>
    <div>
       <h3>h3标签</h3>
        <p>p标签</p>
    </div>
</template>

2. 关于组件的定义。

version1.0：

Vue.component（组件名称，{//vue2.0能用，但不在那么用了。
	//组件内容
}）

version2.0：

var home={
	template:' '  //代替了之前的Vue.extend({})的形式，直接把对象抛出来，就认为成是组件了。
}

3. 生命周期。

version1.0：
（1）init
（2）created
（3）beforeCompile
（4）compiled
（5）ready
（6）beforeDestroy
（7）destroyed

version2.0：
（1）beforeCreate　　组件实例刚刚被创建，属性都没有
（2）created　 组件实例创建完毕，属性已经绑定
（3）beforeMount　　模板编译之前
（4）mounted　　　模板编译之后，代替了之前的ready*
（5）beforeUpdate　　组件更新之前
（6）updated　　　 组件更新完毕
（7）beforeDestroy　 组件销毁之前
（8）destroyed 组件销毁后

4. 循环。

version1.0：v-for="(index,val) in array"
需要track-by="$index"属性解决添加重复数据问题。

version2.0：v-for="(val,index) in array"
默认可以添加重复数据，:key="index"属性提高循环性能，对功能没有影响，一般情况下用再大型项目中。

5. 自定义键盘事件。（以ctrl键为例）

version1.0：

Vue.directive("on").keyCodes.ctrl = 17;

version2.0：

Vue.config.keyCodes.ctrl = 17;

6. 过滤器。

version1.0：有很多系统自带过滤器，如：{{msg|json}}、{{msg|currency}}。
version2.0：内置过滤器全部删除，要用的时候需要自己用一些辅助函数解决。

7. 组件通信。

version1.0：子组件利用sync(eg: :msg.sync="change")可以更改父组件信息。
version2.0：子级想拿到父级的数据：通过props，且不允许更改父组件信息。
如何改：
a)父组件每次传一个对象给子组件，对象引用。
b)只是追求不报错，可以用mounted的钩子函数，改变自身数据。

8. 可以单一事件管理组件通信

var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名'，function(){　...　}.bind(this));

9. 动画。

transition不再是属性：transition=“fade”
而是像模板一样的标签

<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素，属性，路由...</transition>

10. 路由.

布局的改变：
version1.0：

<a v-link="{path:'/home'}">我是主页</a>

version2.0：

<router-link to="/home">我是主页</router-link>

路由写法的改变：

var Home ={      //准备组件
　　template:'<h3>我是主页</h3>'
}
const routes = [   //配置路由
　　{path:'/home',component:Home}，
　　{path:'*',redirect:'/home'}   //重定向
　　...
];
const router = new VueRouter({routes:routes});  //生成路由实例
//简写成对象的形式 ：const router = new VueRouter({routes});
new Vue({   //最后挂到vue上
	router,
　  el:'#box'
});

11. 路由嵌套

const routes = [   //配置路由
　　{path:'/home',component:Home},
　　{path:'/news',component:News,
　　　　children:[
　　　　　　{path:'/newsname',component:newsNameDetail},
　　　　　　...
　　　　]
　}，
　{path:'*',redirect:'/home'}   //重定向
　　　...
];