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

Linux weist eine Sicherheitslücke bei der Rechteausweitung bei Sudo auf, jeder Benutzer kann auch Root-Befehle ausführen

Als eines der am häufigsten verwendeten und wicht...

Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung

1. Einfache Konfiguration der dynamischen und sta...

Detaillierte Erklärung, wo Docker Protokolldateien speichert

Inhaltsverzeichnis Wo werden die Protokolle gespe...

Implementierung der DOM-Operation in React

Inhaltsverzeichnis Vorherige Wörter Anwendungssze...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Windows

Installieren Sie MySQL unter Windows zu Ihrer Inf...

So konfigurieren Sie Nginx's Anti-Hotlinking

Experimentelle Umgebung • Eine minimal installier...

Detaillierte Erklärung des Kopierobjekts von jQuery

<!DOCTYPE html> <html lang="de"...

Prozessdiagramm für die Sitzungsfreigabe bei Tomcat Nginx Redis

1. Vorbereitung Middleware: Tomcat, Redis, Nginx ...

Zusammenfassung der allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung

Hier habe ich hauptsächlich einige häufig verwend...

Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows

In diesem Artikel erfahren Sie, wie Sie das kompr...

Zugriffsvorgang im MySQL-Befehlszeilenmodus MySQL-Datenbankvorgang

Nutzungsumgebung Geben Sie im cmd-Modus mysql --v...

Grafisches Tutorial zur Installation von mysql5.7.17.msi

mysql-5.7.17.msi Installation, folgen Sie den Scr...

Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung

RPM-Paketverwaltung Ein Verpackungs- und Installa...

So isolieren Sie Benutzer in Docker-Containern

Im vorherigen Artikel „UID und GID in Docker-Cont...

Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)

Einführung in die Positionierung in CSS position ...