渲染Vue组件时如何触发事件? [英] How to trigger event when Vue component is rendered?

问题描述

我在谷歌上搜索了很多，但没有找到任何关于此的信息.

我想在 Vue 渲染时淡入我的内容.我的应用程序很大，需要一些时间才能为用户做好准备.但是当 Vue 将内容插入块时，CSS 动画不想工作.请参阅下面在 JSFiddle 上列出的代码.

HTML

<p>Weeverfish 圆白鱼鲈鱼鲢灯塔鱼鲻鱼鲻鲻鲻鲻鲻鲻鱼鲻鱼鲻鱼鲻鱼<小时><例子></例子>

CSS

#my-app {不透明度:0；过渡:2s；}#my-app.visible {不透明度:1；过渡:2s；}

JavaScript

//如果您对此发表评论，动画淡入将起作用...Vue.component('例子', {模板:`<p>繁星比目鱼泥鳅鲶鱼缅甸丹尼奥，三齿河豚无须鳕小鱼鬼鱼新西兰沙潜水员.光滑的角鲨长鼻鲱鱼冶炼金鱼斑马牛头鲨尖嘴鱼牛鲨.</p>`});//... 和这个const app = new Vue({el: '#my-app',//使内容可见，但不提供淡入动画/*创建:函数(){$('#my-app').addClass('visible')}*/});//使内容可见，但不提供淡入动画//启用 Vue$('#my-app').addClass('visible');//如您所见，Vue 动画仅在此处有效setInterval(() => {$('#my-app').toggleClass('visible');}, 5000);

我也没有找到任何内置的 Vue 解决方案(事件、方法等)来在渲染 Vue 时运行代码.像 load & 这样的事件DOMContentLoaded 也无济于事.created 也没有提供预期的结果:

const app = new Vue({el: '#my-app',//使内容可见，但不提供淡入动画创建:函数(){$('#my-app').addClass('visible')}});

有没有人知道解决我的问题的好方法?

谢谢.

解决方案

非常感谢 @David L 和 @Bill Criswell 用于指向 过渡效果.我用这段代码达到了预期的结果:

HTML

<应用程序><p>Weeverfish 圆白鱼鲈鱼鲢灯塔鱼鲻鱼鲻鲻鲻鲻鲻鲻鱼鲻鱼鲻鱼鲻鱼<小时><例子></例子></应用程序>

CSS

.fade-enter-active, .fade-leave-active {过渡:不透明度 1s}.fade-enter, .fade-leave-active {不透明度:0}

JavaScript

Vue.component('app', {数据:函数(){返回 {显示:假}},安装:功能(){this.show = true;},模板:`
<transition name="淡入淡出"><div v-if="show"><插槽></插槽>
</div>`,});Vue.component('例子', {模板:`<p>繁星比目鱼泥鳅鲶鱼缅甸丹尼奥，三齿河豚无须鳕小鱼鬼鱼新西兰沙潜水员.光滑的角鲨长鼻鲱鱼冶炼金鱼斑马牛头鲨尖嘴鱼牛鲨.</p>`});const app = new Vue({el: '#my-app',});

这是带有工作结果的 JSFiddle.

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 user. But CSS animation doesn't want to work when Vue inserts content into block. See listed code below at JSFiddle.

HTML

<div id="my-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>
</div>

CSS

#my-app {
    opacity: 0;
    transition: 2s;
}

#my-app.visible {
    opacity: 1;
    transition: 2s;
}

JavaScript

// Fade in animation will work if you comment this ...
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>`
});

// ... and this 
const app = new Vue({
    el: '#my-app',

    // Makes content visible, but don't provides fade-in animation
    /*
    created: function () {
        $('#my-app').addClass('visible')
    }
    */
});

// Makes content visible, but don't provides fade-in animation
// with enabled Vue
$('#my-app').addClass('visible');

// As you can see, animation with Vue works only here
setInterval(() => {
    $('#my-app').toggleClass('visible');
}, 5000);

Also I didn't found any built-in Vue solutions (event, methods, etc) to run code when Vue is rendered. Events like load & DOMContentLoaded don't help too. created also doesn't provide expected result:

const app = new Vue({
    el: '#my-app',
    // Makes content visible, but don't provides fade-in animation
    created: function () {
        $('#my-app').addClass('visible')
    }
});

Does anyone know good solution for my problem?

Thanks.

解决方案

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.

这篇关于渲染Vue组件时如何触发事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！