阿倫的學習天地

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	組件銷毀後使用

 

以下圖由官網複製過來

以上有些從官網弄過來的也自己加了一些自己的話

---