快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

    
    
        我是子组件---->         {{m.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：

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


    
3333333
strong

区别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代码：

“vuejs2和1的区别有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


网页名称：vuejs2和1的区别有哪些
URL标题：http://6mz.cn/article/jchedj.html

其他资讯