vue1.0到vue2.0的變化
阿新 • • 發佈:2018-12-19
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'
});
- 路由巢狀
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'/news',component:News,
children:[
{path:'/newsname',component:newsNameDetail},
...
]
},
{path:'*',redirect:'/home'} //重定向
...
];