VueJS Crashkurs Deutsch für Einsteiger - FULL TUTORIAL (60 Minuten Content)

In diesem Video lernst du wie man eine App mit VueJS erstellt. Wir erstellen eine einfache CRUD Applikation, nämlich eine Todo App. Zum Stylen verwenden wir Tailwind CSS.

⏱️ Timestamps ⏱️
0:00 Voraussetzungen & Alternativen

0:42 Übersicht ToDo App
2:55 NodeJS & Vue Installation
5:20 vue create app
7:55 Projektstruktur
11:50 Components Basics
22:40 Tailwind Installation
24:50 Programmierung Todo App
30:15 props (Parent - Child)
40:30 $emit (Child - Parent)
47:00 v-model directive
49:42 Computed Properties
54:25 Persistierung mit LocalStorage

[codingcrashkurse]

DEPRECATED ACHTUNG DEPRECATED
Für diesen Kurs gibt es seit 16.01.2023 eine Fortsetzung mit der neuen Compositon API und Pinia für das State Management. Der neue und geupdatete Kurs ist hier unten im Link.

Viel Spaß

[badmax]

Sehr geiles Tutorial. Bei deinen Videos bleibt zumindest bei mir deutlich mehr hängen.
Mir fehlt aber das Verständnis für VUE mit PHP und MySQL. zB würde ich gerne eine Tabelle aus der DB auslesen,
die man dann wie die Todos bearbeiten kann. Ich glaube, das Zauberwort heißt (CRUD)
Danke nochmal für deine tolle Arbeit.

[OoZAGoO]

So, habe diesen Crashkurs gerade nicht nur geschaut, sondern auch parallel mitgecodet. Funktionierte alles soweit ganz super. Außer direkt zu Beginn bekam ich eine Fehlermeldung "Component name "Todo" should always be multi-word". Um dies zu beheben musste ich in der Todo.vue den export Name auf z.B: TodoComp setzen. Das reichte schon. In der App.vue waren keine Anpassungen notwendig.
Abschließend noch eine Frage zu VS-Code: Ich habe die Extension installiert, jedoch sieht der Code bei mir etwas andersfarbig aus und auch die Autoformat verhält sich etwas anders. Muss man dort noch andere Dinge einstellen?

[keyboardassassin]

Danke für das Video
War sehr lehrreich!

[eindhovennightmare]

genau mein geschmack. kurz und knackig und hintereinander weg.

[voluweb]

Das ist schön. Nicht nur weil es informativ und auf Deutsch ist, sondern gerade weil die Redensart einfach so natürlich und menschlich ist. Die ganzen englischen Sprecher in den tutorials haben eine Intonation drauf, die ist nur aufdringlich, überheblich und nervig. Ich kann kein passenderes Wort dafür finden. Es ist nicht nur die deutsche Sprache an sich, sondern auch die dazugehörige Mentalität. Britisches Englisch hört sich auch angenehmer an als Amerikanisches. Mehr davon ...

[hidaya.tube]

Bei mir funktioniet leider die Tailwind Installation nicht. Sobald ich das mache kommt immer die fehlermeldung : Cant find module 'tailwind.css' ...und unter assets wird der import von Tailwind gelb unterstrichen und als unbekannt angegeben.Konnte jetzt auch anderweitig keine Lösung finden, selbst auf Stackoverflow nicht. Kann mir da jemand helfen?

[yt]

Danke für den Vue Crash-Kurs zur Auffrischung. Das input Feld könnte übrigens nach dem Absenden noch geleert werden. :-) Ärgerlich war, dass ich mehrmals den Fehler 'Property "xyz" was accessed during render but is not defined on instance.' hatte, der einfach nur durch Schreibfehler verursacht wurde und VS Code bzw. die Vue Erweiterung das nicht erkennt. Da macht die Fehlersuche natürlich "Spaß". Kannst du mal noch eine aktuelle Discord Einladung posten?.

[Excess-qnqh]

Vielen Dank !!
Ein sehr gutes Video ... OHNE Klimbimmusik im Hintergrund und ohne diese ( mich mich nervigen ) Selbsdarstellungen, die in vielen Tutorials 1/4 vom Bild vergeuden :) ..

[peterlustig]

lts bedeutet long term support,
steht sogar unten dabei. nicht long term & stable ;)

[ey]

Ich habe meine Key Value Paare in einemseparaten json datei gespeichert und habe sie mit meinem vue datei eingebunden kriege immer die fehlermeldung das sie nichtangewendet aber definiert ist woran liegt es.

[Meinungsmacher]

Kannst du mir erklären warum props ein Array ist, während data dafür eine Funktion ist und methods ein Objekt? Wenn man sowas einheitlich macht (also von den Entwicklern von Vue mein ich jetzt) isses so viel logischer und Sinnvoller... aber gut... die Javascript Menschen sind Anders^^

[almirh]

Hi und vielen Dank für das Video, für mich ist es sehr verständlich und funktioniert bis jetzt alles. Bietest du eigentlich auch Programmierkurse an im Sinne von Projektaufgaben mit Support, wenn ja, was würde das kosten? Hättest du überhaupt Kapazitäten und Lust auf so etwas? Ich möchte mich in der Vue Library weiterbilden und in mit Laravel verwenden. Könntest du dir so etwas vorstellen? Schöne Grüsse und nochmals Dank für das Tutorial hier!

[danieste]

Klasse tutorial, aber fehlt am Schluss noch etwas im LocalStorage teil? Die Daten respektive todo liste verschwindet nach dem reload (sind aber im gesetzt wenn ich sie mit console.log() herauslese in der mount() function

[piet]

Ein Github Project mit Fertigem Projekt wäre Hilfreich :)

[generalrodcocker]

ja scheiße, geht nicht. error Component name "Todo" should always be multi-word

[diedreibeiden]

Hat noch jemand das Problem dass die Todos alle Grün sind obwohl manche done = true/false haben?
:class="{'bg-green-600': this.todo.done, 'bg-red-600': !this.todo.done}"