vue1和vue2的区别是什么?

vue1和vue2的区别

模板

v2 每个组件只允许有一个根元素,v1 允许一个组件有多个根元素

生命周期函数

vue1.0

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

vue2.0

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

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

过滤器

vue1.0

  • 自带过滤器。

  • 定义方式:vue.filter('过滤器名字',fn)

  • 调用方式:{{msg | filterName'12' '5'}}

vue2.0

  • 2.0移除了自带过滤器,但是保留了自定义过滤器的功能。

  • 定义方式:vue.filter('过滤器名字',fn)

  • 调用方式:{{msg | filterName('12','5')}}

以下是一个自定义过滤器示例:

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

循环

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

//HTML代码
<ul id='box'>
    <li v-for='val in 5' v-text='val'>
    </li>
</ul>

props

coerce prop

v1 中可以在 prop 内部定义 coerce 方法,用于将 prop 的值传递给组件前进行一些计算,组件内部得到的 prop 的值是 coerce 方法返回的值。

propG: {
  coerce: function (val) {
    return val + '' // cast the value to string
  }
}

v2 使用 computed 替代

修改 prop

v1 中可以修改 prop,v2 已经弃用了

根实例的 props

v1 中根实例可以有 props 属性,v2 中替代的是 propsData

计算属性

v2 中 computed 计算属性默认会被缓存,v1 中可以为计算属性添加一个 cache 属性,设置为 false,则会关闭缓存验证。

vue 指令

v-bind

v-bind 指令对于真假值的判断,v1 遵循 js 的一般规则,v2 中则只有 null、undefined、false 被看作是假,0 和 '' 则被视为真值。

此规则只限于 v-bind 指令,v-if 和 v-show 仍遵循 js 的规则

v-on

v1 中 v-on 指令可以监听原生事件, v2 中只监听自定义事件,如果需要监听原生事件,需要加上 .native 修饰符。

v-model

  • lazy、number 参数

v2 中的 .lazy、.number 修饰符,在 v1 中以标签属性的形式出现

<input v-model="name" lazy>
<input v-model="age" type="number" number>
  • v-model 的初值

v2 中 v-model 的初值就是所绑定的 data 的值,但是在 v1 中,会用当前标签元素的 value 作为初值。

v-bind:style

v1 中的 v-bind:style 可以添加 !important,v2 中必须写成字符串形式。如下

// v1
<p v-bind:style="{ color: myColor + ' !important' }">hello</p>
// v2
<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

v-el 和 v-ref

v1 中可以分别使用 v-el 为 DOM 元素、v-ref 为 component 指定一个 name,方便调用该元素或组件实例,v2 中弃用了这两个指令,统一使用 ref='name' 的方式。

v-show 与 v-else 一起使用

v1 中允许 v-show 与 v-else 一起使用,如下

// v1
<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>
// v2
<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>
Image placeholder
前端答疑
未设置
  53人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

bootstrap和vue的区别是什么?

Bootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,使得Web开发更加快捷

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue与jquery的区别是什么?

vue与jquery的区别是什么?vue和jquey的对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DO

vue和react的区别是什么?

vue和react的区别1、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导

js和jquery的区别是什么?

JavaScript和jQuery的区别:一、本质上的区别:js是网页脚本语言,而jQuery是基于js语言封装出来的一个前端框架。也就是说js是一种语言,而jQuery是基于该语言的一种框架。二、用

jquery不同版本的区别是什么?

目前jQuery有三个大版本:版本描述1.x兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.42.x不兼容ie678,很

jQuery中this和$(this)的区别是什么?

jQuery中this和$(this)的区别是什么?●$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;●this中存放的是DOM元素,属于jav

jQuery on()和click()的区别是什么?

jQueryon()和click()的区别是什么?●click()属于静态加载,当页面加载完,就不再为新增加的元素添加点击事件。●on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必

jquery和js的区别是什么?

jquery和js的区别是什么?一、首先来看一下jQuery和js的概念jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。js是一种脚本语言,常用于网页客户端

jquery text() val() html()之间的区别是什么?

jquerytext()val()html()之间的区别是什么?●text()获取元素内的文本,相当于js中的innerText●val()获取表单元素的值,相当于js中的input.value●ht

jquery ===和==的区别是什么?

jquery===和==的区别简单来说,===与==的区别是,===比较刻薄,==相对来说比===温柔一些。==,两边值类型相同时,等同于===;不同的时候,要先进行类型转换,再比较。而===,不做类

ajax与jquery的区别是什么?

jQuery是javascript的一个框架,也就是有人做好了很多功能,你直接拿来用就好了。比如实现Ajax。纯javascript,你可能需要些好多函数,来新建对象,捕捉事件,处理异常等。但用jQu

jquery中on()和click()的区别是什么?

on()和click()的区别:click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元素。二者在

jquery中bind与on的区别是什么?

jquery中bind与on的区别bind和on都是事件绑定,都是给元素绑定事件用的,但是两者却又有着一个大区别:事件冒泡(事件代理)。事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去

jquery this与$(this)的区别是什么?

$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;而this中存放的是DOM元素,属于javascirpt中的DOM元素对象,要使用DOM元素对象

jquery中children()和find()的区别是什么?

jquery中children()和find()的区别children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行

jquery和zepto的区别是什么?

jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了Web2.0应用程序

jquery中size()与length的区别是什么?

jQuerylength和size()区别length是属性,size()是方法。如果你只是想获取元素的个数,两者效果一样既("img").length和("img").size()获取的值是一样的。

react和jquery的区别是什么?

首先我们要注意的是,虽然我们这里把React和JQuery拿到一个台面上来说,但是这两者是有本质区别的。React是一个UI库,但是JQuery更多的知识一个工具库或者说是插件库,我们之所以把这两者谈

jquery easyui和layui的区别是什么?

jqueryeasyuijQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

jquery和ajax的区别是什么?

jquery和ajax的区别Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。jQuery是一个库,它对JS进行了封装,使其更方便使用。jQ

jquery easyui和bootstrap的区别是什么?

JQueryEasyUIJQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复