到了2.0以后,有哪些變化?
-
在每個(gè)組件模板,不在支持片段代碼
組件中模板:
之前: <template> <h3>我是組件</h3><strong>我是加粗標(biāo)簽</strong> </template>現(xiàn)在: 必須有根元素,包裹住所有的代碼
<template id="aaa"> <div> <h3>我是組件</h3> <strong>我是加粗標(biāo)簽</strong> </div> </template> -
關(guān)于組件定義
Vue.extend 這種方式,在2.0里面有,但是有一些改動,這種寫法,即使能用,咱也不用——廢棄
Vue.component(組件名稱,{ 在2.0繼續(xù)能用
data(){}
methods:{}
template:
});
2.0推出一個(gè)組件,簡潔定義方式:
var Home={
template:'' -> Vue.extend()
};
-
生命周期
之前: 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 組件銷毀后 循環(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"
- track-by="id"
變成
<li v-for="(val,index) in list" :key="index">
-
自定義鍵盤指令
之前:Vue.directive('on').keyCodes.f1=17;
現(xiàn)在: Vue.config.keyCodes.ctrl=17
-
過濾器
之前:
系統(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));