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

网站建设知识

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

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

vuejs1.0与2.0的区别有哪些

这篇文章将为大家详细讲解有关vuejs1.0与2.0的区别有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

公司主营业务:做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出依安免费做网站回馈大家。

区别:1、VUE2.0中必须用根元素包裹住所有的代码,VUE1.0中不用。2、组件定义方式不同。3、生命周期函数不同。4、vue2.0将vue1.0中所有自带的过滤器都删除了,vue2.0要使用过滤器需要自定义,而vue1.0不用。

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

一、在每个组件模板,不在支持片段代码

VUE1.0是: 

VUE2.0:必须有根元素,包裹住所有的代码


  
    

我是组件

      我是加粗标签    

二、组件定义方式不同

VUE1.0定义组件的方式有:

Vue.extend            这种方式,在2.0里面有,但是有一些改动

Vue.component(组件名称,{  在2.0继续能用
  data(){}
  methods:{}
  template:
});

VUE2.0定义组件的方式则更为简单

var Home={
    template:''    ->  相当于Vue.extend()
};

三、生命周期的变化

1、1.0的生命周期:
周期解释
init组件刚刚被创建,但Data、method等属性还没被计算出来
created组件创建已经完成,但DOM还没被生成出来
beforeCompile模板编译之前
compiled模板编译之后
ready组件准备(平时用得较多)
attached在 vm.$el 插入到DOM时调用
detached在 vm.$el 从 DOM 中删除时调用
beforeDestory组件销毁之前
destoryed组件销毁之后

下图是官方关于1.0生命周期的流程图:

vuejs1.0与2.0的区别有哪些

2、2.0的生命周期
周期解释
beforeCreate组件刚刚被创建,但Data、method等属性还没被计算出来
created组件创建已经完成,但DOM还没被生成出来
beforeMount模板编译之前
mounted模板编译之后,组件准备
beforeUpdate组件更新之前(数据等变动的时候)
updated组件更新之后(数据等变动的时候)
activatedfor keep-alive,组件被激活时调用
deactivatedfor keep-alive,组件被移除时调用
beforeDestory组件销毁之前
destoryed组件销毁之后

下图是官方关于2.0生命周期的流程图:
vuejs1.0与2.0的区别有哪些

借用一位大神的图来总结他们的变化:
vuejs1.0与2.0的区别有哪些

2.0生命生命周期变化感觉变得更加语义化一点(有规律可寻,更好记了),而且增加了beforeUpdate、updated、activated、deactivated,删除了attached、detached。

四、过滤器

2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我们自己编写,以下是一个自定义过滤器示例,

Vue.filter('toDou',function(n,a,b){
    return n<10?n+a+b:''+n;
});

如果想展示JSON数据,不需要调用过滤器了,框架会自动帮我们解析出来;
2.0过滤器的传参方式不是以前的方式,是以函数传参的方式,下面示例:

之前调用:       {{msg | mimi '12' '5'}}
现在调用:   {{msg | mimi('12','5')}}

五、循环

刚学vue1.0的人可能会碰到一个错误信息:

vuejs1.0与2.0的区别有哪些

这里提示我们要使用tranck-by=”$index”,这个属性也可以帮我们提高for循环的性能,而在2.0,使用重复数据将不会报错,同时也去掉了一些隐式变量如:index、key,那我们如果要用到这些数据则可以通过ES6的语法来获取

v-for="(val,index) in array"

关于整数循环,1.0的整数循环是从0开始的,2.0的整数循环是从1开始的,下面对比:

//HTML代码

    

运行结果:
vuejs1.0与2.0的区别有哪些

vuejs1.0与2.0的区别有哪些

四、片段代码

编写template的时候,2.0必须要用一个根元素(如p)将代码片段包裹起来,否则报错。

之前:   在1.0使用时完全没问题
    
现在:  必须有根元素,包裹住所有的代码
    
            
                

我是组件

                我是加粗标签             
    

关于“vuejs1.0与2.0的区别有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站题目:vuejs1.0与2.0的区别有哪些
本文URL:http://6mz.cn/article/pcogos.html

其他资讯