How To Trigger Event When Vue Component Is Rendered?

I've googled a lot, but didn't found anything about this. I want to fade in my content when it's rendered by Vue. My application is large and it takes some time to be ready for us

Solution 1:

Much thanks to @David L and @Bill Criswell for pointing to Transition Effects. I've achieved expected result with this code:

HTML

<div id="my-app">
    <app>
        <p>Weeverfish round whitefish bass tarpon lighthousefish mullet tigerperch bangus knifefish coley Black sea bass tompot blenny madtom tapetail yellow-eye mullet..</p>

        <hr>

        <example></example>
    </app>
</div>

CSS

.fade-enter-active, .fade-leave-active {
    transition: opacity 1s
}

.fade-enter, .fade-leave-active {
   opacity: 0
}

JavaScript

Vue.component('app', {
    data: function () {
        return {
            show: false
        }
    },
    mounted: function() {
        this.show = true;
    },
    template: `<div>
        <transition name="fade">
            <div v-if="show">
                <slot></slot>
            </div>
        </transition>
    </div>`,
});

Vue.component('example', {
    template: `<p>Starry flounder loach catfish burma danio, three-toothed puffer hake skilfish spookfish New Zealand sand diver. Smooth dogfish longnose dace herring smelt goldfish zebra bullhead shark pipefish cow shark.</p>`
});

const app = new Vue({
    el: '#my-app',
});

Here is JSFiddle with working result.