vue 1.0和vue 2.0的變化和區(qū)別

一.在每個(gè)組件模板新啼，不在支持片段代碼

vue 1.0是

<template>
  <h3>我是組件</h3><strong>我是加粗標(biāo)簽</strong>
</template>

vue 2.0是:必須有根元素,包裹住所有的代碼

<template id="aaa">
  <div>
    <h3>我是組件</h3>
      <strong>我是加粗標(biāo)簽</strong>
   </div>
</template

二.關(guān)于組件定義

VUE1.0定義組件的方式有:

Vue.extend            這種方式磕蒲，在2.0里面有玩敏，但是有一些改動(dòng)

Vue.component(組件名稱,{    在2.0繼續(xù)能用
    data(){}
    methods:{}
    template:
});

VUE2.0定義組件的方式則更為簡(jiǎn)單:

var Home={
        template:''        ->   相當(dāng)于Vue.extend()
};

對(duì)比局部注冊(cè)：
vue 1.0

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
  template: '...',
  components: {
    // <my-component> will only be available in Parent's template
    'my-component': Child
  }
})

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 將只在父模板可用
    'my-component': Child
  }
})

三.生命周期的變化

vue1.0的生命周期為

init                     ->初始化
created                  ->創(chuàng)建
beforeCompile            ->編譯之前
compiled                 ->編譯完成
ready        √           -> mounted
beforeDestroy            ->銷毀之前
destroyed                ->已經(jīng)銷毀

vue2.0的生命周期為(標(biāo)*的為經(jīng)常用的)

beforeCreate    組件實(shí)例剛剛被創(chuàng)建,屬性都沒(méi)有
created         實(shí)例已經(jīng)創(chuàng)建完成霹娄，屬性已經(jīng)綁定
beforeMount     模板編譯之前
mounted         模板編譯之后，代替之前ready  *
beforeUpdate    組件更新之前
updated         組件更新完畢    *
beforeDestroy   組件銷毀前
destroyed       組件銷毀后

四.循環(huán)

學(xué)過(guò)vue的同學(xué)應(yīng)該知道vue1.0是不能添加重復(fù)數(shù)據(jù)的,否則它會(huì)報(bào)錯(cuò),想讓它重復(fù)添加也不是不可以,不過(guò)需要定義別的東西拣宏。
而vue2.0默認(rèn)就支持添加重復(fù)數(shù)據(jù),而且vue2.0還去掉了$index和$key這兩個(gè)東西換成在循環(huán)里定義
Vue 1.0

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

v-for="(val,index) in array"　　這是vue2.0

五. 給元素附唯一值

vue 1.0 trace-by的方式

<div v-for="item in items" track-by="$index">

vue 2.0 key的方式

<div v-for="item in items" :key="item.id">

六.自定義鍵盤指令

vue1.0    Vue.directive('on').keyCodes.f1=17
vue2.0    Vue.config.keyCodes.ctrl=17

vue2 自定義指令的使用

七.過(guò)濾器

vue 1.0 自帶過(guò)濾器

        {{msg | currency}}
        {{msg | json}}
        ....
        limitBy
        filterBy
        .....

vue 2.0 刪除
定義過(guò)濾器的步驟
1.定義過(guò)濾器函數(shù)

2.在filters中聲明

3.使用

1.0與2.0 過(guò)濾器傳參方式不同
vue 1.0

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>