Vue JS Grundlagen: Eine Einführung für Anfänger in nur 60 Minuten (auf Deutsch)

Vue.js ist ein modernes Javascript-Framework zur Entwicklung von Benutzeroberflächen. Es bietet eine einfache und effiziente Möglichkeit, interaktive Webanwendungen zu erstellen. In diesem Tutorial werden wir die Grundlagen von Vue.js in nur 60 Minuten kennenlernen.

Schritt 1: Installation von Vue.js

Bevor wir mit der Entwicklung beginnen können, müssen wir Vue.js auf unserem System installieren. Dies kann ganz einfach über den Paketmanager npm erfolgen. Führen Sie dazu den folgenden Befehl in Ihrem Terminal aus:

npm install vue

Alternativ können Sie auch das CDN einbinden, wenn Sie Vue.js direkt in Ihrem HTML verwenden möchten:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Schritt 2: Erstellen einer Vue-Instanz

Um mit Vue.js arbeiten zu können, müssen wir eine Vue-Instanz erstellen. Dies wird anhand des folgenden Codes erreicht:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

In diesem Beispiel wird eine neue Vue-Instanz mit dem Namen "app" erstellt und an das Element mit der ID "app" im HTML-Dokument gebunden. Die Datenoption definiert hier eine Nachricht mit dem Wert "Hello Vue!".

Schritt 3: Anzeige von Daten in der Vorlage

Nachdem wir die Vue-Instanz erstellt haben, können wir die Daten in der Vorlage anzeigen. Hier ist ein einfaches Beispiel dafür, wie dies erreicht werden kann:

<div id="app">
  <p>{{ message }}</p>
</div>

In diesem Beispiel wird die Nachricht aus der Datenoption der Vue-Instanz mit Hilfe von {{ message }} in einem

-Element angezeigt.

Schritt 4: Ereignisbehandlung

Vue.js ermöglicht es auch, Ereignisse in der Benutzeroberfläche zu verarbeiten. Hier ist ein Beispiel, wie wir auf einen Klick-Ereignis reagieren können:

<div id="app">
  <button v-on:click="sayHello">Klick mich!</button>
</div>

var app = new Vue({
  el: '#app',
  methods: {
    sayHello: function () {
      alert('Hallo!')
    }
  }
})

In diesem Beispiel wird die Methode "sayHello" definiert, die eine Benachrichtigung mit dem Text "Hallo!" auslöst, wenn der Button geklickt wird.

Schritt 5: Einführung von Direktiven

Vue.js bietet auch verschiedene eingebaute Direktiven, die die Interaktion mit dem DOM vereinfachen. Hier sind einige häufig verwendete Direktiven:

• v-if: Wird verwendet, um ein Element basierend auf einer Bedingung anzuzeigen oder zu verbergen.
• v-for: Wird verwendet, um eine Liste von Elementen zu durchlaufen und für jedes Element einen Ausdruck auszuführen.
• v-bind: Wird verwendet, um HTML-Attribute an Vue-Daten zu binden.
• v-model: Wird verwendet, um Formularfelder mit Vue-Daten zu verbinden.

Hier ist ein Beispiel für die Verwendung von v-if:

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hallo Vue!',
    showMessage: true
  }
})

In diesem Beispiel wird die Nachricht nur angezeigt, wenn die showMessage-Datenoption auf true gesetzt ist.

Schritt 6: Zusammenfassung und weiterführende Ressourcen

In diesem Tutorial haben wir die Grundlagen von Vue.js in nur 60 Minuten kennengelernt. Vue.js bietet eine einfache und effiziente Möglichkeit, interaktive Webanwendungen zu erstellen. Wenn Sie mehr über Vue.js lernen möchten, empfehle ich Ihnen, die offizielle Vue.js-Dokumentation zu lesen oder an einem Online-Kurs teilzunehmen. Viel Spaß beim Entwickeln mit Vue.js!