Lernunterlagen zum Schreiben des ersten Vue-Programms

Lernunterlagen zum Schreiben des ersten Vue-Programms

Hier verwenden wir das offizielle Dokument CDN

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

1. Schreiben Sie ein HTML, das erste Vue-Programm

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title> 
</Kopf>
<Text>
<!--Ebenenvorlage anzeigen-->
<div id="app">
    {{Nachricht}}
</div>
 <!--Import vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <Skript>
    var vm = neuer Vue({
        el:"#app",
        //Modell: Daten:{
            Nachricht: „Hallo, Vue“
        }
    });
 </Skript>
 </body>
</html>

Beachten Sie die Ansichtsvorlage und die Daten

Sicht

Modell

ViewModel: Zwei-Wege-Bindung bedeutet, dass sich die Daten in Ihren Daten ebenfalls ändern, wenn sich Ihre Front-End-Daten ändern.

Sie können die Daten ändern, ohne die Seite zu aktualisieren und sie dann mit der Frontend-Anzeige synchronisieren

Entscheidungsschleife

  • if
  • for

Ereignis

  • on

787 Grundsatz

Um Vue zu lernen, müssen wir seine 7 Eigenschaften, 8 Methoden und 7 Anweisungen kennen

el-Attribut

Es wird verwendet, um dem Vue-Compiler mitzuteilen, wo mit der Analyse der Vue-Syntax begonnen werden soll. Man kann es als Platzhalter bezeichnen.

Datenattribut

Es wird verwendet, um die aus der Ansicht abstrahierten Attribute zu organisieren. Man kann sagen, dass die Ansichtsdaten abstrahiert und in den Daten gespeichert werden.

Vorlagenattribut

Wird zum Festlegen der Vorlage verwendet, die Seitenelemente (einschließlich Platzhalter) ersetzt.

Methodenattribut

Platzieren Sie die Geschäftslogik auf der Seite. JS-Methoden werden im Allgemeinen in Methoden platziert.

Rendereigenschaften

Einen echten virtuellen Dom erstellen

Berechnete Eigenschaften

Wird zur Berechnung verwendet

Eigentum beobachten

beobachten:Funktion(neu,alt){}

Überwachen von Datenänderungen

Zwei Parameter, einer gibt den neuen Wert zurück, einer gibt den alten Wert zurück

Das Obige ist der detaillierte Inhalt des ersten Programms der Studiennotiz Vue. Weitere Informationen zu Vue-Programmen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen
  • Detaillierte Untersuchung der Verwendung und Prinzipien von Vue nextTick
  • Erfahren Sie mehr über Beispiele für Vue-Komponenten
  • Erfahren Sie mehr über das bedingte Rendering von Vue.js
  • Erfahren Sie mehr über die berechneten Eigenschaften von Vue.js
  • Einfaches Lernen der Vue-Direktive

<<:  Was ist schneller: MySQL-Volltextindex, gemeinsamer Index, Like-Abfrage und JSON-Abfrage?

>>:  Installationsschritte der Ubuntu 20.04-Doppelpinyin-Eingabemethode

Artikel empfehlen

Warum sollten MySQL-Felder NOT NULL verwenden?

Ich habe vor Kurzem in einer neuen Firma angefang...

Detaillierte Schritte zur Installation von JDK und Tomcat in einer Linux-Umgebung

Inhaltsverzeichnis 1. JDK installieren Manuelle I...

Detaillierte Erläuterung der Nest.js-Parametervalidierung und des benutzerdefinierten Rückgabedatenformats

0x0 Parameterüberprüfung Der Großteil der Paramet...

JavaScript fügt Prototyp-Methodenimplementierung für integrierte Objekte hinzu

Die Reihenfolge, in der Objekte Methoden aufrufen...

Verwenden von System.Drawing.Common in Linux/Docker

Vorwort Nachdem das Projekt auf .net Core migrier...

Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Beim Entwerfen einer Seite müssen wir das DIV häu...

Grundlagen und Beispiele zur TypeScript-Aufzählung

Inhaltsverzeichnis Vorwort Was sind Enumerationen...

Tastenkombinationsvorgang für SQL Server-Kommentare

Batchkommentare in SQL Server Batch-Annotation St...

Vue.js Leistungsoptimierung N Tipps (es lohnt sich, sie zu sammeln)

Inhaltsverzeichnis Funktionskomponenten Aufteilun...

Tutorial-Diagramm zur LAN-Netzwerkkonfiguration für virtuelle Maschinen von VMWare 15.X

Ich habe kürzlich an mehreren virtuellen Maschine...

CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion

Führen Sie kein Front-End-UI-Framework ein, es se...

So wählen Sie das Format bei der Verwendung von Binlog in MySQL

Inhaltsverzeichnis 1. Drei Binlog-Modi 1.Anweisun...

Detailliertes Beispiel für die Verwendung von CSS zur Verschönerung von HTML-Formular-Steuerelementen (Formularverschönerung)

1. Grundlegende Syntaxstruktur der HTML-Senden- u...

So implementieren Sie die GZIP-Komprimierung in Nginx, um die Website-Geschwindigkeit zu verbessern

Inhaltsverzeichnis Warum GZIP-Komprimierung verwe...

Eine Lösung für einen Fehler in IE6 mit jquery-multiselect

Bei der Verwendung von jquery-multiselect (einem ...