Michael Gustavsson

Introduktion till Vue.js

Michael Gustavsson -

Vad, Varför, Hur?

Jag ska i den här artikeln försöka svara på vad Vue.js är för något och varför skulle vi vilja använda det. Samt hur vi kommer igång med Vue.js.

Vad är Vue?

Vue är ett JavaScript bibliotek. Egentligen är det ett block av JavaScript kod som körs innan vår egen kod körs och som ger vår kod ett sammanhang.

Ett annat sätt att uttrycka det på är att Vue är en renderingsmotor som tar data (modell) och komponenenter och producerar HTML.

Vue är även ett verktyg som låter oss bryta ner en större applikation i mindre hanterbara delar(komponenter).

Vue innehåller många små inbyggda komponenter som vi kan använda genom att komponera dem tillsammans till en hierarki av komponenter. Varje komponent i Vue har ett specifikt syfte vilket gör dem väldigt lätta att använda och kombinera ihop.

Vue är även reaktivt, vilket betyder att Vue automatiskt kan uppdatera presentationen(vyn) och/eller data modellen om någon ändring sker. Med andra ord själva magin i Vue😁.

Vue är även ett litet JavaScript bibliotek, vilket ger oss väldigt snabb uppstart och rendering av vyer.

Vue har även stöd för direktiv såsom if, for och databindning som är bekanta om man har arbetat med andra ramverk som t ex Angular.

Vad är en komponent?

En komponent är en paketering av lite JavaScript och lite HTML som kan återanvändas i olika delar av en applikation.

Vad är Vue's filändelse .vue för något?

Vue har en egen speciell filändelse för sina filer, .vue. Dessa går inte att öppna i en webbläsare utan måste genomgå en bygg fas. Kan upplevas som en nackdel att behöva utnyttja ett extra verktyg för att kunna köra Vue i en webbläsare.

Anledningen till detta är att en Vue fil är en kombination av HTML och CSS för presentation samt JavaScript för logiken. Vilket i sin tur betyder att vi kan i varje fil ha en självförsörjande komponent.

En grundläggande Vue komponent

Som vi kan se här så består en Vue komponent av åtminstone 3 delar. Ett template block , ett script block och ett style block.

<template> blocket är där vi beskriver utseendet på vår komponent, vilka html element som skall användas för visualiseringen. Dessutom placerar vi data-bindnings kommandon och direktiv här.

<script> blocket är där vi skapar vår data modell med egenskaper och metoder som vi sedan kan knyta till html element i template blocket.

<style> blocket använder vi för att skapa komponentens stil mall. Genom att ange scoped i style blocket indikerar vi att stilen endast skall gälla för den här komponentent. Tar vi bort scoped skapar vi en global stil som kan appliceras på alla komponenter i applikationen.

Var inte oroliga om ni inte förstår alla delar ännu. Vi kommer att gå igenom alla delar så att allt blir klart.

För & nackdelar

Fördelar med Vue.js

  • Vi kan komma igång väldigt fort och skapa prototyper snabbt och enkelt. Vi kan med andra ord gå ifrån idé till handling väldigt kvickt.
  • Vi kan fokusera vår logik i ett antal färre filer än utan Vue.js.
  • Det är enkelt att inkludera andra typer av komponenter i Vue.js, t ex JQuery komponenter.
  • Vue.js har en snällare inlärningskurva än motsvarande konkurrenter, som t ex Angular och React.

Nackdelar med Vue.js

  • På grund av att Vue.js ger oss en så stor flexibilitet och valfrihet i hur vi kan skapa våra applikationer. Kan det bli svårt i en större utvecklingsgrupp och i ett större företag att skapa och hantera en kodbas för ett projekt.
  • Ett annat problem kan vara att dokumentation och exempel oftast är på ett icke engelskt talande språk, oftast kinesiska. Det har börjat dyka upp väldigt många och bra exempel och dokumentation på engelska.
  • Ett annat bekymmer eller nackdel är att Vue.js är helt "community" styrt. Det finns ingen organisation bakom som med React(Facebook) och Angular(Google). Så ibland kan det ta tid innan en buggfix blir implementerad.

Varför Vue?

Vue.js är ett reaktivt JavaScript bibliotek. Vad betyder då detta, att Vue.js är reaktivt?
Vi berörde det lite grann i början av artikeln. Det innebär att applikationen kan reagera på olika händelser som inträffar och uppdatera användargränssnittet därefter. Det kan t ex vara att användaren trycker på en knapp eller skriver något i en textruta eller användaren trycker på "Enter" tangenten. Det kan även vara att datamodellen uppdateras ifrån servern och att ny information skall presenteras i användargränssnittet.

Vi har också redan gått igenom Vue.js enkelhet. Har man bara någorlunda kunskaper inom HTML, CSS och JavaScript är det väldigt enkelt att komma igång med Vue.

Som jag också nämnde tidigare så är det väldigt enkelt att implementera Vue.js i befintliga applikationer. Det kan vara att vi i en befintlig server baserad webb applikation såsom en ASP.NET Core MVC application, vill modernisera en speciell vy. Det som vi kan göra är att byta ut just den vyn mot en Vue baserad vy. Detta leder till att vi kan stegvis kan uppdatera en äldre applikation till en modernare variant baserad på Vue.js.

Hur?

Slutligen hur kommer vi igång med Vue.js?

Det finns olika sätt att komma igång med Vue.js i ett projekt.

  1. Använd en CDN för att länka till Vue.js skript filer
  2. Använd npm för att ladda ner skript filer lokalt
  3. Använda Vue CLI (Command Line Interface)

När ska vi använda vilken metod då?
Enklast regel att följa är, om vi vill använda Vue.js i en befintlig applikation rekommenderar jag att en CDN används för att få tillgång till Vue.js skript filer. Om vi skall skapa ett helt nytt projekt baserat på Vue.js, så rekommenderar jag starkt användandet av Vue CLI. Orsaken är att allt vi behöver laddas då ner med de val vi gör i CLI verktyget till vår utvecklingsmiljö. Dessutom via CLI verktyget får vi byggverktyget webpack automatiskt. Via npm får vi även tillgång till alla filer som vi behöver för att bygga större applikation. Vad vi däremot behöver göra när vi väljer att hämta filer via npm är att bestämma oss för vilken modulhanterare och vilket byggverktyg som vi vill använda oss av. Vue.js har stöd för och kan enkelt samarbeta med webpack och eller browserify.

Låt oss komma igång

Nu när vi vet lite mer om vad, varför och hur låt oss skapa en enkel Vue.js applikation.
Vi börjar med att skapa en enkel applikation genom att använda en CDN.
Jag kommer att skapa en simpel Todo applikation, så låt oss ta det steg för steg.

Steg 1.

Skapa en mapp todo-cdn på valfri plats och navigera sedan in i mappen.

mkdir todo-cdn
cd todo-cdn

Jag använder Visual Studio Code som min kod editor, vilken jag kraftfullt rekommenderar som utvecklingsverktyg.

Skapa en ny html fil, i mitt fall döpte jag den till index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Steg 2.

I head elementet ovanför title ange följande script element
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Nu bör html filen se ut så här

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>Document</title>
  </head>
  <body></body>
</html>

Så nu har vi sagt att vi vill ha tillgång till Vue.js via en CDN.
Nästa steg är nu att aktivera Vue.js i vår index.html fil.

Steg 3.

Varje Vue applikation börjar med att vi skapar en ny instans med hjälp av funktionen Vue.

var app = new Vue({ // options });

Som vi kan se här så tar funktionen ett objekt som argument. Detta är ett konfigurationsobjekt som gör att vi kan definiera vilka egenskaper, metoder med mera som vi vill kunna utnyttja i applikationen. Med hjälp av detta objekt kan vi även instruera Vue vilken del av DOM som vi vill att Vue sköter åt oss.

Låt oss se på ett enkelt exempel: Låt säga att vi vill ha en Array för att spara vår Att-Göra lista samt en variable/egenskap för att lagra en sträng som definierar vad som skall göras. Vad vi då gör att i konfigurations objektet definierar ett nytt objekt kallat data.
Vi börjar med att i vårt body element skapa ett nytt script element.

<body>
    <script></script>
</body>

Nu kan vi skapa en ny instans av Vue funktionen i script elementet.
I script elementet skriver vi nu kod för att skapa instansen och definierar ett data objekt med två variabler/egenskaper todo som vi ger startvärdet tom sträng('') och listan todoList som vi skapar som en tom lista.

<script>
    var app = new Vue({
        data: {
            todo: '',
            todoList: []
        }
    });
</script>

Nu har vi skapat data objektet samt en instans av Vue. Nästa steg är att bestämma vilken del av vår html sidan (DOM) som vi vill skall hanteras av Vue.

Steg 4.

Låt oss nu i body elementet skapa ett section element. Vi sätter även ett id på vårt section element. Detta id kommer vi alldeles strax använda i Vue.

<body>
    <section id="app"></section>
    
    
    <script>...</script>
</body>

Jag satte app som id, namnet här spelar ingen roll. Ni kan hitta på vad som helst som namn här som passar.
Nu måste vi i konfigurationen tala om för Vue vilket element som Vue skall ansvara för. Vi gör detta genom att i konfigurations elementet ange attributet el och sätta dess värde till vårt nya elements id.

<script>
    var app = new Vue({
        el: '#app',
        data: {
            todo: '',
            todoList: []
        }
    });
</script>

Nu har vi skapat en Vue applikation😁. Den gör inte speciellt mycket än, men vi har satt upp vår html sida att vara en Vue applikation. Så låt oss nu skapa lite html element som gör att vi kan se vad som händer.

Steg 5.

Så tillbaka till vårt element section och låt oss nu lägga till en textruta, en knapp samt en oordnad lista.
Så här bör vår html sida se ut efteråt.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>Document</title>
  </head>
  <body>
    <section id="app">
      <input type="text" />
      <button>Add Todo</button>
      <ul>
        <li></li>
      </ul>
    </section>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          todo: '',
          todoList: [],
        },
      });
    </script>
  </body>
</html>

Om vi nu öppnar upp vår index.html fil i webbläsaren så bör vi se en tom textruta samt en liten punkt som indikerar ett tomt list element.
Inte speciellt spännande ännu!
Så vad vi nu behöver tillgång till är databindning. Det är nu som magin i Vue kommer in. Jag kommer i detalj i en senare artikel gå igenom de olika databindnings möjligheterna i Vue. Men tills dess gör vi det på enklast möjliga vis.

Så tillbaka till vårt section element på vårt input element så anger vi attributet v-model, som betyder två-vägs bindning. Det i sin tur innebär att vi binder textrutan till ett värde som finns i vårt data objekt men även att om värdet i textrutan ändra sig så uppdateras vår egenskaps värde i data objektet.

<input type="text" v-model="todo" />
Här binder jag textrutan till egenskapen todo som är definierad i data objektet.
Nästa steg är att binda knappen till en metod som skall anropas när vi klickar på den. Det som skall hända då är att det som står i textrutan skall placeras i vår todoLista i data objektet.
Så låt oss koppla knappen till en metod.
<button v-on:click="addTodo">Add Todo</button>

Attributet v-on är egentligen ett directive i Vue som bygger på att vi knyter en händelse i vårt fall klick händelsen på knappen och namnet "addTodo" är namnet på metoden som kommer att anropad i vår Vue instans.
Vi har ännu inte denna metod så låt oss skapa den. Gå till koden som skapar instansen av Vue och efter måsvingen som stänger data objektet och sätt ett komma. Efter detta komma skall vi nu skapa ett nytt objekt, methods.
Objektet methods låter oss skapa metoder som kan anropas ifrån vårt DOM.

<script>
      var app = new Vue({
        el: '#app',
        data: {
          todo: '',
          todoList: [],
        },
        methods: {
          addTodo() {
            this.todoList.push(this.todo);
            //För demo syfte...
            console.log(this.todoList);
          },
        },
      });
    </script>

I detta nya objekt skapar vi metoden/funktionen addTodo(), precis som vilken annan JavaScript funktion. I funktionen använder vi push metoden på en array för att lägga till värdet som finns i vår todo egenskap. Observera användandet av nyckelordet this. Vi arbetar med aktuell instans av vår Vue instans. Jag har även lagt till ett anrop till console.log för att kunna se vad som händer med listan.

Så här bör den färdiga koden se ut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>Document</title>
  </head>
  <body>
    <section id="app">
      <input type="text" v-model="todo" />
      <button v-on:click="addTodo">Add Todo</button>
      <ul>
        <li></li>
      </ul>
    </section>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          todo: 'Tvätta bilen',
          todoList: [],
        },
        methods: {
          addTodo() {
            this.todoList.push(this.todo);
            this.todo = '';
            console.log(this.todoList);
          },
        },
      });
    </script>
  </body>
</html>

Prova nu detta i webbläsaren. När vi skriver in något i textrutan och klickar på "Add Todo" så ser vi i konsol fönstret att texten är tillagd i vår todoList array. Vi ser också att textrutan töms ut och vi kan skriva in ett nytt värde och addera till vår lista.
Det vi saknar nu är se listans innehåll i vår oordnade lista i webbläsaren.

Steg 6.

Så låt oss nu ta hand om innehållet i vår todoList och presentera det på vår webbsida. För att kunna lista värden ifrån t ex en array så måste vi använda en annan databindnings teknik. Vue har ett databindnings directive v-for som gör det möjligt att visa varje element i en lista på vår sida. Så låt oss ändra vår oordnade lista för att visa upp alla våra att-göra element.

Gå till vårt li element och skriv in följande:

<li v-for="todo in todoList"></li>

Vad som kommer att ske här nu är att för varje element i todoList kommer ett nytt li element att skapas. Suveränt eller hur?
Vi måste nu bara kunna visa texten i elementet också. Det gör vi med hjälp av string interpolation så emellan start och slut elementet skriv in följande:
<li v-for="todo in todoList">{{todo}}</li>

Så dubbla måsvingar och sedan variabeln todo som vi definierat i v-for.

Här är nu den kompletta koden för detta exempel.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>Document</title>
  </head>
  <body>
    <section id="app">
      <input type="text" v-model="todo" />
      <button v-on:click="addTodo">Add Todo</button>
      <ul>
        <li v-for="todo in todoList">{{todo}}</li>
      </ul>
    </section>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          todo: 'Tvätta bilen',
          todoList: [],
        },
        methods: {
          addTodo() {
            this.todoList.push(this.todo);
            this.todo = '';
            console.log(this.todoList);
          },
        },
      });
    </script>
  </body>
</html>

Sammanfattning

Detta avslutar denna introduktion till Vue. Vue.js är ett fantastiskt roligt JavaScript ramverk att arbeta med. Framförallt enligt min egen uppfattning är det förmodligen det lättaste att komma igång med om man jämför med t ex React och Angular som har en mycket högre inkörningströskel.

Det enda som behövs är hyfsade kunskaper i JavaScript, Html och CSS.

I min nästa artikel kommer jag att fokusera på att använda Vue CLI för att skapa grundläggande kod för att bygga stora företagslösningar. Men det blir i nästa artikel, så till nästa gång, HAPPY CODING.