Installation und Verwendung von Vue

Vorwort:

Vue (ausgesprochen /vjuː/, ähnlich wie „view“) ist ein Framework zum Erstellen einer Trennung von Front-End und Back-End. Es wurde ursprünglich vom herausragenden einheimischen Unternehmen You Yuxi entwickelt und ist derzeit das „beliebteste“ Front-End-Framework der Welt. Die Entwicklung von Webseiten mit vue ist sehr einfach. Das technische Ökosystem ist vollständig und die Community aktiv. Dies ist eine unverzichtbare Fähigkeit, um einen Job im Front-End und Back-End zu finden!

1. Vue-Installation

Die Installation von Vue gliedert sich grundsätzlich in drei Wege

Methode 1: CDN-Einführung

<!--Version der Entwicklungsumgebung, einschließlich hilfreicher Warnbefehle-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!--Generierte Version, optimiert für Größe und Geschwindigkeit-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 

Methode 2: Direkter Download und Import

Entwicklungsumgebung: https://vuejs.org/js/vue.js

Produktionsumgebung: https://vuejs.org/js/vue.min.js

Methode 3: npm-Installation

Es wird empfohlen, beim Erstellen großer Anwendungen mit Vue NPM Installation zu verwenden. NPM funktioniert gut mit Modulbündelern wie webpack oder Browserify . Gleichzeitig bietet Vue auch unterstützende Tools für die Entwicklung von Einzeldateikomponenten.

# Neueste stabile Version$ npm install vue
 

2. Grundlegende Verwendung

Um Vue zu verwenden, müssen Sie zuerst ein Vue -Objekt erstellen und den el Parameter in diesem Objekt übergeben. Der vollständige Name des el Parameters lautet element und wird verwendet, um ein Stammelement zu finden, das vue rendern soll. Und wir können einen data übergeben, alle Werte in data können mit {{}} direkt unter dem Stammelement verwendet werden.

Der Beispielcode lautet wie folgt:

<div id="app">
  {{Nachricht}}
</div>
</body>
<Skript>
    const app = new Vue({
      el: "#app",
      Daten: {
        Nachricht: „Anfänger Vue“
      }
    })
</Skript>

Die Daten in data können nur unter dem Stammelement von vue verwendet werden und können vue an anderen Stellen nicht erkannt und gerendert werden.

Zum Beispiel:

<!--Rendern hier nicht möglich-->
<p>{{Nachricht}}</p>
</body>
<Skript>
    const app = new Vue({
      el: "#app",
      Daten: {
        Nachricht: „Anfänger Vue“
      }
    })
</Skript>

Sie können dem vue Objekt auch methods hinzufügen. Diese Eigenschaft dient speziell zum Speichern eigener Funktionen. Die Funktionen in methods können auch in Vorlagen verwendet werden, und die Funktionen in methods können durch einfache Verwendung this. auf die Werte in data zugreifen, ohne dass für den Zugriff this.data. hinzugefügt werden muss.

Der Beispielcode lautet wie folgt:

<div id="app">
    <p>{{grüßen()}}</p>
</div>
</body>
<Skript>
    const app = new Vue({
      el: "#app",
      Daten: {
        Nachricht: „Anfänger Vue“
      },
      Methoden: {
        Begrüßung: Funktion () {
          returniere "hallo" + diese.Nachricht
        }
      }
    })
</Skript>

Dies ist das Ende dieses Artikels über die Installation und Verwendung von Vue. Weitere relevante Inhalte zur Installation und Verwendung von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!