Guide: Slik kommer du i gang med Vue

Vue.js er et frontend-rammeverk som bare øker i popularitet. Her får du enkle og gode tips for nybegynnere.

Gaute Meek Olsen i Sopra Steria byr på en komplett, norsk guide til rammeverket Vue.js. 📸: Ole Petter Baugerød Stokke
Gaute Meek Olsen i Sopra Steria byr på en komplett, norsk guide til rammeverket Vue.js. 📸: Ole Petter Baugerød Stokke Vis mer

Når nettsiden inneholder dynamiske data, enten det hentes fra backendtjenester eller er brukergenerert innhold, så kan frontend-rammeverk være til stor hjelp.

Her er Vue et godt alternativ.

«Vue er kjempeenkelt å begynne med.»

Oppsett

Vue er kjempeenkelt å begynne med, alt du trenger er å inkludere en .js-fil i headeren og du er klar til å benytte Vue. Du kan også lage mer sammensatte nettsider som trenger byggsteg, men det kommer vi tilbake til.

I Vue har du et objekt som inneholder data og metoder som kobles mot et html-element.

<!doctype html>
<html lang="en">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
    </div>

    <script>
        const app = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

Dette er alt som trengs for å kunne benytte Vue. Nå har vi et objekt som er koblet til div elementet med id=”app”, på grunn av el: ‘#app’. Inne i div-elementet og javascript-objektet kan vi nå benytte alle Vue sine fordeler.

Declarative Rendering

La oss begynne med å vise noe data. Med dobbel brackets kan vi hente verdier fra javascript-objektet vårt, samt kjøre javascript-kode. Hvis verdier oppdateres i objektet vil vi automatisk se endringene på siden.

<div id="app">
    {{ message }}{{ 20 + 4 }}
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hei, kode'
        }
    })
</script>

Denne koden gir dette resultatet: "Hei, kode24".

Directives

For å kontrollere html-elementene har Vue noe som heter directives, som legges på disse elementene. Noen av de mest brukte er v-model for å skape to-veis binding, v-if for å vise eller skjule innhold og v-for for å iterere gjennom arrays.

<div id="app">
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>

Her vil du se at message-variabelen oppdateres og vises “live” i p-elementet:

.

<div id="app">
    <label>Har du matallergi?</label>
    <input type="checkbox" v-model="allergy" />
    <br />
    <input v-if="allergy" type="text" placeholder="Hva slags allergi?" />
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            allergy: false
        }
    })
</script>

Denne koden viser et input felt kun når allergy er true, som for eksempel gjør at du slipper å vise unødvendige felter i et skjema.

.

<div id="app">
    <ul>
        <li v-for="day in weekdays"> {{ day }} </li>
    </ul>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            weekdays: ['Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag']
        }
    })
</script>

Her vil du se at Vue lager et li-element for hver verdi i arrayet weekdays.

Nå la oss kombinere disse direktivene og legge til v-on:click og metoder på vårt objekt. Legg merke til hvordan vi skriver vanlig html, men hver gang vi legger på v-noe eller {{}} samarbeider vi med vårt Vue-objekt.

<div id="app">
    <h1>Min handleliste</h1>
    <input type="text" v-model="item" />
    <button v-on:click="addItem">Legg til</button>
    <ul>
        <li v-for="shopItem in shopList"> {{ shopItem }} </li>
    </ul>
    <p v-if="shopList.length === 0">Jippi, du trenger ikke handle noe som helst</p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            item: '',
            shopList: []
        },
        methods: {
            addItem: function () {
                this.shopList.push(this.item);
                this.item = '';
            }
        }
    })
</script>

Kun med denne koden har du nå laget din egen handleliste app:

Lifecycle Hooks

Så er det greit å vite at hvert Vue-objekt har sitt eget livsløp med metoder du kan benytte, hvis du trenger å kjøre kode ved et gitt tidspunkt. De mest brukte er created, mounted og destroyed.

    <script>
        const app = new Vue({
            el: '#app',
            created: function () {
                console.log('Objektet er nå lagd.Her vil du typisk hente data fra et API');
            },
            mounted: function () {
                console.log('Objektet er nå koblet til HTML elementet.Du kan nå gjøre DOM endringer');
            },
            destroyed: function () {
                console.log('Objektet er nå fjernet');
            }
        })
    </script>

La oss benytte created for å hente noen filmer, for så å bruke v-bind for å sette javascript-verdier på html-attributter, som vi må for å sette src på et img-element.

<div id="app">
    <div v-for="movie in movies">
        <h4> {{ movie.Title }} </h4>
        <img v-bind:src="movie.Poster" height="50px" />
    </div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: []
        },
        created: async function () {
            const response = await fetch('https://fake-movie-database-api.herokuapp.com/api?s=batman');
            const data = await response.json();
            this.movies = data.Search;
        }
    })
</script>

Som gir dette resultatet:

image: Guide: Slik kommer du i gang med Vue

Vue CLI

Du har nå sett noen eksempler på hva Vue kan gjøre. Så la oss ta en titt på Vue sin CLI (Command Line Interface) for å opprette et Vue-prosjekt.

«Vue har fordelen med at det er et komponentbasert rammeverk.»

Vue har fordelen med at det er et komponentbasert rammeverk. Fram til nå har hele siden vært en komponent. Det finnes flere måter å lage komponenter på, men den anbefalte måten er single file components, som er .vue filer. Da trenger vi et byggsteg for å ende opp med html og javascript til nettleseren, og det er her Vue sin CLI hjelper oss.

Sørg for å ha installert Node. Nå kan du åpne terminalen og skrive inn dette for å installere Vue sin CLI og etterpå opprette et Vue-prosjekt:

npm i -g @vue/cli
vue create my-project

Det er greit å velge default på valgene den gir deg nå. Den har nå opprettet en mappe med en del filer for deg. I src-mappen har du en App.vue fil som er startpunktet for nettsiden din, og i src/components mappen har du en komponent som heter HelloWorld.vue.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld v-bind:msg="message"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  data: function() {
    return {
      message: "Jeg er en single file component"
    };
  },
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Så hva er en single file component? Hvis du ser på en av .vue filene, ser du at den er delt i tre deler. Vi har en template tag for vår html, en script tag for javascript og en style tag for css. Som du ser er det ganske hensiktsmessig å ha alt dette i samme fil, da du enkelt får en oversikt over hva som tilhører denne komponenten. Men hvis du ønsker kan du trekke ut både javascript og css-koden i separate filer. Det er noen små forskjeller i single file components, som at data nå skal være en funksjon på vue-objektet og at vue-objektet skal eksporteres. Men ellers er det likt som tidligere.

For å legge til komponenter i en annen komponent, så må den først importeres:

import HelloWorld from "./components/HelloWorld.vue";

Så må man fortelle objektet hvilke komponenter som er tilgjengelig:

components: { HelloWorld }

Så kan man benytte komponenten i html-koden ved å skrive den som et vanlig html element:

<HelloWorld />

Hvis man ønsker å sende data ned til en komponent, brukes props. Komponenten som skal motta dataen må da inneholde props i sitt objekt:

props: { msg: String }

Feltet props inneholder da alle variablene komponenten ønsker å motta. Disse kan da benyttes i komponenten på akkurat samme måte som resten av dataverdiene. Parent-komponenten sender da dataene ned ved å legge de på html-taggen til komponenten:

<HelloWorld v-bind:msg="message" />

For å kjøre koden på localhost mens du utvikler kan du skrive ‘npm run serve’ i terminalen, så vil du automatisk se endringene når du lagrer filene. For å bygge prosjektet skriver du ‘npm run build’ i terminalen. Da opprettes en dist-mappe som inneholder ferdige html- og javascript-filer.

Få det inn i fingrene

Du har nå fått en kjapp innføring i Vue og fått en oversikt over de mest brukte egenskapene.

Jeg vil anbefale deg å arbeide videre med dette for å få det inn i fingrene, men se også på computed properties, transitions, shorthands, class bindings, slots, vue routing og vuex.