hide show vue 动画_Vue之生命周期，resource，动画

这章节讲讲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) {    // ...  }}

如果你需要在某个时间段执行动画效果，就在哪个钩子函数里面设计相应的动画。