Dieses Tutorial soll den perfekten und einfachen Einstieg in die Welt des Vue JS Frameworks bieten. Du kannst das Wissen über Vue JS 3 auch in Vue JS 2 einsetzen, da wir uns hier auf die Composition API fokussieren. Die Setup API ist, wenn man die Composition API beherrscht, leicht erlernbar, da es sich “eigentlich” stark an Javascript anlehnt und leicht verständlich ist👍🏽

Für den Einstieg in Vue JS entwickeln wir eine eigene, kleine Todo App auf Basis von Vue JS – zunächst ohne API. Wir gehen Schritt für Schritt die Anforderungen durch um mit Vue JS erfolgreich zu starten! Ebenfalls erklären wir dir die einzelnen Bestandteile, was sie bedeuten und wie Du sie einsetzt.

An wen richtet sich dieses VueJS Tutorial?

Grundsätzlich beschränkt sich dieses Tutorial auf das VueJS Framework. Dies bedeutet, dass Kenntnisse in der Javascript bzw. HTML Entwicklung bestehen sollten. Falls du deine HTML Kenntnisse auffrischen oder dich ganz neu damit beschäftigen möchtest, dann habe ich hier die perfekten HTML Anfänger/Auffrischkurse:

Sollte bislang eher prozedual statt objektorientiert entwickelt worden sein, empfehle ich vorab ein PHP OOP Tutorial für Einsteiger. Falls die beiden Begriffe jeweils unbekannt sind, empfehle ich meinen anderen Kurs Einstieg in die Programmierung mit PHP.

Lieber ein VueJS Video Tutorial ansehen?

Falls Videos eher zu Deinen Präferenzen gehört, haben wir einen Vue JS Onlinekurs aufgesetzt.

 

Warum Vue? Vorteile auf einem Blick

  • In der min-Variante (also die komprimierte) nur ganze 20 KB klein
  • Extrem schnelle Seiten dank virtuellem DOM
  • Bekanntes HTML, CSS und natürlich JavaScript verwendbar
  • Geringer Aufwand, steile Lernkurve und Effizienz für große Projekte
  • Nur das was man braucht, also relativ wenig Overhead

 

Was ist Vue JS

Bei Vue.js handelt es sich allgemein gesagt um ein (Frontend-)Framework für Webanwendungen, mit dem man auf Basis von Javascript komponentenorientiert entwickeln kann. Viele Magazine im Netz sind der Meinung, dass es im Vergleich zu anderen Frameworks den Vorteil hat besonders schlank zu sein. Die Performance des Frameworks ist zudem besonders gut. Zudem ist Vue anpassungsfähig, einfach erweiterbar und universell einsetzbar. Also lasst uns loslegen und in diesem Tutorial die Eckpfeiler von Vue JS beleuchten.

 

Vue JS Voraussetzungen

 

#1 HTML5 kennen, können und beherrschen

Um erfolgreich Vue JS zu lernen sind einige Voraussetzungen zu erfüllen, wie etwa das Lernen von HTML. Wir empfehlen hierbei zB. die Grundlagen von HTML-Einfach.de oder für intensivere Einarbeitung unseren HTML Onlinekurs (Aktionscode SCHNELLSTARTER für 20€ Rabatt).



 

#2 Modernes JavaScript (zB. ECMA-Script bzw. ES6,…)

Wer sich bei “HTML5 kennen” gerade noch dachte, ja das kriege ich sehr gut hin, jetzt aber bei ECMA-Script ausgestiegen ist, dem empfehlen wir an dieser Stelle die JavaScript Grundlagen von SelfHTML durchzuarbeiten und mit dem ein oder anderen Projekt bereits Erfahrungen mit (modernem) JavaScript zu sammeln.

Wir haben aber auch hierfür eine YouTube Playlist auf unserem ständig aktualisierten YouTube Kanal erstellt, mit deren Hilfe ihr Euch noch einmal einen Überblick über die modernen JavaScript Grundlagen verschaffen könnt.

 

Warum überhaupt ein Framework?

Standards, Werkzeugkästen und Modernes JS

Aus welchen Blickwinkeln man es auch betrachtet, Frameworks helfen uns enorm in den Punkten Struktur, Standards und (Abwärts-)Kompatibilität. Denn abgesehen von dem Vorteil das Rad nicht ständig neu erfinden zu müssen, helfen die Standards von Frameworks vor allem in der Teamarbeit. Sie bringen Struktur, Standards und Kontinuität in unsere Anwendungsentwicklung. Modernes JavaScript wird schon seit einiger Zeit aus genau diesem Grund durch immer neue Frameworks angereichert. Doch ist es dabei besonders wichtig, vor allem auf ein Framework zu setzen, welches große internationale Anerkennung, eine lebhafte Community und somit auch viele Erweiterungen um sich scharen kann.

Frameworks können also auch als Werkzeugkästen gesehen werdne. Solche wie React, Angular JS oder eben Vue JS sind mittlerweile echte Vorreiter geworden.

 

Web Components

In den Anfangszeiten von HTML, und das bildet noch heute die Grundlage, waren Entwickler durch einige, wenige Elemente beschränkt. Diese waren div, h1, h2, h3,... sowie p oder auch table bzw. form. Hiermit wird vor allem deutlich, dass der Ursprung “Web-Seiten” dem Umstand entsprang, dass die HTML Dokumente maßgeblich strukturierte Dokumente mit Überschriften (h1, h2, h3,…), Absätzen (p) und diversen Inhaltselementen (div) waren. Als Facebook, Google usw. damit begonnen nicht mehr nur ihr Unternehmen als Webseite vorzustellen sondern das Web als eine Art Anwendungsplattform verstanden, waren diese Elemente nicht mehr genug, die WebComponents waren geboren. Diese wurden von W3C (dem World Wide Web Consortium) maßgeblich vorangetrieben. Die WebComponents sollten sowohl Standard-Komponenten enthalten als auch eigene, von Entwicklern entworfene Komponenten im Browser ermöglichen. Doch als Organisation waren sie profitorientierten Unternehmen in der Umsetzung nicht schnell genug, weshalb eine nicht-native (also nicht bereits im Browser eingebaute Funktionalität) andere Variante gefunden werden musste. React und Angular waren geboren, Vue JS kam nach und dutzende andere Frameworks folgten dem Siegeszug.

 

Dein perfekter Start mit Vue JS

Wir bieten mit unseren Onlinekursen deinen perfekten Start in das Framework!

Der Start mit Vue JS

Minimalaufwand der Initialisierung

Etwas zu initiieren meint in der Fach- sowie Umgangssprache so viel wie beginnen, ins Leben rufen oder erschaffen.
Grundsätzlich muss darauf aufmerksam gemacht werden, dass beim Einsatz von Vue JS nur die Einbindung des Vue JS Core Quellcodes, welcher sehr klein ist, über das <script>-Tag notwendig ist. Anschließend muss new Vue() initialisiert werden. Wie wir weiter vorne gelesen und gelernt haben agiert Vue in irgendeiner Form mit den (HTML) Elementen im Browserdokument und ist JavaScript basiert, daher müssen wir bei der Initialisierung von new Vue() (hier bedeutet new genau so viel, wie einige hier vermuten werden: eine neue Vue Instanz soll initialisiert werden).

Nun sind wir startklar für den ersten Inhalt unserer Anwendung.

Erstes Projekt erstellen

Kläre bitte, ob “Node JS” und “npm” auf deinem Rechner installiert sind, indem Du “node” und “npm” in die Kommandozeile eingibst. Dann können wir den npm Init Befehl für Vue JS ausführen, der dir alle wichtigen Bestandteile von Vue JS installiert.

npm init vue@latest

Es kann sein, dass Du beim ersten Mal gefragt wirst, ob Du create-vue@x.y.z installieren möchtest. Das muss sein, da dies das npm Package für das Erzeugen neuer Vue JS Anwendungen ist.

Need to install the following packages:
  create-vue@3.6.1

Tippe einfach “y” für Yes und die Installation beginnt. Gib dann im weiteren Prozess den Namen “hallo-todo” ein, so wird unser Projekt heißen. Alles übrige lehnst Du mit der Auswahl “No” ab.

Vue.js - The Progressive JavaScript Framework

√ Project name: ... hallo-todo
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Wechsle dann in den neu erstellten Ordner, führe “npm install” aus und danach starten wir den Development Server mit “npm run dev”.

cd hallo-todo
npm install
npm run dev

Du kannst nun, je nachdem welche Angabe deine Konsole “ausspuckt”, unter http://localhost:5174 deine Anwendung im Browser aufrufen. Du findest die Portangabe in deiner Konsole:

VITE v4.1.4  ready in 598 ms

➜  Local:   http://localhost:5174/
➜  Network: use --host to expose
➜  press h to show help

Die erstellte App.vue ist in der Setup API geschrieben. Das erkennst Du daran, dass sich das Wort “setup” in der Datei befindet. Und zwar ganz oben: <script setup>

Wir bauen nun die App.vue in die Composition API um, da diese zum Einstieg “leichter” zu lernen ist. Die Datei sieht dann (außer Style) so aus:

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
export default {
  components: {
    HelloWorld, TheWelcome
  }
}
</script>

Neue Komponente anlegen

Jetzt geht es ans Eingemachte. Wir legen eine neue Komponente im Ordner ./src/components/TodoList.vue an.

Nutze mit dem Vue JS Extensions Pack in Visual Studio Code den Snippet <vue>, sodass Du den folgenden Dateiinhalt vorfindest:

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

Dies ist der übliche “Single File Component” (eine Datei-Komponente) Aufbau, sprich alle drei Bereiche einer Komponente in einer Datei. Das Template, also der Ort an dem die Oberfläche entwickelt wird, der Bereich Script, dem die Logik vorbehalten ist und am Ende noch Style, für das Styling.

Datenausgabe

Im Template einer Vue JS Komponente kannst Du ganz einfach auf Variablen zugreifen. Variablen, so nenne ich sie jetzt einfach mal, können data, props, computed etc. sein, welche teilweise im nachfolgenden Abschnitt erklärt werden. Diese Daten und Variablen können direkt im Template mit geschweiften Klammern ({{ nameDerVariable }}) aufgerufen werden.

data und props

Wir haben nun im vorigen Kapitel unser Projekt erstellt und werden nun die Todo Elemente unserer TodoList abspeichern. Denn es macht wenig Sinn und Freude, wenn wir nun einfach eine Liste mit ul erstellen würden und diese Liste nicht dynamisch erzeugt werden würde.

In Vue.JS sind “data” und “props” zwei äußerst wichtige Konzepte, die bei der Erstellung von Komponenten verwendet werden.

“Data” bezieht sich auf die in einer Komponente gespeicherten Daten und wird in der Komponente selbst definiert. Sie können Daten im “data”-Objekt als Eigenschaften speichern, und diese Eigenschaften können dann im Komponententemplate verwendet werden, um dynamische Inhalte anzuzeigen. “Props” (Abkürzung für “Properties”) sind Attribute, die an eine Komponente (also von “außen”) übergeben werden, wenn diese verwendet wird. Sie ermöglichen es, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente weiterzugeben.

Vue JS data

Das Data Objekt selbst liegt, wie wir nun wissen, innerhalb einer Komponente und speichert Daten. Aus genau diesem Grund speichern wir die Todos in einem Array des data Bereichs ab. Dieses data stellt die zentrale Stelle zur Speicherung von Daten bereit. Speicherung meint an dieser Stelle jedoch nicht den Umstand, dass zB. beim Schließen des Browserfensters alle Daten inkl. Änderung wieder zur Verfügung stehen. Speichern meint in diesem Kontext lediglich das Ablegen von Daten pro Komponente oder allgemein pro Vue Instanz. Du erinnerst Dich an die erste Seite, wo wir uns bereits mit dem Instanz Begriff beschäftigt haben?

Merksatz: Data wird hierbei als Funktion, welche ein Objekt zurückgibt deklariert. Das heißt, dass die Definition des data Bereichs (oder auch der data-Funktion) wie folgt falsch wäre:
// falsch:
data: {
vorname: 'Andreas',
nachname: 'Pabst'
}

Richtig ist es daher wie folgt:

// richtig
data: function() {
return {
vorname: 'Andreas',
nachname: 'Pabst'
}
}

Und so richtig modern wäre es, wenn wir die Arrow Functions (siehe Vue JS Arrow Functions) hierfür nutzen würden.
// auch richtig, und zwar richtig modern
data: () => ({
vorname: 'Andreas',
nachname: 'Pabst'
})

Um nun eine erste Komponente zu erstellen, wäre der folgende Syntax Beispielhaft:

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

In diesem Beispiel wird eine neue Komponente erstellt, die eine Eigenschaft “message” im Objekt “data” enthält. Diese Eigenschaft wird im Template der Komponente verwendet, um den Wert “Hello, Vue!

“Props” (Abkürzung für “Properties”) sind Attribute, die an eine Komponente übergeben werden, wenn diese verwendet wird. Sie ermöglichen es, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente weiterzugeben.

Vue JS props

Im Vergleich zu data sind unter props ebenfalls Daten zu verorten, jedoch solche, die an diese Vue Instanz oder Komponente übergeben werden könnten. Das heißt also in diesem Fall, dass im Gegensatz zu data, wo wirkliche Daten zB. mit Initialwerten liegen, welche auch verändert werden können, es bei props so ist, dass die Elternkomponente (oder Instanz) jeweils Daten an die Kindkomponente übergibt, und bei der Kindkomponente nur deklariert wird, welche props mit welchen Datentypen etc. übergeben werden könnten.

In deinem Projekt siehst Du die “HelloWorld.vue” Datei. Die hat schon solche Properties, welche dann im Template verwendet werden:

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

Du siehst, dass hier zwar wieder die Setup API am “Werk” ist, aber auch gleich, wie <h1 class="green">{{ msg }}</h1> hier der Inhalt der “msg” Property ausgegeben wird.

Fügen wir all das Wissen zusammen und kehren zu unserer TodoList.vue Komponente zurück, speichern wir unsere Todo Elemente nun ganz einfach wie folgt:

<template>
     <div>
          {{todoElemente}}
     </div>
</template>

<script>
export default {
     data: () => ({
          todoElemente: [
               {
                    "id": 1,
                    "title": "Vue JS Tutorial durcharbeiten",
                    "is_done": true
               },
               {
                    "id": 2,
                    "title": "Den Vue JS Kurs auf codercampus.de kaufen",
                    "is_done": false
               },
               {
                    "id": 3,
                    "title": "Vue JS beherrschen",
                    "is_done": false
               },
          ]
     })
}
</script>

Du wirst auf deinem Bildschirm unter https://localhost:5174 nun nach wie vor “nur” die Hello Vue Ansicht sehen. Das liegt daran, dass wir die TodoList.vue noch nicht in die App.vue importiert haben und registriert. Hierzu passen wir die App.vue Datei ein klein Wenig an:

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TodoList />
  </main>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import TodoList from './components/TodoList.vue'
export default {
  components: {
    HelloWorld, TodoList
  }
}
</script>

Das Registrieren einer Komponente, bevor wir sie verwenden, ist übrigens immer nötig. Dazu importieren wir sie als Modul import TodoList from './components/TodoList.vue' und registrieren sie im components: { } Bereich. Es sollte also so aussehen:

Vuejs Anfänger und Einsteiger Tutorial Vue JS 3

Das angelegte Array wird “einfach” nur ausgegeben. Wenn Du jetzt noch für jedes Element im Array ein HTML Element anzeigen willst, braucht man eine for-Schleife. Dies behandeln wir im nächsten Kapitel.

Weiter geht’s!

Bisher in den vorigen Tutorial Kapiteln haben wir eine App erstellt, die TodoList Komponente erstellt und registriert und abschließend importiert. Jetzt ist es nur noch an uns gelegen, die einzelnen Elemente mit einer v-for Schleife im Template auszugeben und dann noch eine coole Checkbox zu integrieren.

v-for Schleife

Eine for Schleife ist wie in der IT üblich eine Iteration über ein Array. In Vue.JS kannst Du hier für jedes Element in einem Array ein HTML Element anzeigen lassen. Wichtig nur dabei ist, dass quasi jedes HTML Element mit einem eindeutigen :key versehen wird. Dadurch “weiß” Vue JS, welches Element vom anderen zu Unterscheiden ist. Der :key muss auch eindeutig sein, da sonst einfach gesagt die Referenz auf das Element nicht mehr eindeutig ist und Vue JS durcheinander kommt, welches Element sich nun verändert. :key=”…” ist die Kurzschreibweise für v-bind:key=”…”. Das alles ist natürlich technisch äußerst komplexer, aber das genügt zum ersten Verständnis.

v-for beginnt mit “v-“. Dabei handelt es sich immer um sogenannte Direktiven. Eine Direktive ist eine Anweisung an ein HTML Element oder eine Komponente. Was genau eine Direktive ist, wie man eigene definiert etc. findest Du in unserem Vue JS Onlinekurs.

Bauen wir also nun die TodoList.vue ein bisschen wie folgt um:

<template>
     <div>
          <ul>
               <li v-for="todoElement in todoElemente" :key="todoElement.id">
                    {{todoElement.title}}
               </li>
          </ul>
     </div>
</template>

Hier siehst Du, dass für den ganzen todoElemente Array jeweils ein todoElement-Element in der Schleife zur Verfügung steht. Gleichzeitig beziehen wir uns mit :key=”…” direkt auf das einzelne Element und verwenden das Objekt mit {{todoElement.title}}. So geben wir das Title Attribut der einzelnen Objekte, die sich im Array befinden aus.

v-model Checkbox

Und abschließend für dieses kleine Tutorial bauen wir jetzt noch eine Checkbox ein, die auf das “is_done” Attribut der einzelnen Objekte reagiert. Dazu passen wir unser <li> Element an und schreiben wie folgt:

<li v-for="todoElement in todoElemente" :key="todoElement.id">
     <input type="check" v-model="todoElement.is_done">
     todoElement.title}}
</li>

Hier kommt eine weitere Direktive zum Einsatz, nämlich v-model. Dadurch “binden” wir quasi einen Wert dynamisch an ein Input Element. In diesem Fall eine Bool-Variable (true/false) an eine Checkbox, die dann gecheckt ist oder eben nicht.

Abschließend, damit wir auch etwas “sehen”, also das Element durchgestrichen ist, wenn es “done” ist, führen wir eine neue CSS Klasse unter <style> ein. User Style Tag in der TodoList.vue sieht nun so aus:

<style>
.fertig { text-decoration: line-through; }
</style>

Nun müssen wir nur noch die CSS Klasse an das <li> Element anfügen. Das würden wir ja normalerweise mit class=”fertig” erledigen. Doch dann wäre ja jedes Element durchgestrichen.
Mit der v-bind Direktive lassen sich jegliche HTML/Komponenten Attribute dynamisch machen. Das heißt, dass wir die Klasse “fertig” nur anfügen wollen, wenn todoElement.is_done == true ist. Und das sieht dann so aus:

<li v-for="todoElement in todoElemente" :key="todoElement.id" :class="{ 'fertig' : todoElement.is_done }">
   <input type="check" v-model="todoElement.is_done">
   {{todoElement.title}}
</li>

Dadurch wird nun durch Klicken auf die Checkbox der Wert vom einzelnen Element todoElement.is_done zwischen true/false gewechselt, und wenn das passiert eine Klasse “fertig” an das <li> hinzugefügt – oder weggenommen bei false.

Vuejs Anfänger und Einsteiger Tutorial Vue JS 3

Und mit “You did it!” möchte ich dir nun beglückwünschen, denn du hast die einfachste Todo Listen App die es gibt soeben erstellt.

Wenn Dir die Art des Tutorials gefallen hat und Du mehr wissen möchtest, möchte ich dir gerne meine Online-Kurse über Vue JS vorstellen. Mit ihnen wirst Du von A-Z in das Framework eingeführt, der Code wir erklärt und mit praktischen Beispielen untermauert.

Ich freue mich darauf, dich im Kurs begrüßen zu dürfen und wünsche Dir nun weiterhin viel Erfolg und Wissenshunger beim Lernen von Vue JS!

Dein IT-Pabst

Andreas Pabst hat 4,90 von 5 Sternen 106 Bewertungen auf ProvenExpert.com