vuejs2和1的区别有哪些

本篇内容介绍了“vuejs2和1的区别有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联公司是一家专注网站建设、网络营销策划、小程序制作、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十多年以来，已经为上千家成都资质代办各业的企业公司提供互联网服务。现在，服务的上千家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

区别：1、vue2中使用v-for指令时可以添加重复的内容，vue1不行；2、vue2有过滤器，vue1没有；3、组件间通讯方式不同；4、生命周期不同等等。

vuejs2和1的区别有哪些

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

区别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}}

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

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("数据销毁完成") } }) }

重庆分公司，新征程启航

vuejs2和1的区别有哪些

3333333

其他资讯