vue2.0与vue1.0中的区别1:每个组件模板中不在支持片段代码
在vue1.0 中的模板template中可以分开书写片段代码例:

在vue2.0中需要使用div将片段代码包裹起来例:

vue2.0与vue1.0中的区别2:组件的定义发生了改变和升级
1.对于vue1.0中的vue.extend定义组件的方式在2.0里面依然存在但是也有所改动,这种写法虽然还有但是我不推荐大家继续使用
2.在1.0中我们一般定义组件的方式为

这种方式任然存在并且可以使用
在2.0中新推出一种更加简洁的组件定义方式(全局)

在2.0中新推出一种更加简洁的组件定义方式(局部)

组件间的通信使用:进行子组件获取父级数据vue1.0
例如

在vue2.0中子组件获取父组件的数据虽然是用同样方法但是,父组件需要给子组件传递的是一个json而不是单一的数据,否则会出现报错。新写法

建议在vue2.0中使用单一事件管理组件通信(子组件与子组件之间的通信)
首先我们新建3个组件

新建一个空的vue实例

在对应的子组件中使用$emit发送数据


当我们在点击发送的时候,将子组件中的数据a发送出去
然后我们需要在对应的组件中接收$on

当我们在点击发送时,子组件b接收来自于组件a的数据并弹出
生命周期发生了变化
在vue1.0中的生命周期及(钩子函数)为
init
created(实例已经创建)
beforeCompile(编译之前)
compiled(编译之后)
reday(插入到文档之中)
beforeDestory(销毁之前)
Destroyed(销毁之后)
在vue2.0中已经中了较大幅度的修改
beforeCreate(){ 组件实例刚被创建 }
Created(){ 组件实例已经创建属性已经绑定 }
beforeMount(){ 模板编译之前 }
Mounted(){ 模板编译之后}
beforeUpdate(){ 组件更新之前 }
Update(){ 组件更新之后 }
beforeDestory(销毁之前)
Destroyed(销毁之后)
vue2.0里面的循环
在vue2.0里面,默认可以添加重复的数据,在2.0里也去掉了一些隐式的变量:如$index
之前 的track-by也去掉了,现在可以使用:key =‘index'实现
过滤器:
在2.0中系统中自带过滤器全部去掉了,json过滤器直接已经可以实现,其他的一些过滤器需要我们自己使用自定义过滤器自己定义。
网友评论