PricingLoginStart free
Vue Academy logo
HTMLBegynderWebNiveauer A1 → C122 sprog

Vue Academy

Skab interaktive og effektive brugergrænseflader med Vue.js gennem Vue Academy. Et læringsforløb på CoddyKit med 42 korte kurser og 156 interaktive lektioner – med en AI-vejleder ved din side døgnet rundt.

Kurser
42
Lektioner
156
Interaktive trin
2,022
Gratis at komme i gang
Kursus 1
GET IT ONGoogle PlayDownload on theApp Store
Kursusindhold

42 kurser på denne sti

Alle kurser på Vue Academy-stien i læringsrækkefølge. Det første kursus er gratis.

1

A13 lektionerGratis

Kom i gang med Vue.js – forstå, hvad det er, opsæt dit miljø, og byg din første reaktive applikation.

  1. 1Hvad er Vue.js?
  2. 2Hvorfor udviklere elsker Vue
  3. 3Sådan bygges en Vue-app
Start gratis
2

A13 lektionerPRO

Lær at oprette grundstrukturen til Vue-projekter med CLI'en, og forstå den genererede filstruktur og værktøjerne.

  1. 1Installation af Vue CLI
  2. 2Den genererede projektstruktur
  3. 3CLI-konfiguration og plugins
Start gratisLås op med PRO
3

A13 lektionerPRO

Bliv fortrolig med Vue's deklarative templatesyntaks – interpolation, direktiver, betingelser, løkker og bindings.

  1. 1Interpolation og direktiver
  2. 2Betingelser og løkker
  3. 3Binding af attributter og klasser
Start gratisLås op med PRO
4

A24 lektionerPRO

Skift fra Options API til Vue 3's Composition API med setup(), ref og reactive til moderne Vue-udvikling.

  1. 1Hvorfor Composition API?
  2. 2setup()-funktionen og reaktive variabler
  3. 3ref kontra reactive: Hvornår skal De bruge hvad?
  4. +1 flere
Start gratisLås op med PRO
5

A24 lektionerPRO

Skriv renere og mere ergonomiske komponenter med -syntaksen i Vue 3.

  1. 1Introduktion til script setup
  2. 2defineProps og defineEmits
  3. 3defineExpose og useAttrs
  4. +1 flere
Start gratisLås op med PRO
6

A24 lektionerPRO

Bliv fortrolig med alle indbyggede Vue-direktiver, og lær at skrive dine egne brugerdefinerede direktiver.

  1. 1v-model: Internals i two-way binding
  2. 2v-on-eventmodifikatorer
  3. 3v-bind: Dynamiske og multiple bindings
  4. +1 flere
Start gratisLås op med PRO
7

A24 lektionerPRO

Opbyg robuste formularer med v-model, native validering og biblioteket VeeValidate.

  1. 1v-model på alle formularelementer
  2. 2Formularindsendelse og nulstilling
  3. 3Mønstre til manuel validering
  4. +1 flere
Start gratisLås op med PRO
8

A23 lektionerPRO

Opbyg genanvendelige Vue-komponenter, og forbind dem med props, brugerdefinerede events og slots.

  1. 1Oprettelse og registrering af komponenter
  2. 2Props og brugerdefinerede hændelser
  3. 3Slots og scoped slots
Start gratisLås op med PRO
9

A23 lektionerPRO

Forstå Vue's reaktivitetssystem, og brug computed properties og watchers effektivt.

  1. 1Grundlæggende reaktivitet
  2. 2Beregnede egenskaber
  3. 3Watchers og dyb reaktivitet
Start gratisLås op med PRO
10

B14 lektionerPRO

Bliv fortrolig med Vue 3-komponenternes livscyklus-hooks, og forstå, hvornår hver fase udføres.

  1. 1Oversigt over livscyklusfaser
  2. 2onMounted og onBeforeMount
  3. 3onUpdated og onBeforeUpdate
  4. +1 flere
Start gratisLås op med PRO
11

B14 lektionerPRO

Tilføj glidende enter/leave-transitions og listeanimationer med Vue's og .

  1. 1Transition-komponenten
  2. 2CSS-transitions og animationer
  3. 3JavaScript-transition-hooks
  4. +1 flere
Start gratisLås op med PRO
12

B14 lektionerPRO

Bliv fortrolig med navngivne slots, scoped slots og dynamisk slotindhold for at opbygge meget genanvendelige komponent-API'er.

  1. 1Navngivne slots og default slot
  2. 2Scoped slots: Overførsel af data til parent
  3. 3Dynamiske slot-navne
  4. +1 flere
Start gratisLås op med PRO
13

B14 lektionerPRO

Del data på tværs af dybt indlejrede komponenter uden prop drilling ved hjælp af Vue's provide/inject-mekanisme.

  1. 1Problemet med prop drilling
  2. 2provide() i parent-komponenter
  3. 3inject() i child-komponenter
  4. +1 flere
Start gratisLås op med PRO
14

B14 lektionerPRO

Skriv genanvendelig stateful-logik som composables – det primære mønster til kodegenbrug i Vue 3.

  1. 1Hvad kendetegner en god composable?
  2. 2useCounter: En simpel composable
  3. 3useFetch: Composable til asynkrone data
  4. +1 flere
Start gratisLås op med PRO
15

B14 lektionerPRO

Opbyg robuste Vue-applikationer med korrekte error boundaries, fallback-brugerflader og global fejlhåndtering.

  1. 1onErrorCaptured-livscyklushook
  2. 2Komponenter som ErrorBoundary
  3. 3app.config.errorHandler til globale fejl
  4. +1 flere
Start gratisLås op med PRO
16

B14 lektionerPRO

Erstat Vuex med Pinia – Vue 3's officielle bibliotek til state management, som er enklere og bygget med TypeScript i centrum.

  1. 1Pinia vs Vuex: Hvorfor skifte
  2. 2defineStore: State, getters og actions
  3. 3Sammensætning af stores og adgang på tværs af stores
  4. +1 flere
Start gratisLås op med PRO
17

B14 lektionerPRO

Skriv fuldt typesikre Vue 3-komponenter med typede props, emits og composables ved hjælp af TypeScript.

  1. 1Opsætning af TypeScript i Vue-projekter
  2. 2Typede props og emits med defineProps/defineEmits
  3. 3Typning af composables og refs
  4. +1 flere
Start gratisLås op med PRO
18

B14 lektionerPRO

Opbyg flersprogede Vue-applikationer med vue-i18n v9, skift af lokalitet og korrekt pluralisering.

  1. 1Opsætning af vue-i18n og meddelelsesfiler
  2. 2useI18n-composable og funktionen t()
  3. 3Pluralisering og sammenkædede meddelelser
  4. +1 flere
Start gratisLås op med PRO
19

B14 lektionerPRO

Dokumentér og udvikl Vue-komponenter isoleret med Storybook ved at skrive stories og interaktive controls.

  1. 1Opsætning af Storybook til Vue 3
  2. 2Skrivning af komponenthistorier
  3. 3Controls, actions og args
  4. +1 flere
Start gratisLås op med PRO
20

B13 lektionerPRO

Tilføj navigation på klientsiden til Vue-apps med Vue Router – routes, parametre og navigation guards.

  1. 1Opsætning af Vue Router
  2. 2Indlejrede og dynamiske routes
  3. 3Navigationsguards
Start gratisLås op med PRO
21

B13 lektionerPRO

Administrér delt applikationstilstand med Vuex – state, mutations, actions, getters og moduler.

  1. 1Grundlæggende Vuex
  2. 2Mutations og actions
  3. 3Getters og moduler
Start gratisLås op med PRO
22

B13 lektionerPRO

Hent og administrér eksterne data i Vue-apps med Axios, livscyklus-hooks og robust fejlhåndtering.

  1. 1HTTP-requests med Axios
  2. 2Livscyklushooks og datahentning
  3. 3Fejlhåndtering og globale interceptors
Start gratisLås op med PRO
23

B13 lektionerPRO

Opbyg, udrul og vedligehold Vue-applikationer i produktion med hostingplatforme og overvågning.

  1. 1Optimering af buildprocessen
  2. 2Deployment til hostingplatforme
  3. 3Overvågning og vedligeholdelse
Start gratisLås op med PRO
24

B14 lektionerPRO

Udforsk banebrydende Vue-værktøjer, Vapor mode og nye mønstre, der former fremtidens Vue-udvikling.

  1. 1Vue Vapor Mode: Optimering ved kompilering
  2. 2Vite-økosystemet: Plugins og værktøjer
  3. 3Vue Macros og community-forslag
  4. +1 flere
Start gratisLås op med PRO
25

B24 lektionerPRO

Bliv fortrolig med avancerede funktioner i Vue Router – route-meta, scroll-adfærd, transitions og programmatisk navigation.

  1. 1Route-metafelter og typning
  2. 2Route-overgange og animation
  3. 3Konfiguration af scrolladfærd
  4. +1 flere
Start gratisLås op med PRO
26

B24 lektionerPRO

Opbyg full-stack-Vue-applikationer med Nuxt 3's filbaserede routing, serverruter og SSR/SSG-funktioner.

  1. 1Nuxt 3-projektstruktur og filbaseret routing
  2. 2Datahentning: useFetch og useAsyncData
  3. 3Nuxt-serverroutes og API-endpoints
  4. +1 flere
Start gratisLås op med PRO
27

B24 lektionerPRO

Integrér GraphQL i Vue-apps med Apollo Client til forespørgsler, mutationer og realtidsabonnementer.

  1. 1Opsætning af Apollo Client i Vue 3
  2. 2useQuery til datahentning
  3. 3useMutation til dataændringer
  4. +1 flere
Start gratisLås op med PRO
28

B24 lektionerPRO

Opbyg Vue-applikationer med liveopdateringer ved hjælp af WebSockets og Socket.io til chat, dashboards og samarbejde.

  1. 1Grundlæggende WebSocket i browseren
  2. 2Socket.io-klient med Vue
  3. 3Opbygning af en chatkomponent i realtid
  4. +1 flere
Start gratisLås op med PRO
29

B24 lektionerPRO

Test Vue-komponenter pålideligt med Vitest og Vue Test Utils, herunder mocking og rapportering af testdækning.

  1. 1Opsætning af Vitest til Vue-projekter
  2. 2Montering og forespørgsler på komponenter
  3. 3Test af brugerinteraktioner og hændelser
  4. +1 flere
Start gratisLås op med PRO
30

B23 lektionerPRO

Gør Vue-applikationer hurtigere med lazy loading, code splitting, memoization og profilering af flaskehalse.

  1. 1Lazy loading og kodedeling
  2. 2Memoiseringsteknikker
  3. 3Identifikation og løsning af flaskehalse
Start gratisLås op med PRO
31

B23 lektionerPRO

Test Vue-apps med enhedstests ved hjælp af Vue Test Utils og end-to-end-test for fuld dækning.

  1. 1Introduktion til testframeworks
  2. 2Enhedstest med Vue Test Utils
  3. 3End-to-end-test
Start gratisLås op med PRO
32

B23 lektionerPRO

Anvend avancerede Vue-mønstre – mixins, brugerdefinerede direktiver, plugins og skalerbar projektorganisering.

  1. 1Mixins og brugerdefinerede directives
  2. 2Udvikling af plugins
  3. 3Skalerbar mappestruktur
Start gratisLås op med PRO
33

B24 lektionerPRO

Gå videre end templates med Vue's h()-renderfunktion og JSX til dynamisk, programmatisk oprettelse af komponenter.

  1. 1Dybdegående gennemgang af funktionen h()
  2. 2JSX i Vue 3 med Vite
  3. 3Dynamiske komponenter med render-funktioner
  4. +1 flere
Start gratisLås op med PRO
34

B24 lektionerPRO

Forvandl Vue-apps til PWA'er med offline-understøttelse, service workers og installation, der minder om native apps.

  1. 1Opsætning af vite-plugin-pwa
  2. 2Strategier for service workers
  3. 3Offline-understøttelse og baggrundssynkronisering
  4. +1 flere
Start gratisLås op med PRO
35

B24 lektionerPRO

Sikr Vue-applikationer mod XSS, CSRF og andre websårbarheder med praktiske forsvarsmønstre.

  1. 1Forebyggelse af XSS i Vue
  2. 2Content Security Policy (CSP) med Vue
  3. 3CSRF-beskyttelse i Vue-SPA'er
  4. +1 flere
Start gratisLås op med PRO
36

B24 lektionerPRO

Opbyg, dokumentér og udgiv genanvendelige Vue-komponentbiblioteker til npm med Vite's library mode.

  1. 1Konfiguration af Vites library mode
  2. 2TypeScript-deklarationer til komponentbiblioteker
  3. 3Tree-shaking og automatisk import
  4. +1 flere
Start gratisLås op med PRO
37

B24 lektionerPRO

Opret installerbare Vue-plugins, der tilføjer globale komponenter, direktiver, composables og konfiguration på tværs af appen.

  1. 1Pluginarkitektur og app.use()
  2. 2Globale properties og provide/inject i plugins
  3. 3Eksempel på notifikations- og toast-plugin
  4. +1 flere
Start gratisLås op med PRO
38

C14 lektionerPRO

Design store Vue-applikationer som uafhængige micro-frontends med Module Federation.

  1. 1Principper for micro-frontend-arkitektur
  2. 2Webpack Module Federation med Vue
  3. 3Vite Federation Plugin
  4. +1 flere
Start gratisLås op med PRO
39

C14 lektionerPRO

Bliv fortrolig med avancerede reaktivitetsmønstre, state machines og composable factories til komplekse Vue-applikationer.

  1. 1Avanceret reaktivitet: shallowRef og triggerRef
  2. 2Composable-fabrikker og parametriserede composables
  3. 3State machines med XState i Vue
  4. +1 flere
Start gratisLås op med PRO
40

C14 lektionerPRO

Profilér og optimér Vue-applikationers ydeevne med v-memo, lazy loading og justering af det reaktive system.

  1. 1v-memo til template-memoisering
  2. 2Profilering med fanen Performance i Vue DevTools
  3. 3Virtuel scrollning til store lister
  4. +1 flere
Start gratisLås op med PRO
41

C14 lektionerPRO

Implementér streaming SSR og Vue Suspense for progressiv sideindlæsning og forbedrede Core Web Vitals.

  1. 1Vue Suspense-komponenten
  2. 2Asynkrone komponenter med defineAsyncComponent
  3. 3Streaming-SSR med renderToWebStream
  4. +1 flere
Start gratisLås op med PRO
42

C14 lektionerPRO

Opbyg en produktionsklar full-stack-applikation med Vue 3-frontend, Fastify-backend og JWT-autentificering.

  1. 1Fastify-backend til Vue-SPA'er
  2. 2JWT-autentificering: Login og refresh
  3. 3Autentificerede API-kald med Axios-interceptors
  4. +1 flere
Start gratisLås op med PRO
CoddyKit PRO

Lås op for alle 42 kurser på denne sti og alle kurser på alle andre stier

AI-vejleder, certificeringseksamen og certifikat. Fungerer på web, iOS og Android.

Se alle abonnementer
Årligt$29.90 / årCa. $2.49 om månedenBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for altid.
Kursusoversigt

Vue.js: Det progressive framework til opbygning af rigtige brugerflader

Vue.js er det progressive JavaScript-framework, der er udviklet til at opbygge komponentbaserede brugerflader — fra en enkelt interaktiv widget, der er indlejret på en eksisterende side, til en fuldt serverrenderet applikation med Nuxt. Dets Composition API, finkornede reaktivitetssystem og førsteklasses TypeScript-understøttelse gør det til et praktisk valg for både nye projekter og teams, der migrerer væk fra ældre frontendløsninger. Dette læringsforløb dækker Vue 3 fra ende til anden, fra templatesyntaks til udrulning i produktion.

Det lærer du

Du arbejder med Composition API og syntaksen script setup, Vue-direktiver, beregnede egenskaber og grundprincipperne i reaktivitet. Læringsforløbet dækker kommunikation mellem komponenter, slots, provide/inject og composables til delt logik. Du håndterer applikationstilstand med både Pinia og Vuex, arbejder med routing via Vue Router, herunder avancerede mønstre, validerer formularer og bruger REST-API'er sammen med realtidsdata via WebSockets. Senere kurser behandler TypeScript-integration, internationalisering, Storybook, testning med Vitest, optimering af ydeevne, serverrendering med Nuxt 3, GraphQL med Apollo, progressive webapps og sikkerhedspraksis i Vue.

Læringsforløbet

42 kurser spænder fra A1 til C1. Kurserne på A1- og A2-niveau etablerer Vue CLI, templatesyntaks, databinding, direktiver, formularer og grundlæggende komponenter. Kurserne på B1-niveau udfolder hele økosystemet: livscyklushooks, overgange, Pinia, Vuex, Vue Router, TypeScript, i18n og asynkrone data. B2 hæver niveauet med serverrendering via Nuxt 3, GraphQL, WebSockets, komponenttestning, renderingsfunktioner, understøttelse af progressive webapps og udgivelse af et komponentbibliotek. Kurserne på C1-niveau tager fat på mikrofrontend-arkitektur, avancerede mønstre i Composition API, streaming af SSR med Suspense, Vue-ydeevne i stor skala og en fuldstackapplikation bygget med Fastify og godkendelse.

Sådan fungerer det

Hvert kursus er opdelt i korte, fokuserede lektioner, som du gennemfører i den indbyggede kodeeditor med feedback i realtid. En AI-underviser er tilgængelig, når du går i stå, så du kan arbejde dig gennem syntaksøvelser, komponentudfordringer og arkitekturproblemer i dit eget tempo uden at forlade appen.

Værktøjer

Øv dig med AI – læs ikke bare

Få mere ud af din læring med AI-drevne værktøjer og funktioner

AI-kodegeneratorGenerér kode med AIAI-fejlretningFind og ret fejl i kodePROAI-indsigtDybdegående kodeanalysePROAI-chatChat med en AI-underviserStil et superspørgsmålFå svar på ekspertniveauPROOpret lektionAI-drevet værktøj til at oprette lektionerPROStart certificeringseksamenFå dit certifikatPROKodeeditorSkriv og kør kodeStart udfordringAfprøv dine færdigheder

Sådan lærer du

  1. 01

    Interaktive lektioner

    Praktiske kodeøvelser med feedback i realtid

  2. 02

    AI-underviser

    Få øjeblikkelig hjælp fra vores AI, når du sidder fast

  3. 03

    Indbygget editor

    Skriv og kør kode direkte i din browser

  4. 04

    Certifikat

    Få et certifikat, når du gennemfører kurset

Udforsk videre

Relaterede læringsstier

Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.React Academy logoReact AcademyMaster ReactJS to build dynamic user interfaces with ReactJS Academy.
Ofte stillede spørgsmål

Ofte stillede spørgsmål

Er Vue Academy-kurset gratis?

Ja. Du kan begynde på Vue Academy-kurset gratis og gennemføre de interaktive lektioner uden omkostninger. Et valgfrit PRO-abonnement giver adgang til avancerede AI-værktøjer og et certifikat, der kan deles.

Skal jeg have erfaring på forhånd for at lære HTML?

Nej. Kurset begynder med det grundlæggende og bevæger sig gradvist videre til mere avancerede emner, så du kan starte uden tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer ved at øve dig. Korte interaktive lektioner kombinerer en tydelig forklaring med en praktisk kodeøvelse, der kører i realtid, og en AI-vejleder, der er tilgængelig døgnet rundt, hjælper dig personligt, når du sidder fast.

Får jeg et certifikat, når jeg gennemfører Vue Academy?

Ja. PRO-brugere kan tage en eksamen og få et certifikat for gennemførelse af Vue Academy-kurset, som kan deles og indeholder en verificerbar kode.

Kan jeg lære HTML på min telefon?

Ja. CoddyKit er tilgængeligt på nettet og som indbyggede iOS- og Android-apps, så du kan lære HTML på enhver enhed, og dine fremskridt synkroniseres på tværs af dem.

Hvad koster CoddyKit PRO?

Det første kursus på Vue Academy-stien er gratis. CoddyKit PRO giver adgang til alle kurser: $5.90 om ugen, $7.90 om måneden, $29.90 om året eller $69.99 én gang for livstidsadgang uden fornyelser.

Hvor lang tid tager det at gennemføre Vue Academy?

Vue Academy har 42 kurser og 156 lektioner. De fleste lektioner tager cirka 5–10 minutter, så hele stien kræver omkring 18 timers praktisk øvelse i dit eget tempo.

Start på Vue Academy nu

Slut dig til tusindvis af kursister, der mestrer programmering med AI-drevne lektioner.

Start gratisSe alle kurser