這篇文章主要介紹vue.js2.0和vue.js1.0有哪些區(qū)別,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)按需定制制作,是成都網(wǎng)站推廣公司,為iso認(rèn)證提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程,提供網(wǎng)站定制設(shè)計(jì)服務(wù):原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站營銷推廣熱線:028-86922220
vue.js2.0和vue.js1.0的區(qū)別是:1、vue2.0每個(gè)組件只允許有一個(gè)根元素,vue1.0允許一個(gè)組件有多個(gè)根元素;2、vue2.0移除了$index和$key兩個(gè)隱式聲明變量;3、vue 2.0棄用了prop。
本文操作環(huán)境:windows10系統(tǒng)、vue 2.5.2、thinkpad t480電腦。
區(qū)別分析如下:
1、2.0每個(gè)組件只允許有一個(gè)根元素,1.0允許一個(gè)組件有多個(gè)根元素
2、生命周期鉤子函數(shù)
3、v-for
參數(shù)順序變化
v2 移除了 $index 和 $key 這兩個(gè)隱式聲明變量
key 替換 track-by
v2 中的 :key 在 v1 中使用 track-by 指定,且 track-by 不用 v-bind 綁定,而是直接指定key名,如:
v2 :
范圍變更
props
v1 中可以在 prop 內(nèi)部定義 coerce 方法,用于將 prop 的值傳遞給組件前進(jìn)行一些計(jì)算,組件內(nèi)部得到的 prop 的值是 coerce 方法返回的值。
propG: { coerce: function (val) { return val + '' // cast the value to string } }
v2 使用 computed 替代
twoWay prop
v1 中設(shè)置 prop 的 twoWay 屬性為 true,可以雙向傳遞。
.sync 和 .once
v1 中綁定 prop 時(shí),可以使用 .sync 和 .once 修飾符
.sync 顯示雙向綁定 prop
.once prop 的值一旦被傳遞,父組件對該屬性的變化將不會(huì)再同步到子組件
修改 prop
v1 中可以修改 prop,v2 已經(jīng)棄用了
根實(shí)例的 props
v1 中根實(shí)例可以有 props 屬性,v2 中替代的是 propsData
計(jì)算屬性
v2 中 computed 計(jì)算屬性默認(rèn)會(huì)被緩存,v1 中可以為計(jì)算屬性添加一個(gè) cache 屬性,設(shè)置為 false,則會(huì)關(guān)閉緩存驗(yàn)證。
vue 指令
v-bind
v-bind 指令對于真假值的判斷,v1 遵循 js 的一般規(guī)則,v2 中則只有 null、undefined、false 被看作是假,0 和 '' 則被視為真值。
此規(guī)則只限于 v-bind 指令,v-if 和 v-show 仍遵循 js 的規(guī)則
v-on
v1 中 v-on 指令可以監(jiān)聽原生事件, v2 中只監(jiān)聽自定義事件,如果需要監(jiān)聽原生事件,需要加上 .native 修飾符。
v-model
帶有 debounce 參數(shù)的 v-model
v1 中使用 v-model 指令的表單元素可以帶有 debounce 屬性,用于設(shè)置一個(gè)更新 model 的最小延遲時(shí)間。
這是控制了狀態(tài)更新的頻率,而不是控制高耗時(shí)任務(wù)本身
lazy、number 參數(shù)
v2 中的 .lazy、.number 修飾符,在 v1 中以標(biāo)簽屬性的形式出現(xiàn)
v-model 的初值
v2 中 v-model 的初值就是所綁定的 data 的值,但是在 v1 中,會(huì)用當(dāng)前標(biāo)簽元素的 value 作為初值。
v-bind:style
v1 中的 v-bind:style 可以添加 !important,v2 中必須寫成字符串形式。如下
// v1hello
// v2hello
v-el 和 v-ref
v1 中可以分別使用 v-el 為 DOM 元素、v-ref 為 component 指定一個(gè) name,方便調(diào)用該元素或組件實(shí)例,v2 中棄用了這兩個(gè)指令,統(tǒng)一使用 ref='name' 的方式。
v-show 與 v-else 一起使用
v1 中允許 v-show 與 v-else 一起使用,如下
// v1Foo
Not foo, but bar
// v2Foo
Not foo, but bar
以上是“vue.js2.0和vue.js1.0有哪些區(qū)別”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!