Vue组件渲染时如何触发事件？答案

【问题标题】：How to trigger event when Vue component is rendered?Vue组件渲染时如何触发事件？
【发布时间】：2023-07-05 15:03:02
【问题描述】：

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

我想在 Vue 渲染内容时淡入我的内容。我的应用程序很大，需要一些时间才能为用户做好准备。但是当 Vue 将内容插入到块中时，CSS 动画不想工作。请参阅下面列出的代码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);

我也没有找到任何内置的 Vue 解决方案（事件、方法等）来在渲染 Vue 时运行代码。 load 和 DOMContentLoaded 之类的事件也无济于事。 created 也没有提供预期的结果：

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

有谁知道我的问题有好的解决方案吗？

谢谢。

【问题讨论】：

您使用的是哪个版本的 Vue？过渡可以在 VueJS 2 中以编程方式处理，您可能希望使用 mounted 钩子而不是 created 钩子，因为届时它将应用于 DOM。
@DavidL，似乎将created 更改为mounted 并没有帮助。我正在使用最新版本的 Vue。好的，谢谢，我现在尝试使用过渡。
如果可能的话，我绝对推荐 vue 过渡而不是外部解决方案。
我会礼貌地建议阅读手册：vuejs.org/v2/guide/transitions.html

标签： javascript vue.js vue-component

【解决方案1】：

非常感谢@David L 和@Bill Criswell 指向Transition Effects。我已经用这段代码达到了预期的效果：

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',
});

这是JSFiddle 的工作结果。

【讨论】：