vue.1和vue.2有什么不同

这篇文章主要介绍了vue.1和vue.2有什么不同，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

10年品牌的成都网站建设公司,上1000家企业网站设计经验.价格合理,可准确把握网页设计诉求.提供定制网站建设、商城网站定制开发、成都小程序开发、响应式网站设计等服务,我们设计的作品屡获殊荣,是您值得信赖的专业网络公司。

vue.1和vue.2区别：1、在vue2中使用【v-for】指令时它可以添加重复的内容；2、vue2中跟vue1中有一个很大的区别就是没有过滤器；3、两者使用组件之间的通讯时也不同。

vue.1和vue.2区别：

区别1：

在vue2中使用v-for指令时它可以添加重复的内容，就像可以添加相同的留言内容，下面我们来看一下

在写代码的时候首先要引入的是vue2js文件。

html代码：

        
        

            
{{item}}
        
    

js代码：

 window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                   arr:[1,2,3,4,5,6]
                },
                methods: {
                    add:function () {
                        this.arr.unshift("1")
                    }
                }
            })
        }

但是，还有一点不同的地方就是没有$index了，在vue1中是有的，但我们可以手动添加$index

        
        

            
{{val}}------->{{index}}
        
    

区别2：

我们在vue2中跟vue1中有一个很大的区别就是没有过滤器！！！我们用着过滤器的时候要要自己定义。

区别3：

再者我们在使用组件之间的通讯时也不同，下面我们来看一下：

html代码：

    我是父组件---->{{emitData.msg}}

    

js代码：

 window.onload = function(){
        new Vue({
            el:"#div",
            data:{
                emitData:{  //写为json 原理：js中对象的引用
                    msg:"我是父组件数据"
                }
            },
            components:{
                'child-com':{
                    props:['m'],
                    template:"#tpl",
                    methods:{
                        change(){
                            this.m.msg='变了';
                        }
                    }
                }
            }
        })
    }

这不是vue2中的方法但是我们可以使用这种方法来解决问题。　

区别4：　

有一个最基本的区别就是我们在定义模板的时应该把模板的东西用一个大盒子包起来。

区别5：　

对于生命周期也是有所不同的，我们vue2中的生命周期是这样的

 window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                    msg:"lalalal"
                },
                beforeCreate () {
                    alert("实例创建之前")
                },
                created() {
                    alert("实例创建完成")
                },
                beforeMount() {
                    alert("数据编译之前")
                },
                mounted() {
                    alert("数据编译完成")
                },
                beforeUpdate:function () {
                    console.log("数据更新之前")
                },
                updated:function () {
                    console.log("数据解析完成")
                },
                beforeDestroy:function () {
                    alert("数据销毁之前")
                },
                destroyed:function () {
                    alert("数据销毁完成")
                }
            })
        }

最后我们来看一下单一事件中管理组件通讯

html:

js代码：

感谢你能够认真阅读完这篇文章，希望小编分享vue.1和vue.2有什么不同内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!