vue2.0的变化，与vue1.0对比

1.在每个组建的模板中，不再支持片段代码。

组件中模板：

Vue1.0：

<template>

<h3>我是组件</h3><strong>我是加粗</strong>

</template>

Vue2.0：必须有一个根元素，包裹所有的元素

<template id=‘aaa'’>

<div>

<h3>我是组件</h3>

<strong>我是加粗</strong>

</div>

</template>

2.关于组件的定义

Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法虽然可以用，但是尽量少用

Vue.component(组件名称，{ // 在2.0继续能用

data(){}

methods{}

template:

})；

2.0推出一个组件的简洁定义的方式：

var Home={

template:''

};

3.生命周期

Vue1.0:

init

created

beforeCompile

compiled

ready

beforeDestroy

destroyed

Vue2.0：

beforeCreate: 组件实例刚刚被创建，属性都没有

created: 实例已经创建完成，属性已经绑定

beforeMount: 模板编译之前

mounted: 模板编译完成(代替之前的cimpiled和ready两个状态)

beforeUpdate: 组件更新之前

updated: 组件更新完毕

beforeDestroy: 组件销毁前

destroyed: 组件销毁后

4.Vue2.0循环

1.0里面：v-for="val in list"想要添加重复的数据：track-by="$index"

2.0里面：

1）默认可以添加重复的数据

2）去掉了隐式的变量，如$index,$key,在Vue2.0中 v-for="(val,index) in list :index"

在json中，v-for="(val,key) in json"

5.自定义键盘的指令

1.0里面：Vue.direction('on').keyCodes.f1=12;

2.0里面：Vue.config.keyCodes.ctrl=17;

6.过滤器

1.0里面：

系统自带很多过滤器

{{msg |currency}}

{{msg |json}}

....

limitBy

filterBy

一些简单的功能，自己通过js实现

2.0里面：

内置过滤器，全部删除了

lodash工具库：_.debounce(fn,200)

自定义过滤器：还存在

但是，自定义过滤器传参，

之前: {{msg | toDou '12' '5'}}

现在: {{msg | toDou('12','5')}}

7.组件通信：

vm.$emit()

vm.$on();

父组件和子组件：

子组件想要拿到父组件的数据：

通过 props:[]

Vue1.0:子组件可以更改父组件的信息，可以使同步的sync

现在：不允许直接给父级的数据，进行赋值操作

满足下面的条件时可以修改：

a).父组件每次传一个对象给子组件,对象之间是引用的 最靠谱的方式

b).只是不报错，mounted中转

8.可以使用一个"单一事件"管理组件通信

var Event = new Vue();

Event.$emit(事件名称，数据)

Event.$on(事件名称，function(data){

//data

}.bind(this));