Vue.js 2 Akademie: So lernst du Vue Schritt für Schritt | Chris Dixon | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Vue.js 2 Akademie: So lernst du Vue Schritt für Schritt

teacher avatar Chris Dixon, Web Developer & Online Teacher

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

102 Einheiten (8 Std. 30 Min.)
    • 1. Willkommen!

      2:29
    • 2. Was ist Vue.js und warum sollte ich es verwenden?

      2:16
    • 3. Visuelle Studioinstallation

      1:51
    • 4. Abschnittseinführung: Vue Grundlagen

      0:30
    • 5. So kannst du den Projektstarter herunterladen

      2:32
    • 6. So installierst du Vue.js

      3:05
    • 7. Die Vue-Instanz und das Datenobjekt

      7:28
    • 8. Vorlagen und das virtuelle DOM

      3:31
    • 9. Zweiseitige Datenanbindung mit dem V-Modell

      3:08
    • 10. Event-Handhabung und Methoden

      5:46
    • 11. Listen-Rendering

      2:54
    • 12. Bedingtes Rendering in Vue

      5:19
    • 13. Anbindung von Elementen an Eigenschaften

      4:11
    • 14. Anbindungsstile

      4:48
    • 15. Vue Syntax-Kürzel

      2:42
    • 16. So exportierst du Text und HTML

      6:25
    • 17. V-if oder V-Show

      3:10
    • 18. Verwendung von Javascript-Ausdrücken

      4:22
    • 19. Abschnitts-Outtro: Vue Grundlagen

      0:32
    • 20. Abschnittseinführung: Tiefere Einsichten in Vue

      0:39
    • 21. So fügst du einen Fortschritts-Balken ein

      7:46
    • 22. Berechnete Eigenschaften

      8:57
    • 23. Watchers

      3:50
    • 24. Wichtige Events und Modifikationen

      3:21
    • 25. Filter

      6:08
    • 26. Mehr zu Schleifen: Schlüssel und Indexzahlen

      5:27
    • 27. So verwendest du mehrere Vue Instanzen

      6:25
    • 28. Looping mit Objekten

      6:56
    • 29. So fügst du deine Navigations-Links ein

      6:16
    • 30. So greifst du extern auf Vue Instanzen zu

      4:32
    • 31. Vue Instanz Eigenschaften und Methoden

      4:50
    • 32. Elementenreferenz mit Ref

      4:45
    • 33. So verwendest du String-Vorlagen

      7:06
    • 34. Der Vue Lifecycle

      5:40
    • 35. Vue Lifecycle Hooks in Aktion

      6:51
    • 36. Abschnitts-Outtro: Tiefere Einsichten in Vue

      0:39
    • 37. Abschnittseinführung: So erstellst du Tools und Workflow

      0:37
    • 38. So installierst du Nodes und NPM

      4:08
    • 39. So erstellst du Scaffolding mit dem Vue-Cli

      8:06
    • 40. So erkundest du dein Projekt-Layout und baust Tools

      9:26
    • 41. So verwendest du das Datenobjekt mit einzelnen Dateivorlagen

      7:49
    • 42. Abschnitts-Outro: So erstellst du Tools und Workflow

      0:19
    • 43. Abschnittseinführung: Einführung in Komponenten

      0:41
    • 44. Was sind Komponenten?

      5:07
    • 45. So registrierst du globale Komponenten

      10:57
    • 46. So registrierst du lokale Komponenten

      5:26
    • 47. So erstellst du Komponenten für einzelne Dateien

      8:37
    • 48. So fügst du die Kartenvorlagenkomponente hinzu

      9:07
    • 49. So überträgst du Daten an übergeordnete Komponenten

      9:21
    • 50. Dynamische Komponenten

      2:49
    • 51. So erstellst du zusätzliche Kartenkomponenten

      5:53
    • 52. So erstellst du Texteingabe-Komponenten

      9:40
    • 53. So erhältst du Daten aus der Texteingabe

      4:38
    • 54. So erstellst du Textübertragungskomponenten

      3:38
    • 55. So lieferst du Daten mit Props

      5:37
    • 56. So erhältst du Komponenten aufrecht

      2:26
    • 57. So sondierst du CSS-Stile

      7:40
    • 58. Prop-Validierung

      5:01
    • 59. So lieferst du Prop-Daten an ein Stil-Objekt

      3:19
    • 60. Einführung in Slots

      9:38
    • 61. Slot Scope und Fallback-Inhalte

      4:57
    • 62. Benannte Slots

      3:30
    • 63. Abschnittsoutro: Einführung in Komponenten

      0:42
    • 64. Abschnittseinführung: Mehr zu Komponenten und Firebase Storage

      0:37
    • 65. So richtest du Firebase ein

      6:55
    • 66. So erstellst du die ImageUpload-Komponente

      6:40
    • 67. So lädst du Bilder auf Firebase hoch

      9:44
    • 68. Bildvorschau

      4:11
    • 69. Lade FortschrittsBalken und $emit Dateidaten hoch

      8:54
    • 70. Image Output-Komponente

      9:09
    • 71. So lädst du Bilder von Firebase herunter

      6:15
    • 72. So richtest du den Image-Button ein

      7:20
    • 73. Textoptionen-Menü: Schriftgrößen

      8:00
    • 74. Textoptionen-Menü: Textausrichtung

      5:03
    • 75. Textoptionen-Menü: Schriftart und Gewicht

      9:56
    • 76. So entfernst du den Image-Button

      4:21
    • 77. So lieferst du Daten mit Callbacks

      6:40
    • 78. So machst du Bilder verschiebbar

      5:48
    • 79. So stellst du die CardInsideLeft-Komponente fertig

      4:50
    • 80. So stellst du die CardInsideRight-Komponente fertig

      2:48
    • 81. So stellst du die CardBack-Komponente fertig

      3:39
    • 82. Einführung in den Event-Bus

      7:26
    • 83. So fügst du Events zum Event-Bus hinzu

      6:51
    • 84. So erhältst du Events aus dem Event-Bus

      13:05
    • 85. So fügst du Mix-Ins hinzu

      6:51
    • 86. Abschnitts-Outro: Mehr zu Komponenten und Firebase Storage

      0:35
    • 87. Abschnittseinführung: Übergänge und Animationen

      0:31
    • 88. Kurseinheiten zu Übergängen

      2:58
    • 89. So fügst du CSS-Übergänge hinzu

      6:47
    • 90. So fügst du CSS-Animationen hinzu

      5:58
    • 91. Komponenten-Übergänge und Übergangsmodi

      3:23
    • 92. Einführung in Javascript Hooks

      2:03
    • 93. Javascript Hooks in Aktion

      8:51
    • 94. Verbindung von Animationen und Übergängen

      4:59
    • 95. Benutzerdefinierte Kurseinheiten zu Übergängen

      3:14
    • 96. Anfängliche Rendering-Übergänge

      3:07
    • 97. Element-Übergänge und Tasten

      4:45
    • 98. Gruppen-Übergänge

      5:43
    • 99. V-move Kurseinheit und dynamische Übergange, Namen

      4:06
    • 100. Abschnitts-Outro: Übergänge und Animationen

      0:32
    • 101. Vielen Dank

      1:06
    • 102. Folge mir auf Skillshare

      0:23
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

2.024

Teilnehmer:innen

1

Projekt

Über diesen Kurs

*** UPDATE!

Vue 3 wurde und dieser Kurs durch eine neue Version ersetzt:

https://www.skillshare.com/classes/In-Depth-Vue-3-For-Anfänger/1881663970

***

Bringe deine HTML-, CSS und HTML, auf die nächste Stufe und lernst eines der derzeit your Javascript-Frameworks zu lernen!

Wenn du mit Vue.js oder Javascript-Bibliotheken und Frameworks im Allgemeinen nicht vertraut bist, dann sind einige der Fragen, die du möglicherweise stellst:

Was ist Vue.js?

Und warum sollte ich es an erster Stelle lernen?

Vue.js ist ein wirklich Spaß und einfach zu verwende Javascript-Framework für die Erstellung von Benutzeroberflächen

Der Kern des Rahmens ist sehr kurz und schnell und in Projekten beliebiger Größe

Vom einfachen Abbau von Webseiten oder einer Anwendung, um einen Teil zu steuern, wie zum Beispiel Hinzufügen neuer Komponenten,

Direkt bis zu mittleren oder großen einseitigen Anwendungen

Unter der Berücksichtigung der leichten Größe des of ist immer noch vollgepackt mit Funktionen, die du während dieses Kurses lernst.

Während des Kurses erstellst du 2 unterhaltsame, spannende und anspruchsvolle Projekte, um alles anzuwenden, was du sofort lernst.

Wir beginnen mit einer guest in der Benutzer ihren Namen zu einer guest hinzufügen können. Dies ist eine einfache App, aber führt dich durch alle Grundlagen von Vue.js:

  • Datenbindung auf zwei Arten
  • Eventmanagement
  • Vorlagen und das virtuelle DOM
  • Liste und bedingte Rendering
  • Binding von Attribute und Stilen
  • Die Vue
  • Javascript
  • Instance : Daten, Data, Data, Methoden, Filter usw.
  • Looping und Filter
  • Refs und andere instance und Methoden
  • Vue lifecycly
  • Und noch viel mehr!

Du wirst dann diese Kenntnisse aufbauen, indem du eine greeting erstellst, bei der der Benutzer ihre eigene benutzerdefinierte Grußkarte erstellen und bearbeiten kann. Sie können ihren eigenen Text und Bilder hinzufügen, um eine personalisierte Karte zu erstellen.

Dieses Projekt stellt weitere Konzepte vor:

  • Komponenten (lokale, globale und einzelne Datei)
  • Die Vue CLI für erstellende Projekte mit Bauwerkzeugen wie Webpack und Babel
  • Notieren und NPM
  • Übertragen von Daten mit $
  • Speichern und Abruf von Bildern von Firebase
  • Requisiten und Requisiten
  • Slots und Schlitz
  • Und die Menüoptionen zum Ändern von Schriftarten und Stilen
  • Ereignisbus
  • Mixins
  • Und noch viel mehr!

Also bist du bereit, einen der aktuellsten und anstehenden Javascript-Frameworks zu lernen?

Nimm mich jetzt an und ich freue mich, dich auf Bord zu haben!

Triff deine:n Kursleiter:in

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Willkommen!: Willkommen beim Kurs „Vue.js Academy“. Ich freue mich, dich bei mir zu haben. Mein Name ist Chris, und ich bin ein Webentwickler und auch ein erfahrener Online-Kursteilnehmer, der Tausende von zufriedenen Studenten unterrichtet. Vue.js ist eines der aufstrebendsten JavaScript-Frameworks, die heute verfügbar sind. Es ist auch eine der Spaß zu lernen und es ist voll mit vielen erstaunlichen Funktionen, die es Ihnen ermöglichen , beide kleinen Websites bis hin zu komplexen einseitigen Anwendungen zu erstellen. Warum also diesen Kurs gegenüber anderen verfügbaren Vue.js Kursen wählen? Nun, dieser Kurs verfolgt einen projektbasierten Ansatz. Wir werden genau sehen, wie jedes Konzept, das Sie lernen, sofort in reale Projekte passt. Der Kurs ist auch anfängerfreundlich. Wir beginnen damit, eine Gästelisten-Anwendung zu erstellen, wo wir mit den Grundlagen beginnen werden. Ich habe eine [unhörbare] Starter-Vorlage für das erste Projekt zur Verfügung gestellt , damit wir direkt lernen können, was Vue.js zu bieten hat. Während dieses Projekts werden Sie zuversichtlich, wie Vue funktioniert, und auch die Kernkonzepte wie Bindung von Daten, Methoden, Computereigenschaften und vieles mehr. Sie erfahren auch mehr über die Lebenszyklusphasen von Vue, die wir nutzen können. Projekt 2 baut auf dem auf, was wir bisher bereits gelernt haben. Wir stellen Ihnen vor, Tools zu erstellen und unseren Workflow zu verbessern , indem wir die neuesten Technologien wie Vue CLI, Webpack und Bubble verwenden. Dieses Projekt wird eine Grußkartenanwendung sein, bei der der Benutzer seine eigene personalisierte Grußkarte bearbeiten und erstellen kann . Zusammen mit diesem ist ein lustiges Projekt zu erstellen, werden Sie so viele Techniken lernen, wie die Verwendung von Komponenten und wie Sie Daten zwischen ihnen zusammen mit der Integration Ihrer App in Firebase für die Image-Speicherung. Außerdem werden wir das Hinzufügen von Animationen und Übergängen zu Ihren Apps behandeln , um sicherzustellen, dass sie wirklich hervorstechen. Alles, was Sie lernen, wird sofort in die Praxis umgesetzt, um Ihnen ein besseres Verständnis dafür zu geben, wie sie alle in echte Anwendungen passen. Worauf wartest du? jetzt auf die Schaltfläche Anmelden und erfahren Sie eines der heißesten JavaScript-Frameworks, die heute verfügbar sind. 2. Was ist Vue.js und warum sollte ich es verwenden?: Wenn Sie mit vue.js oder JavaScript-Bibliotheken und Frameworks im Allgemeinen nicht vertraut sind, einige der Fragen, die Sie vielleicht stellen, was ist vue.js und warum sollte ich es überhaupt lernen? Nun, vue.js ist ein wirklich lustiges und einfach zu verwendendes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Der Kern des Frameworks ist sehr leicht und schnell, und es kann in Projekten jeder Wissenschaft verwendet werden, vom einfachen Ablegen in eine bestehende Website oder Anwendung bis hin zur Steuerung eines kleinen Teils, wie zum Beispiel das Hinzufügen neuer Komponenten, bis hin zu mittelgroßen oder großen einseitigen Anwendungen. In Anbetracht der geringen Größe des vue.js Kerns ist es immer noch voll mit vielen Funktionen, die Sie während dieses Kurses erfahren werden. Der Kern kann auch erweitert werden, um weitere Funktionen wie Frontend-Routing und Zustandsverwaltung hinzuzufügen . Wenn Sie zuvor Websites erstellt haben, sollten Sie bereits mit HTML, CSS und JavaScript vertraut sein , die die Bausteine von vue.js Anwendungen sind. Das bedeutet, dass Sie Ihre vorhandenen Fähigkeiten nutzen können, um noch schneller zu lernen. Vue.js verarbeitet nur die View-Ebene, was bedeutet, dass Sie es frei sind, sie mit einem der Bibliotheks-Backends zu integrieren, so dass es wirklich einfach und flexibel zu übernehmen ist. Wenn Sie andere Frameworks oder Bibliotheken wie React verwendet haben, viele der Kernkonzepte vertraut, z. B. die Verwendung eines virtuellen DOM und das Erstellen wiederverwendbarer Komponenten. React ist auch toll zu verwenden, aber meiner Meinung nach ist vue.js viel einfacher zu beginnen, und es wird auch gesehen, um React bei bestimmten Leistungstests zu übertreffen. Dies sind nur einige der Gründe, warum vue.js einen enormen Anstieg der Popularität erlebt hat und auch in Zukunft ein noch größerer Spieler wird. Jetzt kennen wir einige der Vorteile der Verwendung von vue.js, jetzt lassen Sie uns Visual Studio-Code-Setup bekommen, so dass wir direkt in die Erstellung unseres ersten Projekts springen können. 3. Visuelle Studioinstallation: Für diesen Kurs benötigen wir ein paar Dinge, um aufzustehen und zu laufen. Zuerst brauchen wir einen Texteditor. Möglicherweise haben Sie bereits eine Präferenz oder eine Präferenz, die Sie bereits verwenden. Für diesen Kurs verwende ich Visual Studio Code , der ideal für JavaScript-Codierung ist und auch ein integriertes Terminal hat, das wir später im Kurs benötigen werden. Sie können jeden Texteditor verwenden, den Sie mögen, aber hier sind einige beliebte Texteditor-Optionen, wie Atom, Klammern , WebStorm und natürlich Visual Studio Code. Wenn Sie bereits einen von diesen haben und einen Webbrowser haben , können Sie mit dem nächsten Video fortfahren. Wenn nicht, würde ich empfehlen, dass Sie zu code.visualstudio.com gehen und den Download-Anweisungen für Ihre Plattform folgen. Sobald Sie dies getan haben, Comeback und wir fügen einige Plug-ins hinzu, um ihnen bei der Arbeit mit Vue.js zu helfen. Sobald die Installation abgeschlossen ist, werde ich ein Plug-In hinzufügen, um Vue.js zu Code-Snippets und auch einige Syntaxhervorhebung hinzuzufügen . Wenn Sie Ihren Texteditor öffnen und auf das Erweiterungssymbol unten in den Optionen klicken , werden Sie sehen, dass ich bereits Vue 2 Snippets installiert habe. Um dies zu installieren, können Sie auf die Suchleiste klicken und nach Vue 2 suchen. Was ich verwenden werde, ist Vue 2 Snippets, die durch [unhörbar] ist, dann klicken Sie auf die Installationstaste und Sie sind gut zu gehen. Schließlich benötigen Sie auch einen Web-Browser. Ich würde Chrome von Google empfehlen, aber Sie können jeden Webbrowser verwenden, den Sie mögen. Dies ist es für die erste Einrichtung. Lassen Sie uns nun in die Erstellung unserer ersten Vue.js Anwendung springen. 4. Abschnittseinführung: Vue Grundlagen: Wie bei all meinen Kursen verschwende ich gerne keine Zeit damit, unsere Hände schmutzig zu machen und echte Projekte zu bauen. Dieser Kurs ist nicht anders und wir werden beginnen, indem wir eine Gästelisten-Anwendung erstellen, in der der Benutzer seine Interessen in einem Ereignis registrieren und den Namen der Gästeliste hinzufügen kann . Das Projekt wird relativ einfach sein, aber wir werden alle Grundlagen abdecken. Sie müssen anfangen, vue.js-ups zu bauen. Lasst uns weitermachen und loslegen. 5. So kannst du den Projektstarter herunterladen: Dieses Video ist ein Starterprojekt , das wir verwenden werden, um direkt in vue js zu springen. Ich möchte meine herunterladen und auf dem Desktop für einfachen Zugriff platzieren. Aber Sie können Ihre überall platzieren. Solange es für Sie bequem ist. Jetzt sollten Sie Ihren Texteditor bereits eingerichtet haben. Ich werde Visual Studio Code öffnen und dann, sobald es geöffnet wird, ziehe ich den Projekt-Starter in den Texteditor. Dann werfen wir einen kleinen Blick auf das, was enthalten ist. Wenn wir die index.html öffnen, ist es nur eine grundlegende HMO Daten. Im Kopfbereich haben wir nur einige grundlegende Meta-Tags, den Titel. Wir haben auch einige Links zu Bootstrap. Wir werden dies nur für einige grundlegende Styling und Layout verwenden. Der Hauptteil des Projekts beginnt mit einem Hauptdiv, das eine I