Skip to main content
Disciplines
Automotive Business IT + Informatics Construction + Real Estate Electrical Engineering + Electronics Energy + Sustainability Insurance + Risk Finance + Banking Management + Leadership Marketing + Sales Mechanical Engineering + Materials
Events
DE
EN
Books
Journals
Topic Page
Marketing
Start single access now
Access for companies
EXTENDED SEARCH
Log in
Top

2019 | Book

Einleitung – Bevor es richtig losgeht Read chapter Read first chapter

Webanwendungen erstellen mit Vue.js

MVVM-Muster für konventionelle und Single-Page-Webseiten

Author: Ralph Steyer

Publisher: Springer Fachmedien Wiesbaden

Part of: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Login to get access
insite
SEARCH

About this book

Steigen Sie mit diesem Buch schnell und unkompliziert in Vue.js ein

Dieses Buch bietet einen kompakten und praxisnahen Einstieg in das populäre Vue.js. Nutzen Sie auf Basis von MVC-Entwurfsmustern das MVVC-Konzept für Anwendungen im Web und erstellen Sie damit auf einfache Weise Single-Page-Webanwendungen. Dabei verwenden Sie eines der leistungsfähigen Frameworks nur auf Basis elementarer WWW-Standardtechnologien. Mit Vue.js werden Sie Datenbindung, Komponenten, Direktiven und Modularität verstehen und anwenden.

Mit diesem Buch lernen Sie nicht nur die wichtigsten Grundlagen von Vue.js kennen. Erfahren Sie außerdem, wie Sie mit diesem JavaScript-Webframework Webapplikationen erstellen und pflegen. Der Fokus des umfassenden Werks liegt auf folgenden Aspekten:

· HTML/CSS/JavaScript und das Web: Das Umfeld von Vue.js

· Basis von JavaScript (darunter vor allen Dingen JSON)

· Arbeiten mit der Vue-Instanz

· Templates

· Double Curly Syntax und Datenbindung

Durch seinen starken Anwendungsbezug eignet sich dieses Buch über Vue.js als idealer Begleiter für das Selbststudium oder entsprechende Kurse. Inhaltlich richtet es sich an:

a) Ersteller von Webseiten

b) Programmierer

c) Web-Designer

Tauchen Sie noch tiefer in die Materie ein

Ralph Steyer zeigt, welche Voraussetzungen Sie zum Arbeiten mit diesem Buch mitbringen sollten. Anschließend erfahren Sie mehr über das Framework sowie die speziellen Features von Vue.js. Im weiteren Verlauf behandelt der Autor u. a. diese Teilaspekte:

· Erste Beispiele – Vue.js einfach einmal testen

· Wie und warum funktioniert Vue.js?

· Bedingtes Rendern: Die v-if-Direktive – Entscheidungen treffen

· Dynamische Layouts mit Datenbindung – Stylesheets dynamisieren

· Formulare und Formulardatenbindung – Interaktion mit dem Anwender

· Übergänge und Animationen – Bewegende Dinge

Wer noch mehr über die Applikation erfahren will, dem gibt dieses Buch im abschließenden Kapitel noch einen Ausblick auf weitere Einsatzmöglichkeiten und Funktionen von Vue.js. Um Ihnen den Einstieg zu erleichtern, finden Sie in jedem Kapitel Programmcodes und Abbildungen, die komplexe Vorgänge veranschaulichen.

Table of Contents

Frontmatter
1. Einleitung – Bevor es richtig losgeht
Zusammenfassung
Bevor es richtig losgeht, sollen in diesem einleitenden Kapitel einige Dinge geklärt werden, die Ihnen die folgende Arbeit mit diesem Buch und Vue.js erleichtern werden. Insbesondere erfahren Sie, was Sie als Voraussetzungen mitbringen sollten und woher Sie Vue.js bekommen. Und es wird kurz besprochen, was Vue.js an Features mitbringt.
Ralph Steyer
2. Erste Beispiele – Vue.js einfach einmal testen
Zusammenfassung
Bevor es an genaue Erläuterungen des Frameworks geht, sollen in diesem Kapitel bereits ohne weitere Vorbereitung ein paar einfache Beispiele mit Vue.js erstellt werden. Damit können Sie auf der einen Seite bereits testen, ob Sie Vue.js richtig einbinden und auf der anderen Seite ein erstes Gefühl für das Framework bekommen sowie bereits die Moustache-Syntax (oft auch Mustache-Syntax geschrieben) kennenlernen, die im Laufe Ihrer „Vue-Karriere“ eine wichtige Stellung einnehmen wird.
Ralph Steyer
3. Hinter den Kulissen – Wie und warum funktioniert Vue.js?
Zusammenfassung
Obwohl Vue.js überwiegend einen deklarativen Ansatz verfolgt, bei dem es eigentlich nur um die Festlegung des „Was?“ und nicht des „Wie?“ geht, kann man meines Erachtens nur dann mit dem Framework richtig und effizient arbeiten, wenn man die Hintergründe, die Basis verstanden hat. Deshalb soll in dem Kapitel unter die Oberfläche von Vue.js geschaut werden.
Ralph Steyer
4. Vue.js in der Tiefe – Die Vue-Instanz, Vue-Templates und die Datenbindung
Zusammenfassung
Bisher wurden erste Beispiele mit Vue.js schon erstellt und vor allen Dingen die Grundlagen hinter den Kulissen erörtert. In dem Abschnitt soll nun genauer beschrieben werden, was Vue.js für Features bereitstellt, wenn es um die View bzw. die HTML-Datei mit den Verankerungen zum Framework und die Datenbindung geht sowie auf welchem Objekt eigentlich das gesamte Framework aufbaut. Dabei kommen auch Komponenten und Templates zum Zug. Des Weiteren werden wir uns in dem Kapitel auch kurz mit dem sogenannten Routing auseinandersetzen. Wir steigen also hinab in die Tiefen des Frameworks.
Während eine Komponente ein wiederverwendbares Element in der View darstellt, ist ein Template, was englisch für „Vorlage“ oder „Schablone“ steht, mit mehrfacher Bedeutung versehen. Auch wenn man nur auf den Bereich der IT schaut. Das beginnt mit Vorlagen für Office-Applikationen wie Textverarbeitung oder Tabellenkalkulation und geht über spezielle Vorgaben bei dynamischen Webseiten hin zu Programmiervorlagen oder Schablonen zur Beschreibung von URL (Uniform Ressource Locator – Adressschema im Internet). Aus Sicht von View.js geht es bei Templates aber natürlich um den Web-Charakter und im Framework bezeichnet man damit speziell einen Teil der Webseite, der strukturell als auch vom statischen Inhalt beschrieben wird, dessen darzustellende Inhalte jedoch ebenso (teils) mit Platzhaltern beschrieben werden können, die dynamisch mit Inhalten gefüllt werden können. Diese Templates in Vue.js schauen wir uns in dem Kapitel im Zusammenhang mit wichtigen Direktiven und Syntaxanweisungen an, die sich um die dynamischen Inhalte in den Templates kümmern. Auch sogenannte Slots werden in dem Kapitel behandelt.
Beginnen werden wir allerdings mit der Vue-Instanz als solcher.
Ralph Steyer
5. Mit Arrays arbeiten – Iterationen mit der v-for-Direktive
Zusammenfassung
Wenn Sie Arrays in Vue.js notieren (vollkommen egal auf welche Weise – mit Konstruktor, Array-Literal oder JSON), werden damit in der Regel Datenstrukturen beschrieben. Oder genau genommen sollte man hier von „Aufgaben“ sprechen, denn diese Daten werden mit Vue.js oft auf eine spezifische Art verarbeitet. Vue.js stellt nun einige Syntaxstrukturen zum Umgang mit Arrays bereit, die sehr stark an den klassischen JavaScript-Techniken wie Iteratoren orientiert sind. Diese Techniken schauen wir uns in dem Kapitel an.
Ralph Steyer
6. Bedingtes Rendern – Die v-if-Direktive – Entscheidungen treffen
Zusammenfassung
In dem Kapitel widmen wir uns den Möglichkeiten von Vue.js, bedingte Aktionen auszuführen. Es geht also um die Entscheidungsanweisungen des Frameworks, die auf Direktiven basieren, die man aus klassischen Entscheidungsanweisungen in der Programmierung nahezu intuitiv erschließen kann.
Ralph Steyer
7. Ereignisse, Methoden, Beobachter und berechnete Eigenschaften – kalkulierte Ergebnisse und Reaktionen
Zusammenfassung
Man sollte auch in Vue.js nicht zu viel Logik in die View verlagern. Im Gegenteil. Eine Vorlage sollte immer einfach und deklarativ sein. Deshalb sollte für jede komplexe Logik eine berechnete Eigenschaft verwendet werden. Damit wird schon mal ein Teil der Logik in das Vue-Objekt verlagert. Daneben hat man noch die klassischen Methoden, die in einem Vue-Objekt über die methods-Eigenschaft verankert und mit Ereignisdirektiven aufgerufen werden können sowie sogenannte Watcher, die ebenfalls in dem Kapitel behandelt werden. Solange man den Regeln der Frameworks folgt, wird damit auch eine saubere Architektur der Software gewährleistet. Als ein weiteres Thema wird die Reaktion auf Formulareingaben eines Anwenders besprochen, denn diese zählt zu den wichtigsten Anwendungen im Web überhaupt.
Ralph Steyer
8. Dynamische Layouts mit Datenbindung – Stylesheets dynamisieren
Zusammenfassung
In dem Kapitel soll noch einmal auf die Datenbindung mit der Direktive v-bind zurückgekommen und etwas genauer beschrieben werden, was Vue.js für Features bereitstellt, wenn es um dynamische Layouts über die Datenbindung geht. Das ist zwar nur ein kleiner Ausschnitt dessen, um was es bei Vue.js und der Datenbindung geht und im Grunde eine Abstraktion bzw. Vereinfachung dessen, was wir schon zu Datenbindung und Eventhandling gesehen haben. Aber da man eine optische Veränderung der Webseite sieht, wird mit dieser Strategie das Konzept quasi intuitiv deutlich, selbst wenn man sich bisher noch nicht mit dieser Datenbindung beschäftigt hat. Außerdem sehen Sie an der Stelle die zwei Abkürzungen für besondere Direktiven (Shorthands), die in Vue.js sehr oft Verwendung finden.
Ralph Steyer
9. Formulare und Formulardatenbindung – Interaktion mit dem Anwender
Zusammenfassung
Man kann sagen, dass gerade im Zusammenspiel mit Formularen Vue.js seine ganzen Stärken ausspielt. Das Kapitel sollte Ihnen das verdeutlich haben. Natürlich ist der Dreh- und Angelpunkt wieder die Datenbindung vor allen Dingen über die v-model-Direktive, aber auch das data-Attribut läuft hier zur Hochform auf. Und Vue.js kapselt diverse Elemente und Attribute von Formularen zuverlässig (Ralph Steyer).
Ralph Steyer
10. Filtertechniken – Nur ausgewählte Daten
Zusammenfassung
Wenn man eine größere Menge an Daten zur Verfügung hat, will man diese oft nach gewissen Kriterien filtern. JavaScript stellt dazu bei Arrays die Methode filter() bereit, welche die Basis der Filter in Vue.js darstellt, diese grundlegenden JavaScript-Möglichkeiten jedoch erweitert. Diesen Filtern in Vue.js widmen wir uns in diesem Kapitel.
Ralph Steyer
11. Übergänge und Animationen – Bewegende Dinge
Zusammenfassung
Vue.js bietet verschiedene Möglichkeiten, sogenannte Übergangseffekte anzuwenden, wenn Elemente in der Webseite bzw. dem DOM eingefügt, aktualisiert oder entfernt werden. Diese sogenannte Transition (lat. „transitio“ = „Übergang“, Substantiv zu „transire“ = „hinübergehen“) bedeutet allgemein „Wandel“, „Wechsel“ oder „Umbruch“ oder eben auch Übergang von einem Zustand in einen anderen und erlaubt die Gestaltung von „smarten“ grafischen Oberflächen, wie man sie heute bereits in jeder x-beliebigen Webseite findet. Also beispielsweise das animierte bzw. zeitgesteuerte Einblenden oder Ausblenden von Elementen über die Veränderung der Transparenz, das Vergrößern oder Verkleinern von Elementen, das Skalieren oder Verschieben und ähnliche Dinge.
Ralph Steyer
12. Ausblicke – Was gibt es noch in Vue.js?
Zusammenfassung
Vue.js ist ein sehr leistungsfähiges Framework und in diesem Buch haben Sie die wichtigsten Bestandteile und Techniken zum Umgang damit kennengelernt. Aber es gibt durchaus noch diverse fortgeschrittene und/oder spezielle Anwendungen, auf die hier ein kleiner Ausblick das Buch abrunden soll.
Ralph Steyer
Backmatter
Metadata
Title
Webanwendungen erstellen mit Vue.js
Author
Ralph Steyer
Copyright Year
2019
Electronic ISBN
978-3-658-27170-1
Print ISBN
978-3-658-27169-5
DOI
https://doi.org/10.1007/978-3-658-27170-1

Premium Partner

    Image Credits