這章節講講Vue的生命周期，resource和動畫部分，其中生命周期還是比較重要的。 1.生命周期：這玩意也可叫 鈎子函數，(為什麼叫鈎子，母雞啊)反正他們是每個 Vue 執行個體在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模闆、将執行個體挂載到 DOM 并在資料變化時更新 DOM 等。一共有8個鈎子函數：
- beforeCreate：
在執行個體初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被調用。
- created：
執行個體已經建立完成之後被調用。在這一步，執行個體已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，挂載階段還沒開始，$el 屬性目前不可見。
- beforeMount：
在挂載開始之前被調用：相關的 render 函數首次被調用。
- mounted：
el 被新建立的 vm.$el 替換，并挂載到執行個體上去之後調用該鈎子。如果 root 執行個體挂載了一個文檔内元素，當 mounted 被調用時 vm.$el 也在文檔内。
- beforeUpdate：
資料更新時調用，發生在虛拟 DOM 重新渲染和打更新檔之前。你可以在這個鈎子中進一步地更改狀态，這不會觸發附加的重渲染過程。
- updated：
由于資料更改導緻的虛拟 DOM 重新渲染和打更新檔，在這之後會調用該鈎子。當這個鈎子被調用時，元件 DOM 已經更新，是以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀态，因為這可能會導緻更新無限循環。該鈎子在伺服器端渲染期間不被調用。
- beforeDestroy：
執行個體銷毀之前調用。在這一步，執行個體仍然完全可用。
- destroyed：
Vue 執行個體銷毀後調用。調用後，Vue 執行個體訓示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。該鈎子在伺服器端渲染期間不被調用。下面以created舉個例子：
new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 執行個體 console.log('a is: ' + this.a) }})// => "a is: 1"
以上created中，data和methods就已經可以被調用了
。 2.v-resource：以前我們請求的資料的習慣了用jquery的$.ajax(),但是jquery本質上是操作dom元素的，是以與vue設計思想不得勁，也不可能傻不愣登的叫你用原生的script标簽去引入，是以就誕生了 v-resource，這個是體積較小的插件，可以用NPM去下載下傳，也可以通過src引入，不過要在vue之後。以get的API為例：
this.$http.get('/someUrl', [options]).then(function(response){ // 響應成功回調}, function(response){ // 響應錯誤回調});
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
以上是它提供的7種請求API。 3.動畫：這個可以當做了解，因為在實際的項目當中，功能實作完了也就完事，但動畫卻可以起到畫龍點睛的作用。下面介紹簡單的動畫用法：基本上要用到動畫的标簽都是用 transition來封裝的，如果是用來v-for的話，需要用 transitio n-group的來封裝。
<div id="demo"> <button v-on:click="show = !show"> Toggle button> <transition name="fade"> <p v-if="show">hellop> transition>div>
new Vue({ el: '#demo', data: { show: true }})
.fade-enter-active, .fade-leave-active { transition: opacity .5s;}.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0;}
以上是較為簡單動畫，一般是成雙成對的，淡入淡出，有時候你的動畫隻需要淡入怎麼辦，那麼第二種方案也可以解決。 可以在 attribute 中聲明 JavaScript 鈎子：
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"> transition>
// ...methods: { // -------- // 進入中 // -------- beforeEnter: function (el) { // ... }, // 當與 CSS 結合使用時 // 回調函數 done 是可選的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 離開時 // -------- beforeLeave: function (el) { // ... }, // 當與 CSS 結合使用時 // 回調函數 done 是可選的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 隻用于 v-show 中 leaveCancelled: function (el) { // ... }}
如果你需要在某個時間段執行動畫效果，就在哪個鈎子函數裡面設計相應的動畫。