这章节讲讲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) { // ... }}
如果你需要在某个时间段执行动画效果，就在哪个钩子函数里面设计相应的动画。