前端些事之vue1.0和vue2.0的区别

最新推荐文章于 2021-01-17 10:57:28 发布

转载最新推荐文章于 2021-01-17 10:57:28 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yongxinke/blog/1093868

文章标签：

#前端 #python #javascript #ViewUI

本文详细对比了Vue 1.0与2.0版本的主要区别，包括组件模板、命名方式、生命周期、数据绑定等核心功能的变化，并介绍了2.0新增的动画功能及路由使用方法。

2019独角兽企业重金招聘Python工程师标准>>>

vue 1.0与2.0的不同点

1.在每个组件模板，不在支持片段代码

vue 1.0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <my-aaa></my-aaa>
    {{msg}}
</div>
<script src="js/vue1.0.js"></script>
<script>
    Vue.component('my-aaa',{
        template:'<h3>我是组件</h3><strong>我是加粗标签</strong>'
    });

    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                msg:'welcome 1.0'
            }
        });
    };
</script>
</body>
</html>

vue 2.0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <my-aaa></my-aaa>
    {{msg}}
</div>
<template id="aaa">
    <!--注意这里一定要加DIV 包裹在里面-->
    <div>
    <h3>我是组件</h3>
    <strong>我是加粗标签</strong>
    </div>
</template>
</template>
<script src="js/vue2.0.js"></script>
<script>
    Vue.component('my-aaa',{
        template:'#aaa'
    });

    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                msg:'welcome 2.0'
            }
        });
    };
</script>
</body>
</html>

2.组件的命名方式

Vue.component(组件名称,{	在2.0继续能用
		data(){}
		methods:{}
		template:
	});，最好不用vue.extend({})

定义组件的全局变量


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <my-aaa></my-aaa>
    {{msg}}
</div>
<template id="aaa">
    <!--注意这里一定要加DIV 包裹在里面-->
    <div>
        <h3>我是组件</h3>
        <strong>我是加粗标签</strong>
    </div>
</template>
</template>
<script src="js/vue2.0.js"></script>
<script>
    let Home={
        template:"#aaa"
    }
    Vue.component('my-aaa',Home);
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                msg:'welcome 2.0'
            }
        });
    };
</script>
</body>
</html>

组件定义局部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <my-aaa></my-aaa>
    {{msg}}
</div>
<template id="aaa">
    <!--注意这里一定要加DIV 包裹在里面-->
    <div>
        <h3>我是组件</h3>
        <strong>我是加粗标签</strong>
    </div>
</template>
</template>
<script src="js/vue2.0.js"></script>
<script>
    let Home={
        template:"#aaa"
    }
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                msg:'welcome 2.0'
            },
            components:{
                'my-aaa':Home
            }
        });
    };
</script>
</body>
</html>

3.组件的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <input type="button" value="更新数据" @click="update">
    <input type="button" value="销毁组件" @click="destroy">
    {{msg}}
</div>

<script src="js/vue2.0.js"></script>
<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                msg:'welcome vue2.0'
            },
            methods:{
                update(){
                    this.msg='大家好';
                },
                destroy(){
                    this.$destroy();
                }
            },
            beforeCreate(){
                console.log('组件实例刚刚被创建');
            },
            created(){
                console.log('实例已经创建完成');
            },
            beforeMount(){
                console.log('模板编译之前');
            },
            mounted(){
                console.log('模板编译完成');
            },
            beforeUpdate(){
                console.log('组件更新之前');
            },
            updated(){
                console.log('组件更新完毕');
            },
            beforeDestroy(){
                console.log('组件销毁之前');
            },
            destroyed(){
                console.log('组件销毁之后');
            }
        });
    };
</script>
</body>
</html>

4.for in 循环

vue 1.0添加重复数据，要添加 track-by="$index“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

    </style>
    <script src="js/vue1.0.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    list:['width','height','border']
                },
                methods:{
                    add(){
                        this.list.push('background');
                    }
                }
            });
        };
    </script>
</head>
<body>
<div id="box">
    <input type="button" value="添加" @click="add">
    <ul>
        <li v-for="val in list" track-by="$index">
            {{val}}
        </li>
    </ul>
</div>
</body>
</html>

vue2.0直接就可以添重复数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    list:{
                        a:'apple',
                        b:'banana',
                        c:'cell'
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="添加">
        <ul>
            <li v-for="(val,key) in list">
                {{val}} {{key}}//l输出apple a,banana b,cell c
            </li>
        </ul>
    </div>
</body>
</html>

5.过滤器的区别

vue1.0:
		系统就自带很多过滤
		{{msg | currency}}
		{{msg | json}}
		....
		limitBy
		filterBy
		.....
	一些简单功能，自己通过js实现

vue2.0:内置过滤器，全部删除了

2.0自定义过滤器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.filter('toDou',function(n,a,b){
            alert(a+','+b);
            //alert(input);
            return n<10?'0'+n:''+n;
        });

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:9
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        {{msg | toDou('12','5')}}
    </div>
</body>
</html>

6.自定义键盘事件

vue1.o:Vue.directive('on').keyCodes.f1=17;
vue2.0: Vue.config.keyCodes.ctrl=17
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //Vue.directive('on').keyCodes.ctrl=17;
        Vue.config.keyCodes.ctrl=17;

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                },
                methods:{
                    change(){
                        alert('改变了');
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keyup.ctrl="change">
    </div>
</body>
</html>

7. 组件之间的通信

父组件传递数据给子组件，数据最好是对象的形式，子组件数据更改，父组件的数据也随之更改
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    giveData:{
                        a:'我是父组件数据'
                    }
                },
                components:{
                    'child-com':{
                        props:['msg'],
                        template:'#child',
                        methods:{
                            change(){
                                //this.msg='被更改了'
                                this.msg.a='被改了';
                            }
                        }
                    }
                }
            });
        };
    </script>
</head>
<body>
    <template id="child">
        <div>
            <span>我是子组件</span>
            <input type="button" value="按钮" @click="change">
            <strong>{{msg.a}}</strong>
        </div>
    </template>

    <div id="box">
        父级: ->{{giveData.a}}
        <br>
        <child-com :msg="giveData"></child-com>
    </div>
</body>
</html>

8.单一事件中心管理组件通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
</div>
<script src="js/vue2.0.js"></script>
<script>
    //准备一个空的实例对象
    let Event=new Vue();
    let A={
        template:`
                <div>
                    <span>我是A组件</span> -> {{a}}
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
        methods:{
            send(){
                Event.$emit('a-msg',this.a);
                console.log(this.a);
            }
        },
        data(){
            return {
                a:'我是a数据'
            }
        }
    };
    let B={
        template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C" @click="send">
                </div>
            `,
        methods:{
            send(){
                Event.$emit('b-msg',this.a);
                console.log(this.a);
            }
        },
        data(){
            return {
                a:'我是b数据'
            }
        }
    };
    let C={
        template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来的B的数据为: {{b}}</span>
                </div>
            `,
        data(){
            return {
                a:'',
                b:''
            }
        },
        mounted(){
            //var _this=this;
            //接收A组件的数据
            Event.$on('a-msg',function(a){
                this.a=a;
            }.bind(this));

            //接收B组件的数据
            Event.$on('b-msg',function(a){
                this.b=a;
            }.bind(this));
        }
    };


    window.onload=function(){
        new Vue({
            el:'#box',
            components:{
                'com-a':A,
                'com-b':B,
                'com-c':C
            }
        });
    };
</script>
</body>
</html>

9.vue2.0新增动画涵数

到2.0以后 transition 组件

<transition name="fade">
	运动东西(元素，属性、路由....)
</transition>

class定义:
.fade-enter{}	//初始状态
.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)

.fade-leave{}
.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

如何animate.css配合用？
	<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            	<p v-show="show"></p>
        	</transition>

多个元素运动:
	<transition-group enter-active-class="" leave-active-class="">
		<p :key=""></p>
		<p :key=""></p>
	</transition-group>

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    show:false
                },
                methods:{
                    beforeEnter(el){
                        console.log('动画enter之前');
                    },
                    enter(el){
                        console.log('动画enter进入');
                    },
                    afterEnter(el){
                        console.log('动画进入之后');
                        el.style.background='blue';
                    },
                    beforeLeave(el){
                        console.log('动画leave之前');
                    },
                    leave(el){
                        console.log('动画leave');
                    },
                    afterLeave(el){
                        console.log('动画leave之后');
                        el.style.background='red';
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="点击显示隐藏" @click="show=!show">

        <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>
    </div>
</body>
</html>

多个动画和animated配合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            width:100px;
            height:100px;
            background: red;
            margin:10px auto;
        }
    </style>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="animate.css">
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    show:'',
                    list:['apple','banana','orange','pear']
                },
                computed:{
                    lists:function(){
                        var arr=[];
                        this.list.forEach(function(val){
                            if(val.indexOf(this.show)!=-1){
                                arr.push(val);
                            }
                        }.bind(this));
                        return arr;
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="show">

        <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
                {{val}}
            </p>
        </transition-group>
    </div>
</body>
</html>

vue2.0路由

简单的路由使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 2.0 路由</title>
 <style>
        .router-link-active{
            font-size: 20px;
            color:#f60
        }
    </style>
</head>
<body>
<div id="vue">
    <div>
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
<script src="js/vue2.0.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
<script>
    //组件
    let Home={
        template:'<h3>我是主页</h3>'
    }
    let News={
        template:'<h3>我是新闻</h3>'
    }
//    配置路由
    const routes=[
        {path:'/home',component:Home},
        {path:'/news',component:News},
//        相当于设置404页面跳转
        {path:'*',redirect:"/home"}
    ]
//    生成路由实例
    const router=new VueRouter({
        routes
    })
    var vm = new Vue({
        router,
        el:"#vue",
        data:{
            msg:"ddd"
        },
        methods:{

        }
    })
</script>
</body>
</html>

路由的简单嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 2.0 路由</title>
    <style>
        .router-link-active{
            font-size: 20px;
            color:#f60
        }
    </style>
</head>
<body>
<div id="vue">
    <div>
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/user">用户信息</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
<script src="js/vue2.0.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
<script>
    //组件
    let Home={
        template:'<h3>我是主页</h3>'
    }
    let News={
        template:'<h3>我是新闻</h3>'
    }
    let User={
        template:`
            <div>
                <h3>我是用户信息</h3>
                <ul>
                    <li><router-link to="/user/username">某个用户</router-link></li>
                </ul>
                <div>
                    <router-view></router-view>
                </div>
            </div>
        `
    }
    let UsterDetail={
        template:`
        <div>
            我是什么用户
        </div>
        `
    }
    //    配置路由
    const routes=[
        {path:'/home',component:Home},
        {path:'/news',component:News},
        {path:'/user', component:User,
            children:[
                {path:'username',component:UsterDetail}
            ]
        },
//        相当于设置404页面跳转
        {path:'*',redirect:"/home"}
    ]
    //    生成路由实例
    const router=new VueRouter({
        routes
    })
    var vm = new Vue({
        router,
        el:"#vue",
        data:{
            msg:"ddd"
        },
        methods:{

        }
    })
</script>
</body>
</html>

路由的数据传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <style>
        .router-link-active{
            font-size: 20px;
            color:#f60;
        }
    </style>
    <script src="vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li><router-link to="/user/strive/age/10">Strive</router-link></li>
                        <li><router-link to="/user/blue/age/80">Blue</router-link></li>
                        <li><router-link to="/user/eric/age/70">Eric</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:':username/age/:age', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
</html>

路由的两个方法

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

例如：

<!DOCTYPE html>
<html lang="en">
<head
    <style>
        .router-link-active{
            font-size: 20px;
            color:#f60;
        }
    </style>
    <script src="vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
    <div id="box">
        <input type="button" value="添加一个路由" @click="push">
        <input type="button" value="替换一个路由" @click="replace">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li><router-link to="/user/strive/age/10">Strive</router-link></li>
                        <li><router-link to="/user/blue/age/80">Blue</router-link></li>
                        <li><router-link to="/user/eric/age/70">Eric</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:':username/age/:age', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            methods:{
                push(){
                    router.push({path:'home'});
                },
                replace(){
                    router.replace({path:'user'});
                }
            }
        }).$mount('#box');
    </script>
</body>
</html>

vue2.0+axios

man.js一般的配置
路由的配置

  {
    path:'/article/:id',
    component:Article,
    /*children:[
      {
        path:'/:id',
        component:Article
      }
    ]*/
  },

//axios的一些配置，比如发送请求显示loading，请求回来loading消失之类的
//
axios.interceptors.request.use(function (config) {  //配置发送请求的信息
  stores.dispatch('showLoading')  
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) { //配置请求回来的信息
  stores.dispatch('hideLoading')
  return response;
}, function (error) {

  return Promise.reject(error);
});

/*axios.defaults.baseURL = (process.env.NODE_ENV !=='production' ? config.dev.httpUrl:config.build.httpUrl);
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';*/
//axios.defaults.baseURL='http://localhost:8082/';
Vue.prototype.$http = axios  //其他页面在使用axios的时候直接  this.$http就可以了

组件中的调用

<template>
	<div class="content">
		<Slider></Slider>
	    <div class="newsList">
	    	<ul>
	            <li v-for="(item,index) in arrList">
	                <router-link :to="'/article/'+item.id">
	                	<h2>{{index+1}} . {{item.title}}</h2>
	                    <p>{{item.detail}}</p>
	                </router-link>
	            </li>
	        </ul>
	    </div>
	</div>
</template>
<script>
	import Slider from './Slider.vue'
	export default {
		data(){
			return {
				arrList:[]
			}
		},
		components:{
			Slider
		},
		mounted(){
			//获取数据
			this.fetchData();
		},
		methods:{
			fetchData(){
				var _this=this;
				this.$http.get('src/data/index.data').then(function(res){
					//console.log( res.data);
					//setTimeout(function(){
						_this.arrList=res.data;
					//},1000);
				}).catch(function(err){
					console.log(err);
				});
			}
		}
	}

</script>
<style scoped>
	@import '../assets/css/index.css';
</style>

转载于:https://my.oschina.net/yongxinke/blog/1093868