來源為Vue官方,可以直接去參考~
1.Vue基本構造
Vue大部分都是透過建立Vue的實體來啟動
var vm=new Vue({
//要填寫的屬性選項
});
在建立出Vue實體時,最少需要傳入一個屬性選項,可以有掛載元素,數據,Templete,方法,生命週期建構子等等
Vue也可以擴增選項,只要透過繼承即可,
主要只要記得所有Vue.js組件都是被擴增的Vue實體
var MyComponent=Vue.extend({
//要擴增的屬性選項
})
//所有的'MyComponent' 實體都將以預先定義的擴增屬性被創建
var myComponentInstance=new MyComponent()
2.屬性與方法
Vue都可以代理,現在建立的data裡面的屬性,也就是一旦我改我建立的vm裡面的值,也會同步更新到data上
var data = { a : 1 }
var vm = new Vue({
data : data
})
vm.a=2;
data.a 也會等於 2
----------------------------
除了data屬性以外
前綴$,也可以得到這裡面所代有的含意,一些方法
var data = { a : 1 }
var vm = new Vue({
el : '#example' ,
data : data
})
vm.$data === data // -> true
vm.$el === document .getElementById( 'example' ) // -> true
//這是實體方法的監聽
vm.$watch( 'a' , function ( newVal, oldVal ) {
//一旦vm.a改變時候就會有所變化
})
3.實體生命週期
詳細圖示可至官網看看,這邊可以針對Vue的生命週期每一階段做事情
var vm = new Vue({
data : {
a : 1
},
created : function () {
//'this' 是指向Vue的實體
console .log( 'a is: ' + this .a)
}
})
// -> "a is: 1"
vue 1.0+ | vue 2.0 | Description |
init | beforeCreate | Vue組件實體剛被建立時候,再進行組件屬性計算前,如data屬性等 |
created | created | Vue組件實體已經完成,屬性綁定,Dom還未產生前,也就是$el還不存在的時候 |
beforeCompile | beformMount | 模版編譯/加入之前 |
compiled | mounted | 模版編譯/加入之後 |
ready | mounted | 模版編譯/加入之後(不保證已經在document中) |
- | beforeUpdate | 組件更新之前 |
- | updated | 組件更新之後 |
- | activated | for keep-alive,組件被激活時使用 |
- | deactivated | for keep-alive ,組件被移除時使用 |
attached | - | |
detached | - | |
beforeDestory | beforeDestory | 組件銷毀前使用 |
destoryed | destoryed | 組件銷毀後使用 |
以下圖由官網複製過來
以上有些從官網弄過來的也自己加了一些自己的話