10版本與20版本的區(qū)別

到了2.0以后,有哪些變化?

  1. 在每個(gè)組件模板,不在支持片段代碼

    組件中模板:

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

    現(xiàn)在: 必須有根元素,包裹住所有的代碼

          <template id="aaa">
    
              <div>
    
                  <h3>我是組件</h3>
    
                  <strong>我是加粗標(biāo)簽</strong>
    
              </div>
    
           </template>
    
  2. 關(guān)于組件定義

    Vue.extend 這種方式,在2.0里面有,但是有一些改動,這種寫法,即使能用,咱也不用——廢棄

 Vue.component(組件名稱,{ 在2.0繼續(xù)能用

             data(){}

             methods:{}

             template:

 });

2.0推出一個(gè)組件,簡潔定義方式:

 var Home={

         template:'' -> Vue.extend()

 };
  1. 生命周期

      之前:
    
          init
    
          created
    
          beforeCompile
    
          compiled
    
          ready √ -> mounted
    
          beforeDestroy
    
          destroyed
    
      現(xiàn)在:
    
          beforeCreate 組件實(shí)例剛剛被創(chuàng)建,屬性都沒有
    
          created 實(shí)例已經(jīng)創(chuàng)建完成,屬性已經(jīng)綁定
    
          beforeMount 模板編譯之前
    
          mounted 模板編譯之后,代替之前ready *
    
          beforeUpdate 組件更新之前
    
          updated 組件更新完畢 *
    
          beforeDestroy 組件銷毀前
    
          destroyed 組件銷毀后
    
  2. 循環(huán)

2.0里面默認(rèn)就可以添加重復(fù)數(shù)據(jù)

     arr.forEach(function(item,index){

     });

 去掉了隱式一些變量

     $index $key

 之前:

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

 現(xiàn)在:

     v-for="(val,index) in array"
  1. track-by="id"

變成

 <li v-for="(val,index) in list" :key="index">
  1. 自定義鍵盤指令

    之前:Vue.directive('on').keyCodes.f1=17;

    現(xiàn)在: Vue.config.keyCodes.ctrl=17

  1. 過濾器

    之前:

      系統(tǒng)就自帶很多過濾
    
          {{msg | currency}}
          {{msg | json}}
          ....
          limitBy
          filterBy
          .....
      一些簡單功能,自己通過js實(shí)現(xiàn)
    
      到了2.0, 內(nèi)置過濾器,全部刪除了
    

自定義過濾器——還有

但是,自定義過濾器傳參

  之前: {{msg | toDou '12' '5'}}

  現(xiàn)在: {{msg | toDou('12','5')}}

組件通信:

 vm.$emit()

 vm.$on();

     父組件和子組件:

     子組件想要拿到父組件數(shù)據(jù):

     通過 props

 之前,子組件可以更改父組件信息,可以是同步 sync

 現(xiàn)在,不允許直接給父級的數(shù)據(jù),做賦值操作

問題,就想更改:

 a). 父組件每次傳一個(gè)對象給子組件, 對象之間引用 √

 b). 只是不報(bào)錯(cuò), mounted中轉(zhuǎn)

可以單一事件管理組件通信: vuex

 var Event=new Vue();

 Event.$emit(事件名稱, 數(shù)據(jù))

 Event.$on(事件名稱,function(data){

     //data

 }.bind(this));
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容