SOURCE

Vue.config.perfomance = true
Vue.config.productionTip = true
Vue.config.devtools = true

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement(
            'h' + this.level,
            this.$slots.default
        )
    },
    props: {
        level: Number
    }
})

var mixin = {
    methods: {
        foo() {
            console.log('foo')
        },
        bar() {
            console.log('bar')
        }
    }
}

new Vue({
    el: '#app',
    mixins: [mixin],
    data () {
        return {
            message: 'hello',
            show: false,
            show1: false,
            show2: false
        }
    },
    created() {
        this.foo()
        this.bar()
    }
})

Vue.config.optionMergeStrategies.myOption = function(toVal, fromVal) {
    console.log(toVal)
    console.log(fromVal)
}

console.log(Vue.config)

<div id="app">
	<button @click="show = !show">点我</button>
    <transition name="fade">
        <p v-show="show">你能看见我么</p>
    </transition>

    <button @click="show1 = !show1">第二种特效</button>
    <transition name="scale">
        <p v-if="show1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>

    <button @click="show2 = !show2">第三种特效</button>
    <transition enter-active-class="animated tada" leave-active-class=" animated bounceOutRight">
        <p v-if="show2">我是第三种特效</p>
    </transition>

    <anchored-heading :level="1">
        <a href="##">who am i?</a>
    </anchored-heading>

    <anchored-heading :level="2">
        <a href="##">who am i?</a>
    </anchored-heading>

    <anchored-heading :level="3">
        <a href="##">who am i?</a>
    </anchored-heading>
</div>

.fade-enter-active,
.fade-leave-active {
    transition: all 1s ease-in-out;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translateX(10px);
}

.scale-enter-active {
    animation: bounce-in .5s;
}
.scale-leave-active {
    animation: bounce-in .5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}