logo

VueJs - Erste Schritte

Dieser Artikel wurde zuerst in meinem Blog veröffentlicht, hier ist der Artikel

Hallo vue und willkommen bei VueJs, The Series 🚀

In dieser ersten Folge behandeln wir die folgenden Themen:

Inhaltsverzeichnis
Vue in unsere Maschine bekommen
Einrichten unserer Umgebung
Schlussfolgerung

Vue in unsere Maschine bekommen

Wir haben verschiedene Möglichkeiten, vue zu installieren, wie Sie hier sehen können. Aber für die Zwecke dieses Tutorials werde ich CDN verwenden. 

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

Einrichten unserer Umgebung

Wir benötigen einen index.html und app.js Dateien. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- VueJs Import -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>VueJs - Getting Started</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
</body>
</html>

Ihre index.html sollte so aussehen ☝

  1. Importiertes VueJs-CDN.
  2. Erstellte ein div mit einer ID von app.
  3. Inside App hat einen Titel erstellt.

Gehen wir für eine Sekunde 2 und 3 durch:

  • Das div wird von der Vue-Instanz gesteuert.
  • Title verwendet die spezielle Syntax, die Vue von unserer Vue-Instanz erkennt und interpoliert.

Ihre app.js sollte so aussehen 👇 

new Vue({
  el: "#app",
  data: {
    title: "Hello World!"
  }
})

Halte dein 🏇🏇, WAS?

Wir haben unsere Vue-Instanz mit new Vue() erstellt die ein Objekt als Argument nimmt.

Dann haben wir die el und data Eigenschaften. Alle Eigenschaften (es gibt noch mehr und wir werden sie in dieser Serie sehen) haben reservierte Namen, die Vue erkennt.

Im el -Eigenschaft müssen wir den HTML-Code el übergeben ement, dass wir wollen, dass die Vue-Instanz die Kontrolle übernimmt.

Im data Property speichern wir alle Daten, die wir in unserer Vue-Instanz verwenden möchten. Stellen Sie sich den Eigenschaftenspeicher innerhalb des Datenobjekts als Variablen vor, Sie können Zeichenfolgen, boolesche Werte, Arrays ... haben.
In unserem Fall ist die Dateneigenschaft der String Hello world, very creative right?

Ok, also lass uns unsere HTML-Datei öffnen und sehen, was wir dort haben.

Herzlichen Glückwunsch, wir haben unsere erste VueJs-App erstellt! 🎉🥳

Fazit

In dieser Folge haben wir Folgendes behandelt:

  1. Wir haben das VueJs-Framework mit CDN installiert.
  2. Wir haben unsere HTML-Vorlage erstellt und verwenden den speziellen {{ }} Syntax.
  3. Wir haben unsere Vue-Instanz erstellt und erklären den el und data Eigenschaften.

Hier nochmal der Link für die anderen Installationsoptionen.

GitHub-Repo für den in dieser Folge verwendeten Code.

Finden Sie mich auf Twitter @eligarlo