Vue js Tutorial TypeScript – Schritt für Schritt

Du brauchst ein Vue js Tutorial?

Ich erkläre Dir Schritt-für Schritt, wie Vue.js funktioniert.

… und schreiben zusammen Deine erste App!

Starten wir!

Was ist Vue.js?

Vue.js ist ein JavaScript Framework, welches Komponenten basiert denkt.

Das bedeutet, dass bei Vue.js jede Klasse eine Komponente darstellt. Das Framework ist besonders leichtgewichtig und Du kannst frei das Aussehen und Funktion Deiner App definieren.

Vue.js ermöglicht das Entwickeln von Single Page Applications. Single Page Applications bestehen aus HTML, CSS und JavaScript.

Steffen lippke

Was ist eine Single Page Application?

Die Navigations-Seiten liegen nicht als einzelne HTML-Seiten vor, sondern treten mit einem JavaScript Befehl als DIV-Box in den Vordergrund.

Die Seiten liegen übereinander wie ein Kartenstapel und JavaScript schiebt nur die gewünschte Seite auf die oberste Position im Stapel.

Wie funktioniert Vue js?

Das Framework nutzt eine deklaratives Generieren von Komponenten.

Vue-js erweitert die Standard-HTML-Tags mit eignen Attributen, die Vue-Events im TypeScript-Code Triggern

• v-on:click="sagewas" löst eine Vue Funktion sagewas() beim Klick auf das HTML Element aus
• v-if="isBekannt" zeigt das HTML-Element nur an, wenn die Variable isBekannt auf wahr gesetzt ist.
• v-for="aufgaben" iteriert durch den Array aufgaben, welches den Tag in dem dieses Attribut steht wiederholt


<ol id=“meineListe“>
    <li v-for="task in tasks">
      {{ task.text }}
    </li>
</ol>

Das JSON-Objekt ist in der Datenstruktur der Vue-App (data()) gespeichert. Du kannst in diesem Abschnitt Deine Variablen definieren und die App mit Inhalten füllen.

Die erstellte Konstante übergibst Du der Vue-App als ein Parameter. Deine programmierte Logik mit Daten bindest Du an die HTML-Komponente (Liste mit <ol>).

Die HTML-Komponente referenzierst (mount) Du über einen ID (id=xxx). Einen Klassennamen (class=xxxx) referenzierst Du mit einem einfachen Punkt vor dem Klassennamen.

const List = {
  data() {
    return {
      tasks: [
        { text: 'Call me' },
        { text: 'Go to school }
      ]
    }
  }
}

Die Vue App mountest Du mit:

Vue.createApp(List).mount('#meineliste')

v-html="meinehtml" fügt in das HTML-Element rohes HTML ein, welches Du frei wählen kannst.

v-bind:disabled="isButtonDisabled" Du kannst typische HTML Attribute (hier von einem Button) mit einer Variable verknüpfen, die Du in der Vue Datenstruktur dynamisch nutzen kannst.

Die Vue Komponenten

Komponenten in Vue.js bestehen aus HTML-Tags und oder weiteren Vue-Komponente. Du kannst Parameter einer Vue-Komponente übergeben, um mit den Inhalten die Vue-Komponente zu rendern.

Die Vue-Komponenten werden zu eigenen neuen HTML-Tags, die Du nach den XML-Schema-Regeln benennen kannst. Jede Komponente besitzt seinen eigenen Lebenszyklus von der Erstellung, Modifikation bis hinzu Löschung. An den verschiedenen Stellen des Lebenszyklus kannst Du Events ausführen lassen.

Methoden in einer Vue-Komponete

Eine Komponente besteht aus eine Namen save-button, dann den Lebenszyklus- und die Aktions-Funktionen und ein HTML-Template. Diese Struktur macht Vue besonders gut wiederverwendbar und vermeidet doppelten Code.

app.component('save-button', {
  created() {
    // Debouncing with Lodash
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // Cancel the timer when the component is removed
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... respond to click ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})

Das Framework geht von einer Wurzel-Komponente aus (Root), in dem die Kind-Knoten liegen.

Schritt für Schritt Vue js Tutorial

Das folgende Tutorial nutzt die Syntax der Version 3. Wir nutzen für den ersten Einsteig den manuellen Import und keine Node.js Module. Du kannst Vue.js über verschiedenen Wege in Deiner App zum Leben erwecken.

1. Öffne Deine IDE z.B. Visual Studio Code
2. Erstelle ein HTML-Datei mit den Namen index.html
3. Erstelle ein einfaches Grundgerüst (Standard-Tags für HTML)
4. Importiere Dir JavaScript Bibliothek.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Dieser Script-Tag importiert die Vue-Bibliothek von einem Content Delivery Network, welche Deinen Nutzer die Datei schnell auf der ganzen Welt zu Verfügung stellt. Du kannst Vue auch lokal hosten, aber eine CDN fällt seltener aus und hat mehr Leistung als ein normaler Miet-Server.

    <script src="https://unpkg.com/vue@next"></script>

    <title>Vue App</title>
  </head>
  <body>
    <div id="app">
      <ol>

Umhülle den Listeneintrag <li> mit einer Div-Box. Diese beinhaltet den Tag v-for, welches das Element so oft wiederholt wie Objekte sich in dem Array tasks sich befinden. Du kannst mit push(objekt) dem Array neue Aufgaben hinzufügen und mit pop() aus dem Array entfernen. Das Objekt task kannst Du mit weiteren Attributen wie completed: true erweitern, um eine Checkbox hinzuzufügen.

        <div v-for="task in tasks">
          <li>{{task.text}}</li>
        </div>
      </ol>
    </div>
    <script>

Die eigentliche Vue-App beginnt am Ende des Body-Tags. Der Browser lädt zuerst die Vue-Biblothek im Header, bevor dieser Code ausgeführt wird.

Die Webseiten-Geschwindigkeitsmesser von Google (Google PageSpeed) emphielt, dass Du erst, das HTML-Grundgerüst lädst und das weitere Script-Dateien, damit sich die Seite im Nutzer des Browsers schneller aufbaut. Script wie diese kannst Du aync (asynchron) oder defer (verspätend) laden.

const application = {       
       data() {
          return {
            taskInput: "",
            tasks: [{ text: "Lerne HTML" }, { text: "Lerne JavaScript" }, { text: "Lerne Vue" }],
          };
        },
      };
      Vue.createApp(application).mount("#app");
    </script>
  </body>
</html>

Tipp fürs Entwickeln

Wenn Du Deine Vue App nicht nur mit console.log debuggen möchtest, dann nutze die Vue Dev Tools. Diese sind für Firefox und Chrome Engine Browser verfügbar. Den Vue-Werkzeugkasten findest Du in seinem eigenen Tab in den allgemeinen Entwickler Tools Deines Browsers.

Das Tool ermöglicht es Dir durch den Vue Komponenten Baum zu navigieren und die Veränderung des Abschnitts data() zu beobachten.

Vue js vs Angular

Angular ist ein deutlich mächtiges Framework, welches mehr Funktionen bietet aber dafür nicht so leicht gewichtig ist. Die Frameworks zeigen viele Parallelen auf:

– Die Interpolation von Variablen mit {{ myVaraiable}}

– Das Binding funktioniert in einer ähnlichen Weise mit [(ngModel)]

– *ngFor und *ngIF sind die Gegenstücke zu v-for und v-if, die dieselben Konzepte darstellen.

Bei der Wahl des JavaScript Framework geht es in den meisten Fällen nicht darum, ob das eine Framework 2ms schneller kompiliert, sondern geht es mehr um persönliche Präferenzen und Syntax. Du kannst alle NPM-Bibliotheken in Vue genauso in React oder Angular nutzt.

Wichtiger ist, dass Du Dir von Beginn eine gute Architektur und Struktur ausdenkst, sodass diese erweiterbar und anpassbar bleibt. Wie kannst Du Deine App heute so gestalten, dass diese in 5 Jahren noch übersichtlich bleibt?

Was ist Node.js?

Node ist eine JavaScript Laufzeitumgebung ähnlich der Python oder Java Laufzeitumgebung. Die JavaScript oder TypeScript Programmierung kannst Du für Anwendungen im Browser, Desktop-Anwendungen und Server-Module verwenden. Vue basiert auf Node.js.

Was sind Node-Module?

JavaScript Erweiterungspakete nennen sich Node Packages. Diese verwaltet der Node Package Manager (NPM), yarn, bower oder pnpm.

Du hast eine große Auswahl an Modulen, mit denen Du Deine App funktional vergrößern kannst.