Vue - pisanie zwykłego kodu javascript

Question

Witam

Tworzę aplikację w Vue i mam pytanie, czy można tak dodać pliki z czystym js?, chcę stworzyć kod który otwiera i zamyka menu ale nie jestem pewny czy można w vue robić takie rzeczy.

W komponencie Header.vue mam taki kod

<template>
    <header>
        <section>
            <nav>
                <div class="menu-flex">
                    <div>
                        <font-awesome-icon icon="bars" id="open-menu" />
                        <h1><a href="#">Nazwa</a></h1>
                    </div>
                    <div>

                    </div>
                </div>

                <div class="menu-left" id="menu-box">
                    a
                </div>
            </nav>
        </section>
    </header>
</template>

<script>
    import '@/library/menu' //chodzi to ten zapis, czy można tak dołączać pliki z czystym js?

    export default {
        name: "Header"
    }
</script>

<style scoped lang="scss">
    @import '../style/scss/variables';

    .menu-flex {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: $color-primary-500;
        width: 100%;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
            &:first-child {
                display: flex;
                align-items: center;

                .fa-bars {
                    color: $color-white;
                    font-size: 18px;
                    margin-right: 20px;
                    cursor: pointer;
                }

                h1 {
                    margin: 0;
                    font-size: 22px;

                    a {
                        color: $color-white;
                        text-decoration: none;
                    }
                }
            }
        }
    }

    .menu-left {
        position: fixed;
        visibility: hidden;
        left: -100%;
        top: 0;
        height: 100%;
        width: 300px;
        z-index: 998;
        padding-top: 80px;
        background-color: $color-white;

        &.show {
            visibility: visible;
            left: 0;
        }
    }
</style>

a w library/menu.js (na razie testowy tylko)

window.onload = function() {
    let openMenuBtn = document.getElementById("open-menu");
    openMenuBtn.addEventListener("click", openMenu, false);
};

function openMenu() {
alert('s');
}

 

Answer 1

Import w Vue służy do importowania innych komponentów a więc plików .vue. Jeżeli chcesz dołączyć czysty js, to po stworzeniu komponentu możesz dokleić <script> do DOM. Przykładowo, w jednym z moich projektów dynamicznie dodaje skrypt od googla z czystym js z poziomu Vue. Użyłem tutaj wbudowanej metody mounted(), która odpala się kiedy komponent został stworzony i doklejono jego template do DOM.

mounted(){
            let map = document.getElementById('google');
            
            let googleScript = document.createElement('script');
            googleScript.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyC9dNDQ-tSlMK6DCwXuEWJAnG14Tn68k3I&callback=initMap');
            map.appendChild(googleScript);
        
            let mapScript = document.createElement('script');
            mapScript.setAttribute('src' , window.scriptPath+ '/createMap.js');
            map.appendChild(mapScript);
        }

Tutaj możesz poczytać o cyklu życia komponentu i o tym jakie jego metody są wywoływane w danej sytuacji.

Comments

kiedyś napisałem sobie gotowy kod po ripple effect i mam go zapisanego w ripple.js jak mogę go dołączyć do projektu?

Answer 2

Nie lepiej po prostu dodać do przycisku @click="openMenu()".