Vue.js2.0--1.0区别

4c21a75a8ac95334ca3f09719caa4.jpg

vue1.0学完了。对比课件整理一下2.0的改变。还是挺多的

组件

1、template写法

1.0 支持片段代码

2.0必须用根元素包裹住代码段

2、组件注册

1.0 ---Vue.extend生成对象然后注册

var Aaa=Vue.extend({

  //直接显示
  template:"
我是标题3
",
  //显示数据
  //****data必须是函数的形式，函数必须返回一个对象(json)
  data(){
      return {
          msg:'数据MSG'
      }
  },
  //添加方法
  methods:{
      change(){
          this.msg="changed";
      }
  }
});

2.0 ---直接生成对象然后注册

var Home={

    template:'',
    data(){},  
    method(){}
};

注册保持不变

//全局

Vue.component('aaa',Aaa)
//局部
//vue中
components:{ //局部组件
  'aaa':Aaa
}

生命周期

1.0

created -> 实例已经创建

beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后

2.0

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

created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready  *
beforeUpdate    组件更新之前
updated 组件更新完毕  *
beforeDestroy   组件销毁前
destroyed   组件销毁后

循环

1、重复添加

1.0

 track-by="$index"

2.0

默认可以重复添加

2、隐式变量

1.0

v-for="(val,index) in array"
v-for="(val,key) in array"
track-by="id"//提升性能
@click="changeImgForCarousel(index)"//方法传入index

2.0---更加贴近原生

v-for="(val,index) in array"
v-for="(val,key) in array"
:key="index"//提升性能

自定义键盘事件

1.0

Vue.directive('on').keyCodes.f1=17;

2.0

Vue.config.keyCodes.ctrl=17;

过滤器

2.0
删除了全部1.0自带过滤器
json改为默认配置

自定义过滤器

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

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

组件通信

父子组件通信

1.0

子组件可以更改父组件信息(可以是同步.sync)

2.0

不允许直接给父级的数据，做赋值操作
如果非要修改：

 同步:父组件每次传一个对象给子组件, 对象之间引用

 非同步:子组件中以属性承接、直接修改子组件属性

兄弟组件通信

2.0

//注册一个空的Vue对象作为媒介
var Event=new Vue();
//发送数据
Event.$emit('msg-name', msg)
//接收数据
Event.$on('msg-name',function(msg){

    msg
}.bind(this));

动画

由1.0中的属性。改为2.0中的标签

//以name作为自定义动画关联名

        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave">
        

    
 //style的标签名也发生了变化
 

配合animate.css

    


//或者---animated也可以直接给元素添加

    

动画组标签

     enter-active-class="zoomInLeft"
     leave-active-class="zoomOutRight">
        //:key=''是元素运动的必须属性