Skip to content

Alt om WordPress, webutvikling — og mer til

⚡ Lær det grunnleggende i Vue 3: fra en tom mappe til komponenter
Webbutvikling
10 min1,945 ord

⚡ Lær det grunnleggende i Vue 3: fra en tom mappe til komponenter

Du ser på Vue 3 og ser et elegant frontend-rammeverk fra de tre store. React, Angular, Vue: det høres seriøst ut. Så åpner du den første opplæringen, og der venter vite, create-vue og .vue-filer med transpilere... Selv om du faktisk kan inkludere Vue med én enkelt <script>-linje og begynne å skrive kode med én gang. Ingen bundlere, ingen JSX, ikke noe konfigurasjonshelvete.

Avstanden mellom «jeg vil prøve det» og «jeg skrev en komponent» er kortere her enn noe annet sted. Men de fleste opplæringer lukker ikke det gapet; de gjenforteller dokumentasjonen i bruddstykker uten å gi deg helhetsbildet. Du ser spredte syntaksbiter og skjønner ikke hvordan de blir til en applikasjon.

Denne guiden er nøyaktig den veien vi selv gikk med Vue: fra en tom mappe til komponenter med props. Du skriver og kjører hver linje selv. Ingen magi, bare fungerende kode og en forståelse av reaktivitet, Vues viktigste superkraft.

💡 Rask oversikt:

  • Bygg en Vue-app fra en CDN og mount den i DOM-en: din første fungerende instans på 5 minutter
  • Gå gjennom fire sentrale direktiver, v-for, v-if, v-on og v-bind: bærebjelkene i enhver Vue-mal
  • Bryt ned computed og methods: når du skal bufre og når du skal kalle
  • Trekk ut logikk i komponenter og send data via props: et steg mot ekte arkitektur

Opprette en Vue-app

La oss starte fra absolutt null. Ingen create-vue, vite eller vue-cli, bare en mappe med to filer.

Opprett mappen og filene i terminalen din:

1mkdir vue3-intro
2cd vue3-intro
3touch index.html app.js

Eller gjør det samme via filbehandleren din. Åpne nå index.html og skriv skjelettet:

1<!DOCTYPE html>
2<html lang="ru">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
7    <title>Vue 3 — first steps</title>
8</head>
9<body>
10    <div id="app"></div>
11    <script src="./app.js"></script>
12</body>
13</html>

Tre nøkkellinjer. <script src="https://unpkg.com/vue@3/dist/vue.global.js"> laster Vue 3 fra en CDN. Dette er den raskeste måten å komme i gang på: biblioteket lastes som en vanlig JavaScript-fil, uten behov for et byggesteg. <div id="app"> setter mount-punktet: stedet i DOM-en der Vue skal «bo». Den tredje linjen importerer app.js, der vi skal definere logikken.

La oss nå fylle inn app.js:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3'
5        }
6    }
7})
8 
9app.mount('#app')

Metoden Vue.createApp() oppretter en applikasjonsinstans. Den mottar et opsjonsobjekt; her deklarerte vi en course-egenskap via data()-funksjonen. Vue gjør alle egenskaper som returneres fra data() reaktive: når en verdi endres, oppdateres DOM-en automatisk. Ingen manuell tre-manipulering nødvendig.

Men applikasjonen må «festes» til et element på siden. Det er det app.mount('#app') gjør. Uten denne linjen vil ikke Vue reagere på endringer: instansen er opprettet, men ikke startet.

Det eneste som gjenstår, er å vise egenskapen i HTML-en. Inne i <div id="app">, skriv:

1<h1>{{ course }}</h1>

Doble krøllparenteser {{ }} er interpolering, den primære måten å skrive ut data på i Vue-maler. Alt inni {{ }} erstattes av Vue med den tilsvarende egenskapsverdien fra data().

Første Vue 3-app i nettleseren

Åpne index.html i nettleseren din. Siden viser teksten. Din første app er klar, og du skrev den selv i stedet for å generere den via et CLI.

Rendere lister

I en ekte applikasjon jobber du nesten alltid med arrays: produkter, tagger, innlegg. Vue tilbyr v-for-direktivet for dette.

La oss legge til en tags-array i data():

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            tags: ['Vue', 'Frontend', 'JavaScript']
8        }
9    }
10})

Og i HTML-en, en liste:

1<ul>
2    <li v-for="tag in tags">{{ tag }}</li>
3</ul>

v-for-direktivet itererer over tags-arrayen og oppretter sitt eget <li>-element for hvert element. Variabelen tag inne i løkken er det gjeldende elementet. Resultatet ser slik ut:

Vue 3-tagliste med v-for-direktivet

En viktig nyanse: når du itererer over en array, trenger hvert DOM-element en unik nøkkel. Vue bruker den til å spore nodeidentitet under oppdateringer, noe som gir raskere re-rendring og forhindrer tilstandsrelaterte feil.

1<ul>
2    <li v-for="(tag, index) in tags" :key="index">{{ tag }}</li>
3</ul>

:key er en forkortelse for v-bind:key, som binder key-attributtet til indeksverdien. Har du en array med objekter, for eksempel { id: 1, name: 'Vue' }, bør du bruke id som nøkkel i stedet for indeksen. Indeksen endres ved omorganisering, mens id er stabil, noe som gjør den mer pålitelig.

Betinget rendering

Du må ofte vise eller skjule et element basert på en betingelse: en kjøpsknapp bare hvis kurset er tilgjengelig. Vue håndterer dette med direktivet v-if.

La oss legge til et available-flagg i data():

1data() {
2    return {
3        course: 'Introduction to Vue 3',
4        description: 'Basic guide to Vue 3 for beginners',
5        price: '$19.99',
6        available: true,
7        tags: [
8            { id: 1, name: 'Vue' },
9            { id: 2, name: 'Frontend' },
10            { id: 3, name: 'JavaScript' }
11        ]
12    }
13}

Og bruke det i markeringen:

1<p v-if="available">Course available for purchase!</p>
2<p v-else>Unfortunately, the course is currently unavailable.</p>

v-if evaluerer uttrykket i anførselstegn. Er det sant, rendres den første blokken; hvis ikke, trer v-else inn. Prøv å kjøre app.available = false i nettleserkonsollen og se hvordan siden reagerer umiddelbart.

Betinget rendering i Vue 3 med v-if

I tillegg til v-if / v-else finnes også v-else-if for betingelseskjeder og v-show. Forskjellen er grunnleggende: v-if fjerner elementet fullstendig fra DOM-en, mens v-show bare veksler display: none. Velg v-if når betingelsen endres sjelden. Bruk v-show for hyppig veksling, som faner, der ytelse er viktig.

Håndtering av hendelser

Direktivet v-on, eller @ som forkortelse, lytter etter DOM-hendelser: klikk, input, hover. Når en hendelse inntreffer, kjører Vue den angitte metoden eller uttrykket.

La oss legge til en purchase-metode i app-alternativene:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            available: true,
8            tags: [
9                { id: 1, name: 'Vue' },
10                { id: 2, name: 'Frontend' },
11                { id: 3, name: 'JavaScript' }
12            ]
13        }
14    },
15    methods: {
16        purchase() {
17            console.log('Course purchased!')
18        }
19    }
20})

methods-seksjonen inneholder funksjoner som er tilgjengelige i malen og andre metoder via this. La oss nå knytte kallet til en knapp:

1<button @click="purchase">Buy</button>
Håndtere klikk i Vue 3 med v-on

For enkle handlinger kan du skrive kode direkte i @click:

1<button @click="available = !available">Toggle availability</button>
Veksle knappetilstand i Vue 3

Inline-kode som dette er praktisk for korte operasjoner som å slå av og på et flagg. Men flytt alltid kompleks logikk inn i metoder; malen skal forbli lesbar. En enkel regel: counter += 1 er greit i malen, men ti linjer med kjøpslogikk hører hjemme i en metode.

Binde attributter

Attributter som src, href eller alt må ofte være dynamiske. Direktivet v-bind, eller : som forkortelse, binder en attributtverdi til et Vue-uttrykk.

La oss legge til data for et bilde:

1data() {
2    return {
3        // ...other properties
4        imgURL: 'https://catalins.tech/img',
5        imgDescription: 'Photo of a desk with a computer'
6    }
7}

I malen binder vi dem til en <img>:

1<img :src="imgURL" :alt="imgDescription" width="500" height="350">

Den fullstendige formen ville vært v-bind:src="imgURL"; kolonet er bare syntaktisk sukker. Vue sporer nå imgURL og imgDescription: endre dem i data(), så oppdateres bildet på siden automatisk. Det er reaktivitet i praksis.

Binde bildeattributter med v-bind

Det samme prinsippet gjelder for attributter som :href, :disabled og :class, samt alle andre. Prøv det selv: legg til en lenke med en dynamisk href fra data() og bekreft at det fungerer uten en eneste ekstra linje.

Utregnede egenskaper

Noen ganger må data transformeres før visning: formatere en pris, sette sammen fornavn og etternavn, sjekke en betingelse. Vue tilbyr computed-egenskaper for dette.

Tenk deg at du alltid vil ha en bildebeskrivelse, selv om feltet imgDescription er tomt. La oss skrive en utregnet egenskap:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            available: true,
8            imgURL: 'https://catalins.tech/img',
9            imgDescription: 'Photo of a desk with a computer',
10            tags: [
11                { id: 1, name: 'Vue' },
12                { id: 2, name: 'Frontend' },
13                { id: 3, name: 'JavaScript' }
14            ]
15        }
16    },
17    computed: {
18        hasImageDescription() {
19            return this.imgDescription.length > 0
20                ? this.imgDescription
21                : 'Automatic image description'
22        }
23    }
24})

Bruk nå den utregnede egenskapen i malen i stedet for rådataene:

1<img :src="imgURL" :alt="hasImageDescription" width="500" height="350">

Vue mellomlagrer resultatet av en computed-egenskap og beregner den på nytt bare når avhengighetene endres, i vårt tilfelle imgDescription. Dette er mer effektivt enn å kalle en funksjon ved hver rendering.

En viktig regel: utregnede egenskaper er ment for å vise data, ikke for å endre dem. Ikke modifiser applikasjonstilstand inne i computed; bruk metoder til det.

Metoder vs. utregnede egenskaper

Forskjellen mellom methods og computed koker ned til ett spørsmål: endrer du data eller viser du en avledet verdi?

Utregnede egenskaper er for presentasjonslaget. Formatering, filtrering, betingelsessjekker, strengsammenstilling. De er mellomlagret og har ingen sideeffekter.

Metoder er for handlinger. Endre en verdi i data(), sende en forespørsel, slå av og på et flagg. De kalles eksplisitt og kan gjøre hva som helst.

Et typisk antimønster er å modifisere this.course inne i en computed-egenskap. En utregnet egenskap reagerer på endringer i course, men skal ikke selv endre den. Bruk alltid en metode for å endre data. La malen beskrive «hva som skal vises», ikke «hvordan det skal beregnes».

Komponenter og props

Når en applikasjon vokser, blir det uhåndterlig å holde alt i én enkelt fil. Vue lar deg dele opp grensesnittet i komponenter: isolerte blokker med egen logikk, template og stil.

La oss lage vår første komponent, CourseCard:

1mkdir components
2touch components/CourseCard.js

I components/CourseCard.js definerer vi komponenten:

1app.component('coursedisplay', {
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            available: true,
8            imgURL: 'https://catalins.tech/img',
9            imgDescription: 'Photo of a desk with a computer',
10            tags: [
11                { id: 1, name: 'Vue' },
12                { id: 2, name: 'Frontend' },
13                { id: 3, name: 'JavaScript' }
14            ]
15        }
16    },
17    computed: {
18        hasImageDescription() {
19            return this.imgDescription.length > 0
20                ? this.imgDescription
21                : 'Automatic image description'
22        }
23    },
24    template: `
25        <img :src="imgURL" :alt="hasImageDescription" width="500" height="350">
26        <h1>{{ course }}</h1>
27        <p>{{ description }}</p>
28        <p>{{ price }}</p>
29        <button @click="available = !available">Buy</button>
30        <ul>
31            <li v-for="tag in tags" :key="tag.id">{{ tag.name }}</li>
32        </ul>
33        <p v-if="available">Course available for purchase!</p>
34        <p v-else>Unfortunately, the course is currently unavailable.</p>
35    `
36})

Det første argumentet til app.component() er navnet vi bruker i HTML som en tag: <coursedisplay></coursedisplay>. Det andre er et objekt med data(), computed og template, komponentens «indre».

La oss nå inkludere komponenten i index.html og bruke den:

1<div id="app">
2    <coursedisplay></coursedisplay>
3</div>
4<script src="./app.js"></script>
5<script src="./components/CourseCard.js"></script>
6<script>
7    const mountedApp = app.mount('#app')
8</script>

Vi importerte komponentfilen, brukte den som en egendefinert tag og monterte applikasjonen rett i HTML-en. Kurslogikken er nå innkapslet i CourseCard, mens app.js kun har ansvar for å opprette instansen.

Props: sende data mellom komponenter

Props (forkortelse for properties) er mekanismen for å sende data fra en overordnet komponent til en underordnet. Den underordnede komponenten deklarerer hvilke props den aksepterer, og den overordnede sender dem som attributter.

La oss legge til en paid-prop i CourseCard som indikerer om kurset er betalt eller gratis:

1app.component('coursedisplay', {
2    props: {
3        paid: {
4            type: Boolean
5        }
6    },
7    // ...rest of the configuration
8})

Den overordnede, i vårt tilfelle app.js, sender verdien:

1const app = Vue.createApp({
2    data() {
3        return {
4            allCourses: 1,
5            paid: true
6        }
7    }
8})

Og i index.html sender vi prop-en videre:

1<coursedisplay :paid="paid"></coursedisplay>

Vue validerer automatisk typen på den sendte verdien. Hvis det forventes en Boolean, men mottas en streng, vil rammeverket gi en advarsel i konsollen. Dette sparer deg for dumme feil etter hvert som kodebasen vokser.

For å gjøre en prop påkrevd legger du til required: true i definisjonen. Vue vil da klage hvis den overordnede ikke sender en verdi, slik at du får vite om problemet før det ødelegger grensesnittet.

Du finner den komplette koden for denne guiden i vue3-intro-repositoriet på GitHub, som inneholder de ferdige filene index.html, app.js og components/CourseCard.js. Fork det og eksperimenter.

Relatert video

For å forsterke stoffet gjennom praksis, se den første leksjonen fra Net Ninja Vue 3-kurset; den kompletterer denne guiden på en fin måte med en live kodegjennomgang:

⁉️🤔 Ofte stilte spørsmål

Kan jeg bruke Vue 3 uten en bundler i produksjon?

Ja, å inkludere det via CDN (unpkg.com/vue@3/dist/vue.global.js) fungerer også i produksjon. Men for reelle prosjekter anbefaler vi å bytte til Vite: du får tree-shaking, kodedeling og Single-File Components, noe som dramatisk forenkler utviklingen etter hvert som applikasjonen vokser. Startmalen npm create vue@latest setter opp alt dette på et minutt.

Hvordan skiller v-if seg fra v-show?

v-if fjerner elementet fullstendig fra DOM-en når betingelsen er usann. v-show beholder elementet i DOM-en, men veksler CSS-egenskapen display: none. Bruk v-if når betingelsen endres sjelden, for eksempel brukerrolle. Bruk v-show for hyppig veksling som faner, der renderingshastighet betyr noe og du vil unngå å gjenskape noder.

Er:key påkrevd i v-for?

Teknisk sett fungerer v-for uten :key, men Vue vil gi en advarsel i konsollen. Uten en nøkkel kan ikke rammeverket spore hvilket DOM-element som tilsvarer hvilket dataelement, noe som fører til feil ved omorganisering og sletting. Angi alltid :key med en unik identifikator, id fra dataene dine heller enn array-indeksen.

Hva er forskjellen mellom data() og computed?

data() lagrer den opprinnelige tilstanden, de «rå» dataene. computed utleder en verdi fra den for visning: en formatert streng, et filtrert array, et valideringsresultat. En computed property oppdateres automatisk når avhengighetene endres og mellomlagres mellom renderinger. Metoder derimot kalles på nytt hver gang og er ment for handlinger, ikke for visning.

Kan du blande Options API og Composition API?

Ja, du kan bruke begge stiler i ett enkelt prosjekt. Vue 3 støtter Options API fullt ut, mens Composition API er et ekstra verktøy for komplekse scenarioer. For læring anbefaler vi å starte med Options API: det er mer strukturert og nærmere den mentale modellen om at «en komponent er et objekt med alternativer».

Hva du bør gjøre videre: ditt neste steg med Vue 3

Du har bygget din første app, utforsket direktiver, computed properties og komponenter. Dette er grunnlaget ethvert prosjekt bygges på, fra en landingsside til et adminpanel.

Det er tre veier videre. For det første, befest gjennom praksis: hent et offentlig API som JSONPlaceholder og vis en liste over innlegg med filtrering via computed. For det andre, gå over til Vite og .vue-filer: den offisielle Vue 3-dokumentasjonen leder deg fra create-vue til din første SFC på en time. For det tredje, lær Vue Router og Pinia for å bygge en fullverdig SPA.

Hvis du vil prøve Vue uten noen installasjon i det hele tatt, kan du se artikkelen om å inkludere Vue via CDN. Startkoden fra denne veiledningen finner du i vue3-intro-repositoriet; fork det og eksperimenter.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.