Einführung in Vue.js

Inhaltsverzeichnis

Ein Projekt mit Vue.js aufsetzen #

Um ein neues Vue.js-Projekt zu starten, benötigen Sie Node.js und npm (Node Package Manager) auf Ihrem Computer installiert.

1. Installieren Sie Vue CLI global auf Ihrem Computer mit dem folgenden Befehl:

npm install -g @vue/cli

2. Erstellen Sie ein neues Projekt mit Vue CLI:

vue create mein-projekt

Folgen Sie den Anweisungen im CLI, um Ihr Projekt einzurichten.

Hinweis: Unter Windws 11 muss man folgenden Befehlt ausführen, damit es erlaubt ist scripte mit PowerShell auszuführen:

Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope Process

Siehe: – https://learn.microsoft.com/de-de/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.3, – https://learn.microsoft.com/de-de/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.3

Die Basics von Vue #

Vue.js besteht aus mehreren Konzepten, darunter Vue-Instanzen, Komponenten, Direktiven und Lebenszyklushaken.

1. Vue-Instanzen: Eine Vue-Instanz ist ein Vue-Objekt. Jede Vue-App besteht aus einer neuen Vue-Instanz:

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

2. Komponenten: Vue.js verwendet ein Komponentensystem, das es Ihnen ermöglicht, große Anwendungen in kleinere, wiederverwendbare Komponenten zu zerlegen.

Vue.component('meine-komponente', {
  template: '<div>Eine Komponente</div>'
})

3. Direktiven: Direktiven sind spezielle Attribute, die mit dem v-Präfix beginnen und in Vue.js zur dynamischen Aktualisierung des DOM verwendet werden.

<p v-if="gesehen">Jetzt siehst du mich</p>

4. Lebenszyklushaken: Jede Vue-Instanz durchläuft eine Reihe von Initialisierungsphasen, wenn sie erstellt wird – zum Beispiel muss sie Einrichtungsereignisse einrichten oder eine Vorlage erstellen. Während dieser Phasen ruft Vue sogenannte Lebenszyklushaken auf, die dem Entwickler die Möglichkeit geben, eigene Logik einzufügen.

Ein Frontend mit Vue bauen #

Ein Frontend mit Vue zu bauen, beinhaltet in der Regel das Erstellen und Kombinieren verschiedener Komponenten, um Ihre Anwendung zu erstellen. Sie erstellen Komponenten für unterschiedliche Teile Ihrer Anwendung und verwenden dann Vue Router, um zwischen diesen zu wechseln.

Ein bestehendes Frontend einer Anwendung mit Vue ersetzen #

Vue.js ist ein progressives Framework, was bedeutet, dass Sie es schrittweise in bestehenden Projekten einführen können:

  1. Sie können beginnen, indem Sie Vue nur für eine kleine Komponente Ihrer Anwendung verwenden und dann nach und nach mehr hinzufügen, wenn Sie sich wohler fühlen.
  2. Wenn Ihre Anwendung größer wird und Sie mehr von Vue’s Funktionen nutzen möchten, können Sie Vue CLI verwenden, um ein vollständiges Vue-Projekt mit Webpack, Babel und anderen Konfigurationen zu erstellen.

Ich hoffe, das hilft Ihnen, mit Vue.js zu beginnen! Für eine detailliertere Anleitung und tiefergehendes Verständnis.

Beispiel Template für ein Formular #

<template>
  <div id="app">
    <form @submit.prevent="submitForm">
      <label>Sprint:
        <input type="number" v-model.number="form.sprint">
      </label>

      <label>Ticketanzahl:
        <input type="number" v-model.number="form.ticketanzahl">
      </label>

      <label>Eingeplante Stunden:
        <input type="number" step="0.01" v-model.number="form.eingeplante_stunden">
      </label>

      <label>Number:
        <input type="number" v-model.number="form.number">
      </label>

      <label>Erledigte Ticketanzahl:
        <input type="number" v-model.number="form.erledigte_ticketanzahl">
      </label>

      <label>Bereits aufgewendete Stunden:
        <input type="number" step="0.01" v-model.number="form.bereits_aufgewendete_stunden">
      </label>

      <label>Text:
        <textarea v-model="form.text"></textarea>
      </label>

      <label>Start/Ende:
        <select v-model="form.start_ende">
          <option value="START">START</option>
          <option value="ZWISCHEN">ZWISCHEN</option>
          <option value="ENDE">ENDE</option>
        </select>
      </label>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        sprint: null,
        ticketanzahl: null,
        eingeplante_stunden: null,
        number: null,
        erledigte_ticketanzahl: null,
        bereits_aufgewendete_stunden: null,
        text: "",
        start_ende: "START"
      }
    }
  },
  methods: {
    submitForm() {
      console.log(this.form);
      // Hier können Sie die Daten an Ihren Server senden
    }
  }
}
</script>

Dieses Formular benutzt Vue’s v-model Direktive um Zwei-Wege-Datenbindung zu erreichen. Das bedeutet, dass die Werte der Formularelemente immer die Werte in this.form widerspiegeln, und umgekehrt.

Der @submit.prevent Modifikator auf dem form Tag verhindert, dass das Formular bei der Einreichung seine Daten an einen Server sendet, was das Standardverhalten von HTML-Formularen ist. Stattdessen rufen wir die submitForm Methode auf, die derzeit die Formulardaten in der Konsole anzeigt. Sie können diese Methode ersetzen, um die Daten an Ihren Server zu senden.

Wie kann man dieses Template benutzen #

Um das Template in Ihrem Vue.js-Projekt zu verwenden, erstellen Sie eine neue Vue-Komponente mit diesem Code. Hier sind die Schritte:

  1. Erstellen Sie eine neue Datei in Ihrem components Verzeichnis. Sie könnte MyForm.vue genannt werden.
  2. Fügen Sie den oben bereitgestellten Code in die Datei MyForm.vue ein.
  3. Importieren Sie die Komponente in die Komponente oder View, in der Sie sie verwenden möchten. Zum Beispiel, wenn Sie es in Ihrer Haupt-App-Komponente verwenden möchten (App.vue), sieht Ihr Code so aus:
<template>
  <div id="app">
    <MyForm />
  </div>
</template>

<script>
import MyForm from './components/MyForm.vue';

export default {
  components: {
    MyForm
  }
}
</script>

In diesem Code importieren wir die MyForm Komponente und registrieren sie dann in der components Option unseres Vue-Moduls. Dann können wir die MyForm Komponente im Template unserer App Komponente verwenden.

Denken Sie daran, dass Sie für den Import der Komponente möglicherweise einen anderen Pfad benötigen, abhängig davon, wo Sie Ihre App.vue und MyForm.vue Dateien in Ihrem Projektverzeichnis platziert haben. In diesem Beispiel befinden sich beide Dateien im gleichen Verzeichnis.

Wie benutzt man die Komponente #

Nachdem Sie die Komponente erstellt und in einer anderen Komponente oder View importiert haben, können Sie sie in Ihrem Template verwenden, indem Sie ihren Namen als HTML-Tag verwenden.

In dem obigen Beispiel haben wir die MyForm Komponente in der App Komponente registriert und dann im Template der App Komponente verwendet:

<template>
  <div id="app">
    <MyForm />
  </div>
</template>

In diesem Code ist <MyForm /> das Tag, das der MyForm Komponente entspricht, die wir zuvor importiert und registriert haben. Wenn Vue dieses Template rendert, ersetzt es das <MyForm /> Tag durch das Template der MyForm Komponente.

Wenn Sie die Komponente mit speziellen Eigenschaften (in Vue als „Props“ bezeichnet) verwenden möchten, können Sie diese als Attribute des Tags hinzufügen, z. B. <MyForm some-prop="someValue" />. In Ihrem Fall scheint es jedoch, dass Sie keine Props benötigen, da alle Daten innerhalb der MyForm Komponente selbst verwaltet werden.

Schließlich müssen Sie sicherstellen, dass Sie Ihre App Komponente (oder welche Komponente auch immer MyForm verwendet) in Ihrem Haupt-JavaScript-Datei main.js (oder main.ts, wenn Sie TypeScript verwenden) rendern. Das könnte so aussehen:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

In diesem Code erstellen wir eine neue Vue-Instanz, die unsere App Komponente rendert und sie an das HTML-Element mit der ID app anhängt. Normalerweise wäre dies ein leeres div in Ihrer index.html Datei.

Daten von PHP an Komponente und vise versa #

Die Interaktion zwischen Vue.js (oder allgemein jedem JavaScript-Frontend-Framework) und PHP (oder allgemein jedem Backend-Server) erfolgt in der Regel über HTTP-Anfragen, häufig in Form von RESTful-APIs oder GraphQL-APIs. Hier ist ein einfaches Beispiel, wie Sie Daten von PHP an Vue und von Vue an PHP senden können.

Von PHP an Vue #

Sie können Daten von Ihrem PHP-Server an Ihre Vue-Anwendung senden, indem Sie eine API-Endpunkt erstellen, der die Daten zurückgibt. Im einfachsten Fall könnte dies eine PHP-Datei sein, die einige Daten als JSON ausgibt:

<?php
header('Content-Type: application/json');
$data = array('key1' => 'value1', 'key2' => 'value2');
echo json_encode($data);

In Ihrer Vue-Anwendung können Sie dann diese Daten abrufen, indem Sie eine HTTP-Anfrage an diesen Endpunkt senden, normalerweise in der created oder mounted Lebenszyklus-Hook. Sie können die fetch API, axios oder eine andere Bibliothek verwenden, um diese Anfrage zu machen:

created() {
  fetch('http://your-server.com/path-to-your-php-file.php')
    .then(response => response.json())
    .then(data => {
      // Verwenden Sie die Daten hier
      this.myData = data;
    });
}

Von Vue an PHP #

Um Daten von Vue an PHP zu senden, können Sie eine HTTP POST- oder PUT-Anfrage von Ihrer Vue-Anwendung an einen PHP-Endpunkt senden, der die Daten empfängt und verarbeitet. Zum Beispiel könnten Sie die Daten aus Ihrem Formular senden, wenn der Benutzer auf „Submit“ klickt:

methods: {
  submitForm() {
    fetch('http://your-server.com/path-to-your-php-file.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.form)
    })
    .then(response => response.json())
    .then(data => {
      // Verarbeiten Sie die Antwort hier
    });
  }
}

In Ihrer PHP-Datei können Sie dann die eingehenden Daten aus der Anfrage extrahieren und verarbeiten:

<?php
header('Content-Type: application/json');
$data = json_decode(file_get_contents('php://input'), true);
// Verarbeiten Sie die Daten hier

Bitte beachten Sie, dass dies sehr einfache Beispiele sind und Sie möglicherweise zusätzliche Schritte unternehmen müssen, um Fehler zu behandeln, die Sicherheit zu gewährleisten und die Leistung zu optimieren. Sie sollten auch die spezifischen Anforderungen und Best Practices Ihrer Server-Umgebung und Ihres Frameworks berücksichtigen.

Abschluss #

Dieser Artikel ist auf Basis von ChatGPT entstanden. Die Fragen und Antworten können im folgenden Absatz nachgelesen werden.

Loading

Was sind deine Gefühle

Angetrieben von BetterDocs