vue1.0与2.0的区别

本文的意义在于总结一些因为版本的更迭导致比较常见的地方引起错误，具体说明可以参考vue官网

目录

1、组件模板写法
2、组件定义
3、生命周期
4、重复数据循环
5、自定义键盘指令
6、filter过滤器
7、组件通信
8、动画
9、vue-router

1、组件模板写法变更

vue2.0不在支持片段代码，例如以下

//下边的组件写法在vue1.0可以正常执行，但vue2.0会给出警告，必须给他一个根节点，也就是唯一父级
//[Vue warn]: Component template should contain exactly one root element:


//推荐此种方式写组件，必须有根元素，包裹住所有的代码


    

2、组件定义

//使用组件必须注册
//[Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option. 


    
    

        
    

//第二种方式


    
    

        
    

3、生命周期

vue1.0生命周期:
        init    
        created
        beforeCompile
        compiled
        ready       √   ->     mounted
        beforeDestroy   
        destroyed
vue2.0生命周期:
        beforeCreate    组件实例刚刚被创建,属性都没有
        created 实例已经创建完成，属性已经绑定
        beforeMount 模板编译之前
        mounted 模板编译之后，代替之前ready  *
        beforeUpdate    组件更新之前
        updated 组件更新完毕  *
        beforeDestroy   组件销毁前
        destroyed   组件销毁后

4、重复数据循环

//[Vue warn]: Duplicate value found in v-for="val in list": "background". Use track-by="$index" if you are expecting duplicate values.
//vue1.0循环重复数据会受限制，vue2.0正常


    
    

        
  //vue1.0循环需要添加 track-by="$index"
            {{val}}
        
//[Vue warn]: Property or method "$key" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
        
  
            {{$index}}  {{$key}} //vue2.0去掉了隐式一些变量 $index   $key
        
        
  //vue1.0循环写法v-for="(index,val) in array"
            {{val}} {{index}}
        
        
  //vue2.0循环写法 v-for="(index,val) in array"
            {{val}} {{index}}                 // 倾向于js原生forEach，先写val再写index
        
    


//提高循环性能 track-by="id" 变成 :key="index"


    

        

            {{val}} {{key}}
        
    

5、自定义键盘指令

6、filter过滤器

vue1.0系统就自带很多过滤，例如currency/json等等。到了vue2.0，作者删除全部内置过滤器，保留了自定义过滤器，但自定义过滤器传参格式有点区别。

    {{msg | toDou '12' '5'}}   //vue1.0写法
    {{msg | toDou('12','5')}}  //vue2.0写法

7、组件通信

子级获取父级的数据，通过props

//vue1.0写法，子组件可以更改父组件信息，可以是同步sync



    父级: ->{{a}}
    

      //需要同步更改父级需要加上.sync


//[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "msg" 
//vue2.0写法跟vue1.0有点区别，不然会报以上警告。 不允许直接给父级的数据，做赋值操作
//处理方式 a). 父组件每次传一个对象给子组件, 对象之间引用，推荐  b). 只是不报错, mounted中转
//方式a



    父级: ->{{giveData.a}}
    

    

//方式b




    父级: ->{{a}}
    

    


//注意如果是父子级可以通过以上方式处理。如果是同级组件之间想传递数据，也就是单一事件管理，通过vm.$emit()传递，vm.$on()接收。类似vuex实现原理。
格式参考：
var Event=new Vue();
Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
    //data
}.bind(this));
//具体实现


    
    
    

8、动画

动画如果有结合animate,相关配置参数和效果查看可以参考animate官网

vue1.0写法，transition是属性
    

处理好fade相关样式就可以实现动画效果
.fade-transition{}
.fade-enter{}
.fade-leave{}

vue2.0写法，transition变成了组件，需要把要做动画的包起来，一般是包router-view

    运动东西(元素，属性、路由....)

class定义:
.fade-enter-active,.fade-leave-active{transition:1s all ease;}
.fade-enter{}   //初始状态
.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

动画可以配合animate.css使用，把fade和name去掉。给transition加enter-active-class="zoomInleft" leave-active-class="zoomOutRight",给运动的元素本身加class="animated"。 

    



多个元素运动需要使用transition-group，并且把每个运动元素加个：key="index":

    

    

9、vue-router

vue1.0写法：
    我是主页
    router.rediect   //重定向  2.0废弃了
    subRoutes   //路由嵌套用subRoutes，配置跟父级一样是json
vue2.0写法：
    我是主页  它会自动解析成a v-link形式
    const routes = [   //配置路由
    {path:'/home',component:Home}，
    {path:'*',redirect:'/home'}   //重定向
    ...一个个json
    ];
    children   //路由嵌套用children，配置跟父级一样是json

路由实例方法:
    router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
    router.replace({path:'news'}) //替换路由，不会往历史记录里面添加

带有参数的路由配置

    
Strive
    
Blue
    
Eric

//配置路由
const routes=[
    {path:'/home', component:Home},
    {
        path:'/user',
        component:User,
        children:[
            {path:':username/age/:age', component:UserDetail}
        ]
    },
    {path:'*', redirect:'/home'}  //找不到的页面全部重定向到home,相当于404
];