Vue新手學習初步(三)_Vue構造認識

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

 

以下圖由官網複製過來

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