new Vue();

breforeCreate()

observe data && init events

created()

template options and render

beforeMount()

create virtual DOM el and replace ‘el’ with it

mounted()

beforeUpdate() \
virtual DOM rerender and patch \
updated()

actived() \
keep-alive component reactivated \
deactiveted()

beforeDestroy()

teardown watchers, child components, event listenners

destoryed()

Transition && Animations

vue transition link

Classses

  1. v-enter Starting state for enter
  2. v-enter-active Active state for enter
  3. v-enter-to v2.1.8+. Ending state for enter
  4. v-leave Starting state for leave
  5. v-leave-active Active state for leave
  6. v-leave-to v2.1.9+. Ending state for leave

vue transition

JS Hooks

  1. v-on:before-enter
  2. v-on:enter
  3. v-on:after-enter
  4. v-on:enter-cancelled
  5. v-on:before-leave
  6. v-on:leave
  7. v-on:after-leave
  8. v-on:leave-cancelled
1
2
3
4
5
6
7
methods:{
    // @params el {DOM} current <transition/>
    // @params done {Function} optional when used in combination whith CSS
    beforeEnter: function(el, done){

    }
}