Как создать событие Onload с Vuejs, в частности, как поместить скрипт в метод и как получить вызов в html

Question

export default {

    methods: {
    hotbod() { document.querySelector("body")},

    doStuff() {
      hotbod.className += " animate";
    },


    window:onload = function() {
      doStuff();
    },
      },
    }

Выше приведен код, в котором, я думаю, есть некоторые ошибки - и по какой-то причине я не могу заставить работать javascript (при загрузке страницы загружается CSS).

Answer 1

Если вы хотите вызвать метод при отправке события окна onload, просто используйте соответствующий крюк жизненного цикла Vue , чтобы присоединить прослушиватель событий. Например:

export default {
    create() {
        window.addEventListener("load", this.onWindowLoad);
    },
    methods: {
        onWindowLoad() {
            console.log("window load event");
        },
    },
};

Вместо created вы также можете использовать beforeCreate, beforeMount или mounted. Я не думаю, что в этом случае есть функциональная разница.

Вы также можете отсоединить слушателя при уничтожении компонента (хуки beforeDestroy и destroy), хотя на практике, поскольку он запускается только один раз, это может не иметь значения.

Также обратите внимание, что по причинам области применения, если вы используете функцию анонимного обратного вызова, она должна быть функцией стрелки.