1. 程式人生 > >vue1.0到vue2.0的變化

vue1.0到vue2.0的變化

1. 元件模板不再支援片段程式碼,必須有一個頂級元素包裹,例如:

version1.0:

<template>
  <h3>h3標籤</h3>
  <p>p標籤</p>
</template>

version2.0:

<template>
    <div>
       <h3>h3標籤</h3>
        <p>p標籤</p>
    </div>
</template>
2. 關於元件的定義。

version1.0:

Vue.component(元件名稱,{//vue2.0能用,但不在那麼用了。
	//元件內容
}

version2.0:

var home={
	template:' '  //代替了之前的Vue.extend({})的形式,直接把物件丟擲來,就認為成是元件了。
}
3. 生命週期。

version1.0:
(1)init
(2)created
(3)beforeCompile
(4)compiled
(5)ready
(6)beforeDestroy
(7)destroyed

version2.0:
(1)beforeCreate  元件例項剛剛被建立,屬性都沒有
(2)created

  元件例項建立完畢,屬性已經繫結
(3)beforeMount  模板編譯之前
(4)mounted   模板編譯之後,代替了之前的ready*
(5)beforeUpdate  元件更新之前
(6)updated    元件更新完畢
(7)beforeDestroy  元件銷燬之前
(8)destroyed 元件銷燬後

4. 迴圈。

version1.0:v-for="(index,val) in array"
需要track-by="$index"屬性解決新增重複資料問題。

version2.0:v-for="(val,index) in array"
預設可以新增重複資料,:key="index"

屬性提高迴圈效能,對功能沒有影響,一般情況下用再大型專案中。

5. 自定義鍵盤事件。(以ctrl鍵為例)

version1.0:

Vue.directive("on").keyCodes.ctrl = 17;

version2.0:

Vue.config.keyCodes.ctrl = 17;
6. 過濾器。

version1.0:有很多系統自帶過濾器,如:{{msg|json}}{{msg|currency}}
version2.0:內建過濾器全部刪除,要用的時候需要自己用一些輔助函式解決。

7. 元件通訊。

version1.0:子元件利用sync(eg: :msg.sync="change")可以更改父元件資訊。
version2.0:子級想拿到父級的資料:通過props,且不允許更改父元件資訊。
如何改:
a)父元件每次傳一個物件給子元件,物件引用。
b)只是追求不報錯,可以用mounted的鉤子函式,改變自身資料。

8. 可以單一事件管理元件通訊
var Event = new Vue();
Event.$emit('事件名','資料');
Event.$on('事件名'function(){ ... }.bind(this));
9. 動畫。

transition不再是屬性:transition=“fade”
而是像模板一樣的標籤

<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">這裡放運動的元素,屬性,路由...</transition>
10. 路由.

佈局的改變:
version1.0:

<a v-link="{path:'/home'}">我是主頁</a>

version2.0:

<router-link to="/home">我是主頁</router-link>

路由寫法的改變:

var Home ={      //準備元件
  template:'<h3>我是主頁</h3>'
}
const routes = [   //配置路由
  {path:'/home',component:Home},
  {path:'*',redirect:'/home'}   //重定向
  ...
];
const router = new VueRouter({routes:routes});  //生成路由例項
//簡寫成物件的形式 :const router = new VueRouter({routes});
new Vue({   //最後掛到vue上
	router,
   el:'#box'
});
  1. 路由巢狀
const routes = [   //配置路由
  {path:'/home',component:Home},
  {path:'/news',component:News,
    children:[
      {path:'/newsname',component:newsNameDetail},
      ...
    ]
 },
 {path:'*',redirect:'/home'}   //重定向
   ...
];