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
<divid="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 = newVue({
el: '#my-app',
});
Here is JSFiddle with working result.
Post a Comment for "How To Trigger Event When Vue Component Is Rendered?"