4c21a75a8ac95334ca3f09719caa4.jpg

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

组件

1、template写法

1.0 支持片段代码

<template id="aaa">

     <h3>我是组件</h3>
     <strong>我是加粗标签</strong>
</template>

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

<template id="aaa">

    <div>   
        <h3>我是组件</h3>
        <strong>我是加粗标签</strong>
    </div>
</template>

2、组件注册

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

var Aaa=Vue.extend({

  //直接显示
  template:"<h3 @click='change'>我是标题3</h3>",
  //显示数据
  //****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中的<transition>标签

//以name作为自定义动画关联名
<transition name="fade"

        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave">
        <p v-show="show"></p>
    </transition>
 //style的标签名也发生了变化
 <style>
    p{
        width:300px;
        height:300px;
        background: red;
    }
    //动画运行时间
    .fade-enter-active, .fade-leave-active{
        transition: 1s all ease;
    }
    //显示动画结束状态
    .fade-enter-active{
        opacity:1;
        width:300px;
        height:300px;
    }
    //消失动画结束状态
    .fade-leave-active{
        opacity:0;
        width:100px;
        height:100px;
    }
    //动画初始状态
    .fade-enter,.fade-leave{
        opacity:0;
        width:100px;
        height:100px;
    }
</style>

配合animate.css

<transition 
       enter-active-class="animated zoomInLeft"
       leave-active-class="animated zoomOutRight">
    <p v-show="show"></p>
</transition>
//或者---animated也可以直接给元素添加
<transition 
       enter-active-class="zoomInLeft"
       leave-active-class="zoomOutRight">
    <p v-show="show" class="animated"></p>
</transition>

动画组<transition-group>标签

<transition-group 

     enter-active-class="zoomInLeft"
     leave-active-class="zoomOutRight">
        //:key=''是元素运动的必须属性
        <p v-show="show" class="animated" :key="1"></p>
        <p v-show="show" class="animated" :key="1"></p>
</transition-group>