3 brillante Beispiele um Vue.js zu Lernen

Aktualisiert am 17. Dezember 2021Lorenz

Vue.js ist zur Zeit in aller Munde. Durch die Dynamik und Flexibilität des JS-Frameworks ist es perfekt für Single-Page-Applications, aber auch kleinere Features auf Websites geeignet. Hier zeige ich Dir 3 Praxis Beispiele um möglichst schnell Vue.js zu erlernen!

Vue.js hat teilweise ähnliche Syntax wie AngularJS oder ReactJS. Falls Du bereits mit diesen Frameworks beschäftigt hast, wird dir Vue.js sicherlich gut gefallen.

Im Vergleich zu jQuery hat Vue.js deutlich an Anerkennung in den letzten Jahren gewonnen. Die folgenden Statistik zeigt die Anzahl der Suchanfragen der beiden Frameworks. Das ist natürlich nicht die genaue Nutzung, allerdings lässt sich hier schon ein deutlicher Trend erkennen:

Quelle: Google Trends

Deshalb hast Du jetzt die Chance auf den Zug „Vue.js“ aufzuspringen und los zu legen!

Als Grundlage für die folgenden Projekte kannst Du diese HTML-Datei benutzen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js Examples</title>
  </head>
  <body>
    <div id="app">
      <h1>Vue.js Examples</h1>
      <!-- PUT YOUR VUE.JS CONTENT HERE -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
      	el: '#app'
      });
    </script>
  </body>
</html>

Dies ist eine ganz normale HTML Datei, in der wir lediglich Vue.js über CDN einbinden und im JavaScript eine Instanz für Vue.js erstellen. Das bedeutet, dass unsere Vue.js Anwendung innerhalb des #app-Containers läuft und wir dort unseren weiteren Programmcode laufen lassen.

Nun kommen wir zu den drei verschiedenen Praxis Beispielen. Wenn Du diese nachprogrammiert und verstanden hast, bist Du mit den Grundlagen von Vue.js vertraut. Den Quellcode der jeweiligen Anwendungen kannst Du durch einen Klick auf „HTML“, „JS“ und „CSS“ aufklappen. Ein kleines Styling habe ich mittels Bootstrap realisiert.

1. Suchfunktion

Eine sehr schicke Funktion sind Live Suchfunktionen. Das bedeutet, dass sobald man einen Suchbegriff eingibt, die Ergebnisse in Echtzeit angezeigt werden. Die erste Übung ist eine solche Suche. Wir haben eine Liste mit Einträgen und beim Eintippen eines Begriffes in der Suchleiste werden uns die entsprechenden Ergebnisse angezeigt. So könnte das aussehen:

Im HTML haben wir ein Suchfeld, welches ein v-model Attribut besitzt. Dadurch haben wir die Möglichkeit im JS-Code darauf zuzugreifen und zu verändern. Außerdem haben wir eine ul, welche unsere noch ungefilterten Einträge enthält. Das il-Element hat eine Vue.js for-Schleife. Diese iteriert alle Einträge aus filteredList und gibt diese aus.

Im JS haben wir eine Liste mit allen Listeneinträgen und einen leeren Suchstring searchterm. Mit der computed Property haben wir die Möglichkeit, eine Variable zu erzeugen, die sich quasi dauerhaft neu berechnet. Das machen wir uns zur Nutze und sagen, dass die Variable aus allen Listeneinträgen aus entries bestehen soll, in der searchstring vorkommt. Beim Vergleichen setzen wir es mit toLowerCase() auf Kleinbuchstaben um den Vergleich zu gewährleisten.

2. ToDo List

Ich weiß, ToDo Lists sind öde und gibt es schon tausend mal, ja! Aber ich finde Sie trotzdem jedes Mal wieder eine schöne Übung um sich mit einem neuen Framework vertraut zu machen.

Deshalb ist die Aufgabe eine ToDo Liste zu programmieren. Wir wollen neue Einträge hinzufügen und alte löschen können. Hier ist mein Beispielcode:

In diesem Beispiel haben wir wieder ein Input um ein neues ToDo hinzuzufügen und wieder eine Schleife, um unsere vorhandenen ToDos auszugeben. Die Besonderheit ist hier, dass wir bei jedem ToDo einen Funktionsaufruf deleteToDo(todo.id) machen, welches das ToDo löschen soll.

Im JS haben wir auch wieder eine Liste mit bereits initialisierten ToDos. Die Funktion addToDo() wird ausgeführt, sobald man im Eingabefelder „Enter“ drückt. Dabei erhält sie eine neue ID und wird dem todos Array hinzugefügt.

Die Funktion deleteToDo(id) setzt sich quasi das gleiche Array wie zuvor, mit dem kleinen Unterschied, dass das ToDo mit der gleichen ID wie die übergebene id rausgefiltert wird.

3. Formular

Formulare sind oft unverzichtlich, oft aber schwierig und haben Sicherheitslücken. Deshalb sollte (auch bei meinem Beispiel) neben der clientseitigen Validierung der Daten zusätzlich eine serverseitige Validierung stattfinden.

In diesem Beispiel haben wir einige Formularfelder, die wir auf Vollständigkeit prüfen und ggf. eine Fehlermeldung ausgeben. Im Code habe ich eine Kommentarzeile in der dann z.B. ein RestAPI Request gemacht werden kann. Dieser sollte die Daten nochmals validieren und kann sie dann per Mail verschicken oder in eine Datenbank schreiben. So sieht mein Beispiel aus:

Im HTML haben wir die verschiedenen Inputs, welche alle ein v-model Attribut mit dem entsprechenden Namen erhalten. Außerdem haben wir noch einen Container für Fehlerbenachrichtigungen formError und einen formSuccess Container für den erfolgreichen Submit des Formular. Diese sind standardmäßig über v-if ausgeblendet. Beim Klick auf „Send“ wird die Funktion submitForm() aufgerufen.

Im JS werden in der submitForm() Funktion alle Attribute einzeln auf Leerheit überprüft. Anhand eines Booleans, der standardmäßig auf false steht, lässt sich so ein Fehler feststellen. Ist dieser true, wird die Variable formError mit Text gefüllt und damit automatisch dem Benutzer angezeigt
(dank v-if) und die Funktion gibt false zurück. Ist die Variable auf false, wird die Anweisung ignoriert und es könnte zur serverseitigen Validierung gehen. Außerdem wird formSuccess auf true gesetzt, um den Benutzer eine Erfolgsmeldung anzuzeigen.

Alles weitere liegt jetzt in Deinen Händen. Vue.js hat eine super Dokumentation. Dort sind auch viele weitere praktische Beispiel gegeben und Du findest eigentlich für jedes Problem eine Lösung.

Hier findest Du noch weitere spannende Beiträge und Tutorials rund um Web Development und Webserver Administration. Schau doch mal, ob noch etwas für Dich dabei ist:

Wie fandest du diesen Beitrag?

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Ich habe die Datenschutzerklärung zur Kenntnis genommen und erkläre mich mit der Speicherung und Verarbeitung meiner Daten durch diese Website einverstanden.

Name *

E-Mail *

Website

1. Suchfunktion

2. ToDo List

3. Formular

Antworten abbrechen

Insert Link