Leer Vue: code & bouw
Leer Vue: code & bouw — Leer Vue.js door componenten op je telefoon te bouwen
Leer Vue: code & bouw is een gratis iOS- en Android-app waarmee beginners die al een beetje HTML en JavaScript kennen, en developers die overstappen van de Options API naar de Composition API, Vue.js leren. De app bevat 42 cursussen en 156 lessen — van je eerste template tot Pinia, Vue Router en Nuxt 3 — en single-file components compileren op je apparaat, zodat de 20 begeleide projecten, de missies en het Vue Lab zonder server werken.
- Prijs
- Gratis, upgrade naar Pro
- Platforms
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Versie
- 82.6.0
- Vereist
- iOS 15.1 of hoger
- App Store
- 3.0 ★ (2)
Een component begrijp je makkelijker zodra je er een hebt stukgemaakt.
Het Vue Lab geeft je elke dag een kapotte component en vraagt je de bug te vinden. Je kunt de props van een component aanpassen met live bedieningselementen en zien hoe de state verandert terwijl je klikt. Single-file components compileren op je telefoon, zodat de preview zich voor je ogen stukmaakt en weer herstelt, met een foutkaart waarop staat wat er misging.
Wat het is
Leer Vue: code & bouw is een gratis iOS- en Android-app waarmee je Vue.js leert via 42 cursussen en 156 lessen — van templatesyntaxis en databinding tot de Composition API, Pinia, Vue Router en TypeScript, en vervolgens Nuxt 3, testen met Vitest en full-stack-apps. Single-file components compileren op het apparaat, zodat begeleide projecten, programmeermissies en een hands-on Vue Lab op je telefoon werken zonder server. Een AI-mentor in Pro legt code en fouten uit.
In de app
Hoe het eruitziet
De cursus
Wat je leert in de Vue-cursus
42 cursussen en 156 lessen uit de eigen cursussenlijst van de app, van je eerste template tot server rendering en productiepatronen.
Aan de slag met Vue.js
Een introductie tot Vue.js, de Vue CLI en de projectstructuur, templatesyntaxis en databinding.
Reactiviteit en de Composition API
De basis van de Vue 3 Composition API, de script setup-syntaxis, reactiviteit en computed properties, en Vue-directives.
Componenten en formulieren
De basis van componenten en communicatie tussen componenten, slots, provide en inject, formulieren en validatie, en de levenscyclus van componenten.
Hergebruik en afwerking
Vue 3 composables, transities en animaties, foutafhandeling en renderfuncties en JSX.
State en routing
Statebeheer met Pinia, Vuex, routing met Vue Router en geavanceerde routerpatronen, en het verwerken van API's en asynchrone data.
TypeScript, i18n en tooling
TypeScript met Vue 3, internationalisatie, integratie met Storybook en het implementeren en onderhouden van Vue-apps.
Nuxt 3, testen en real-time
Server-side rendering met Nuxt 3, componenttests met Vitest, GraphQL met Apollo en real-time-apps met WebSockets.
Productiepatronen
Prestaties, best practices voor beveiliging, pluginontwikkeling, het publiceren van een componentbibliotheek, progressive web apps en micro-frontends.
Hoe het werkt
Zo leer je Vue in de app
Elke cursus heeft een niveau en elke les na de gratis eerste cursus begint met een gratis preview, zodat je kunt zien hoe een onderwerp eruitziet voordat je besluit verder te gaan.
Begin met Introduction to Vue.js
De eerste cursus is gratis en begint met wat Vue is, het instellen van de omgeving en een Hello Vue-applicatie. Cursussen zijn gelabeld van A1 tot C1, zodat duidelijk is waar je moet beginnen en wat daarna komt.
Bouw en voer componenten uit op je telefoon
Bewerk een single-file component en bekijk meteen de preview. Begeleide projecten laten een app stap voor stap groeien en met App Studio kun je apps met meerdere schermen bouwen, inclusief een router en een store, op basis van kant-en-klare blauwdrukken.
Oefen in het Vue Lab
Ga op zoek naar de bug van de dag, maak in Style Lab een ontwerp na, versla de klok in speed-build-duels of herschrijf een Options API-component in de stijl van de Composition API.
Wat erin zit
Wat de app biedt
42
Cursussen, 156 lessen
Van templatesyntaxis en directives via lifecycle, slots, provide en inject en composables tot Nuxt 3, GraphQL, PWA's en micro-frontends.
20
Begeleide projecten
Laat een app stap voor stap groeien, met single-file components die direct op je apparaat compileren en een foutkaart wanneer een preview niet werkt.
28
Programmeermissies
Oefeningen van makkelijk tot moeilijk, plus App Studio-blauwdrukken voor apps met meerdere schermen, een router en een store.
Lab
Vue Lab
Een reactiviteitsinspecteur, een dagelijkse bugjacht, 12 Style Lab-niveaus, speed-build-duels, een dojo voor de overstap van de Options API naar de Composition API en een My Components-bibliotheek die je als afbeeldingskaart kunt delen.
Sollicitatiegesprek
Vue-sollicitatievragen
Vragen voor sollicitatiegesprekken voor front-end developers, met quizzen, herhaalsessies met flashcards en een spiekbrief die je op elk moment kunt openen.
AI
AI-mentor (Pro)
Stel vragen over een concept of fout, laat je code uitleggen of genereer een aangepaste les over elk onderwerp dat je wilt bestuderen.
Achtergrond
Wat is Vue.js en wat moet je als beginner als eerste leren?
Vue is een JavaScript-framework voor het bouwen van interactieve webinterfaces met componenten: kleine, herbruikbare onderdelen die elk een stukje template, logica en stijl bevatten. Voor beginners is Vue aantrekkelijk dankzij de laagdrempelige start: je kunt beginnen met gewone HTML en een beetje JavaScript en gaandeweg structuur toevoegen. Een logische volgorde is templates en databinding, daarna reactiviteit en componenten, vervolgens de Composition API en pas daarna routing, state management en server rendering.
Reactiviteithet idee dat centraal staat
Je verandert een stukje data en het scherm dat ervan afhankelijk is, wordt vanzelf bijgewerkt. Als je begrijpt welke waarden reactief zijn en wat computed properties en watchers toevoegen, verdwijnt het grootste deel van de verwarring in het begin met Vue.
Options API en Composition APItwee manieren om een component te schrijven
De oudere Options API groepeert code per type, zoals data en methods. De Composition API met script setup groepeert code per feature en maakt herbruikbare composables eenvoudig. Veel tutorials en codebases gebruiken ze nog allebei, dus beide kunnen lezen is een handige vaardigheid.
Pinia, Vuex en de routerwat een echte app toevoegt
Zodra een app meerdere schermen heeft, is routing nodig om ertussen te navigeren en een gedeelde store voor data die door meer dan één component wordt gebruikt. Pinia is de huidige store voor Vue en Vuex is de eerdere variant die nog in veel bestaande projecten voorkomt.
Nuxt en server renderingwanneer vindbaarheid en snelheid belangrijk zijn
Nuxt bouwt voort op Vue om pagina's op de server te renderen, wat de eerste keer laden en de vindbaarheid in zoekmachines verbetert. Meestal leer je dit in een tweede fase, nadat componenten, routing en state vertrouwd aanvoelen.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Je kent een beetje HTML en JavaScript en wilt je eerste framework leren
- Je stapt over van de Options API naar de Composition API, of van Vuex naar Pinia
- Je bereidt je voor op een sollicitatiegesprek voor een Vue.js-ontwikkelaar of je eerste baan als front-endontwikkelaar
- Je leert beter door een kapotte component te repareren dan door erover te lezen
- Je wilt korte sessies die je tijdens je woon-werkverkeer kunt volgen
Niet het juiste hulpmiddel als je
- Je hebt nog nooit HTML of JavaScript gezien — begin dan eerst met een JavaScript-cursus
- Je wilt vanuit je telefoon een productie-app opleveren — daarvoor blijft een laptop de aangewezen plek
- Je verwacht dat alles gratis is: de eerste cursus en previews zijn gratis, met Pro ontgrendel je het volledige lesprogramma
- Je wilt officieel Vue.js-materiaal — dit is een onafhankelijke leerapp
Vragen
Veelgestelde vragen
Wat is de beste manier om Vue.js op een telefoon te leren?
Leer door componenten uit te voeren in plaats van er alleen over te lezen. Leer Vue: code & bouw compileert single-file components op het apparaat, zodat de 20 begeleide projecten, 28 missies en Vue Lab allemaal op je telefoon werken. Korte lessen in 42 cursussen brengen je van templatesyntaxis tot Nuxt 3, met een gratis eerste cursus om te beginnen.
Leert de app de Composition API en Pinia?
Ja. Leer Vue: code & bouw bevat cursussen over de basis van de Vue 3 Composition API, de script setup-syntaxis, composables en statebeheer met Pinia, evenals het oudere Vuex voor bestaande projecten. In Vue Lab kun je in een Options to Composition API-dojo klassieke componenten herschrijven in de moderne stijl.
Wat is het verschil tussen de Options API en de Composition API in Vue?
De Options API groepeert de code van een component per type, zoals data, methods en computed, terwijl de Composition API met script setup de code per functie groepeert en het eenvoudig maakt om herbruikbare composables te gebruiken. Leer Vue: code & bouw leert je de Composition API met script setup en bevat in Vue Lab een Options to Composition API-dojo om klassieke componenten in de moderne stijl te herschrijven.
Moet ik JavaScript kennen voordat ik Vue leer?
Een beetje HTML en JavaScript helpt enorm. Leer Vue: code & bouw is bedoeld voor beginners die de basis kennen en hun eerste framework willen leren. Daarom worden Vue-concepten vanaf het begin uitgelegd, maar JavaScript zelf wordt niet onderwezen. Zijn variabelen en functies nieuw voor je, dan kun je het beste eerst een JavaScript-cursus volgen.
Wat is Vue Lab?
Vue Lab is de oefenomgeving in Leer Vue: code & bouw. Je vindt er een reactiviteitsinspecteur, een dagelijkse bug hunt met een kapotte component, Style Lab-levels waarin je met CSS een doelontwerp nabouwt, speed-build-duels, een Options to Composition API-dojo en een My Components-bibliotheek met alles wat je hebt gebouwd.
Behandelt de app Nuxt 3 en server-side rendering?
Ja. De geavanceerde cursussen in Leer Vue: code & bouw behandelen server-side rendering met Nuxt 3, SSR-streaming met Suspense en full-stack Vue met Fastify en authenticatie, naast componenttests met Vitest en real-time-apps met WebSockets.
Helpt de app bij sollicitatiegesprekken over Vue.js?
Ja. Leer Vue: code & bouw bevat Vue-sollicitatievragen voor functies als front-endontwikkelaar, samen met quizzen, flashcard-herhalingssessies en een spiekbrief. De bijbehorende cursussen behandelen reactiviteit, de levenscyclus, composables en statebeheer — veelvoorkomende onderwerpen tijdens sollicitatiegesprekken.
Is Leer Vue: code & bouw gratis?
De app is gratis te downloaden. De eerste cursus, een preview van elke les, het eerste begeleide project, de eerste missie, de dagelijkse bug hunt, drie Style Lab-levels, quizzen, sollicitatievragen en de spiekbrief zijn gratis. De gratis versie toont advertenties. Met Pro ontgrendel je het volledige lesprogramma en lab, de AI-mentor en het certificaatsexamen, en worden advertenties verwijderd.
Is de app gemaakt door het Vue.js-team?
Nee. Leer Vue: code & bouw is een onafhankelijke leerapp en is niet verbonden aan en niet goedgekeurd door het Vue.js-project. De app leert je Vue.js als open-sourceframework via eigen cursussen en oefeningen.
Is er een certificaat?
Ja. Als je slaagt voor het eindexamen, dat onderdeel is van Pro, ontvang je een certificaat van voltooiing. Het laat zien welk werk je hebt gedaan en is geen erkende kwalificatie. Het komt daarom het best tot zijn recht naast componenten en projecten die je kunt uitleggen.
Welke platforms en talen worden ondersteund?
Leer Vue: code & bouw werkt op iPhone via de App Store (iOS 15.1 of hoger) en op Android via Google Play. De interface is beschikbaar in 22 talen en de app heeft een beoordeling van 4+ in de App Store.
Aan de slag
Bouw vandaag nog je eerste Vue-component
Gratis te beginnen op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS en Android.