Lernunterlagen zum Schreiben des ersten Vue-Programms

Inhaltsverzeichnis

1. Schreiben Sie ein HTML, das erste Vue-Programm
Beachten Sie die Ansichtsvorlage und die Daten

Entscheidungsschleife
Ereignis

787 Grundsatz

el-Attribut
Datenattribut
Vorlagenattribut
Methodenattribut
Rendereigenschaften
Berechnete Eigenschaften
Eigentum beobachten

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

Div adaptive Höhe füllt automatisch die verbleibende Höhe

mysql bestimmt, ob die aktuelle Zeit zwischen der Start- und Endzeit liegt und ob die Start- und Endzeit leer sein dürfen

Artikel

Die CSS-Stilsteuerung zum Erreichen des Datensatzverlaufs des IE-Übermittlungsformulars und der Klick-Rückgabeinformationen ist weiterhin vorhanden

Artikel

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Artikel

Implementierung der Docker-Container-Statuskonvertierung

Artikel

Lernunterlagen zum Schreiben des ersten Vue-Programms

Inhaltsverzeichnis

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

Beachten Sie die Ansichtsvorlage und die Daten

Entscheidungsschleife

Ereignis

787 Grundsatz

el-Attribut

Datenattribut

Vorlagenattribut

Methodenattribut

Rendereigenschaften

Berechnete Eigenschaften

Eigentum beobachten

Div adaptive Höhe füllt automatisch die verbleibende Höhe

Docker-Reinigungskiller/Docker-Overlay-Datei nimmt zu viel Speicherplatz ein

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

So ändern Sie die Längenbeschränkung von group_concat in MySQL

Lassen Sie uns kurz über die Änderungen im Setup in vue3.0 sfc sprechen

Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)

mysql bestimmt, ob die aktuelle Zeit zwischen der Start- und Endzeit liegt und ob die Start- und Endzeit leer sein dürfen

Die CSS-Stilsteuerung zum Erreichen des Datensatzverlaufs des IE-Übermittlungsformulars und der Klick-Rückgabeinformationen ist weiterhin vorhanden

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Implementierung der Docker-Container-Statuskonvertierung

Artikel empfehlen

CSS3-Bézierkurven-Beispiel: Erstellen von Link-Hover-Animationseffekten

Der eigentliche Prozess der Einbindung von Axios in das Projekt

Detaillierte Erklärung des alternativen Implementierungscodes der vertikalen Zentrierung in CSS (unkonventionell)

JavaScript-Webformularfunktion Kommunikation voller praktischer Informationen

Beispielanalyse der Verwendung der Selbstinkrementierung von MySQL-Nichtprimärschlüsseln

Implementierungsschritte zum Installieren einer Java-Umgebung in Docker

So stellen Sie Solidity-Smart-Contracts mit ethers.js bereit

So ändern Sie die inländische Imagequelle für Docker

So erstellen Webdesigner Bilder für Retina-Displays

MySQL verwendet Trigger, um das Zeilenlimit der Tabelle in der Datenbank zu lösen. Detaillierte Erklärung und Beispiele

js, um einen einfachen Lupeneffekt zu erzielen

Detaillierte Erläuterung des adaptiven Anpassungsproblems des Vue-Mobilterminals

Detaillierte Erläuterung der Umleitungskonfiguration und -praxis von Rewrite in Nginx

Starten Sie alle gestoppten Docker-Container mit einem Befehl neu

Docker-Grundlagen-Tutorial: Detaillierte Erklärung der Dockerfile-Syntax