vue2.0變化
在每個組件模板,不在支持片段代碼
之前:
<template>
<h3>我是組件</h3><strong>我是加粗標簽</strong>
</template>
現(xiàn)在: 必須有根元素,包裹住所有的代碼
<template id="aaa">
<div>
<h3>我是組件</h3>
<strong>我是加粗標簽</strong>
</div>
</template>
關(guān)于組件定義
Vue.extend 這種方式,在2.0里面有,但是有一些改動,這種寫法,即使能用,咱也不用——廢棄
Vue.component(組件名稱,{ 在2.0繼續(xù)能用
data(){}
methods:{}
template:
});
2.0推出一個組件,簡潔定義方式:
var Home={
template:'' 相當于-> Vue.extend()
};
生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
現(xiàn)在:
beforeCreate 組件實例剛剛被創(chuàng)建,屬性都沒有
created 實例已經(jīng)創(chuàng)建完成,屬性已經(jīng)綁定
beforeMount 模板編譯之前
mounted 模板編譯之后,代替之前ready *
beforeUpdate 組件更新之前
updated 組件更新完畢 *
beforeDestroy 組件銷毀前
destroyed 組件銷毀后
循環(huán)
2.0里面默認就可以添加重復數(shù)據(jù)
arr.forEach(function(item,index){
});
去掉了隱式一些變量
$index $key
之前:
v-for="(index,val) in array track-by="$index""
現(xiàn)在:
v-for="(val,index) in array :key="index""提升性能
自定義鍵盤指令
之前:Vue.directive('on').keyCodes.f1=17;
現(xiàn)在: Vue.config.keyCodes.ctrl=17
過濾器
刪除內(nèi)置過濾器,自己實現(xiàn)
debounce 廢棄,用lodash 工具庫_.debouch(fn,2000)
自定義過濾器——還有
但是,自定義過濾器傳參
之前: {{msg | toDou '12' '5'}}
現(xiàn)在: {{msg | toDou('12','5')}}
組件通信:
vm.$emit()和vm.$on();
父組件和子組件:
- 子組件想要拿到父組件數(shù)據(jù):通過props
- 父組件想要拿到子組件數(shù)據(jù):
之前子組件可以更改父組件信息,可以是同步設(shè)置 :msg.sync='a'
-
不允許直接給父級的數(shù)據(jù),做賦值操作
a). 父組件每次傳一個對象給子組件, 對象之間引用 :msg='giveData' 然后接受過來得到giveData對象
然后在子組件里直接該msg的屬性就可以了
b). 只是不報錯, mounted中轉(zhuǎn)
單一事件管理組件通信
var Event=new Vue();
某個組件的方法里實現(xiàn):Event.$emit(事件名稱, 數(shù)據(jù))
另一個組件里Event.$on(事件名稱,function(data){
//data
}.bind(this));或者備份this