Heim  >  Artikel  >  Web-Frontend  >  In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

青灯夜游
青灯夜游nach vorne
2023-01-05 20:45:192164Durchsuche

In diesem Artikel geht es um die Komponentenprogrammierung in Vue und um ein Verständnis der Vue-Komponentisierung, der wichtigsten Einzeldateikomponente. Ich hoffe, dass er für alle hilfreich ist! Durch die Komponentisierung spüre ich immer mehr die Leistungsfähigkeit des Frameworks Ich werde nicht über die verwirrenden Abhängigkeiten einer Webseite sprechen. Warum sagen Sie also, dass die Code-Wiederverwendungsrate nicht hoch ist? Habe ich nicht alle wiederverwendbaren CSS- und JS-Dateien eingeführt? Das liegt daran, dass der obere und untere Teil der beiden Seiten oben und unten gleich sind. Ich kann sie direkt kopieren und nicht wiederverwenden. [Verwandte Empfehlungen:

vuejs-Video-Tutorial

, In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in VueWeb-Front-End-Entwicklung

] Die Komponente kann jede Funktion kombinieren, die alle für diese Funktion erforderlichen Dateien enthält. Wenn sie sich an einer anderen Stelle befinden, geben Sie sie einfach direkt ein

Beachten Sie, dass unser HTML nur der HTML-Teil dieses separaten Teils ist.

Komponenten können verschachtelt werden, genau wie einer unserer Abschnitte in andere Abschnitte unterteilt werden kann

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in VueDefinition

:

lokale FunktionenCode (css, html, js) und Ressourcen implementieren (mp3, MP4, ttf usw.) Sammlung

Modul: Eine JS-Datei ist ein Modul

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

Komponente: Sammlung

    Modularisierung: besteht darin, eine große JS-Datei in mehrere verzweigte Module aufzuteilen Vervollständigen Sie gemeinsam eine Funktion (wie bei der vorherigen modularen ES6-Programmierung)
  • Komponentisierung: Teilen Sie eine Webseite entsprechend unterschiedlicher Funktionen in verschiedene Komponenten auf

    In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

  • 2. Nicht einzelne Dateikomponenten
  • Das heißt, eine Datei (a.html) enthält n Komponenten Einzelne Dateikomponente: Eine Datei (a.vue

    ) enthält nur eine Komponente
  • 1. Grundlegende Verwendung
  • um den vorherigen Ansatz zu vervollständigen Funktion
  • 1.1 Komponenten erstellen

  • Natürlich kann unser obiger Fall in zwei Komponenten unterteilt werden, Schüler und Schule, um zwei verschiedene Funktionen auszuführen.

Beim Erstellen unserer Komponente sind mehrere Punkte zu beachten:

Zuerst müssen wir uns daran erinnern, wie wir Vue.extend außerhalb der VM-Instanz erstellen und dann innerhalb der VM-Instanz Konfigurationsobjekt,

Wir haben bereits darüber gesprochen. Komponenten sind tatsächlich sehr ähnlich. Die zuvor erwähnten Überwachungsmethoden, berechneten Eigenschaften, benutzerdefinierten Anweisungen, Filter usw. können hier verwendet werden Sie sind gleich, aber dennoch ein wenig anders.

Der erste Unterschied: Wir müssen beim Erstellen unserer Komponenten kein El-Konfigurationselement schreiben ist nur ein Baustein und kann dorthin verschoben werden, wo er benötigt wird

Egal wie viele Komponenten es gibt, am Ende werden sie alle vom großen Bruder VM verwaltet, also konfiguriert VM el, um anzugeben, wer bedient werden soll

Dann ist das Datenkonfigurationselement anders.

Ich habe bereits gesagt, dass es zwei Formen von el und data gibt: el ist $mount, Daten können als Funktionsform abgekürzt werden, aber der Rückgabewert muss ein Objekt sein Komponente, Daten müssen als funktionale Form geschrieben werden, denn wenn ich Ihre Komponente in diesem Fall verwenden möchte, muss sie auch von einer anderen Webseite verwendet werden Objekt, es nimmt den gleichen Platz im Speicher ein, aber die Funktion ist anders, um Ihren Rückgabewert zu erhalten Eine Variable, um den Rückgabewert zu erhalten. Jeder ist für seine eigenen Angelegenheiten verantwortlich.

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

Eine unserer Komponenten wurde zuvor analysiert , CSS- und HTML-Teilcode, aber hier gibt es nur JS-Logik. Wir müssen auch eine Vorlage definieren

1.2 Registrieren Sie die Komponente Nur die Variable, die wir gerade genommen haben Name, aber es wird im Allgemeinen empfohlen, dasselbe zu schreiben, da Sie direkt eine Abkürzung schreiben können

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue und dies ist eine teilweise Registrierungsmethode

1.3 Komponentisierte Tags schreiben

Schreiben Sie den Namen Komponentenname in Form eines HTML-Tags,

benannt: Komponentenetikett

Jede komponentenbasierte Etikettendaten ist separat und beeinträchtigt einander nicht

1.4 Registrieren Sie globale KomponentenIn diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

1.5 Hinweise

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in VueKomponentenname:

Einzelnes Wort (alles in Kleinbuchstaben oder der erste Buchstabe wird groß geschrieben), mehrere Wörter (alles in Kleinbuchstaben oder dasselbe wie in den vorherigen benutzerdefinierten Anweisungen – verbinden und zum ursprünglichen Attributnamen zurückkehren, eingeschlossen in ' ', es gibt eine andere Möglichkeit, sie alle einzuschließen. Der erste Buchstabe des Wortes muss einschließlich des ersten Buchstabens großgeschrieben werden (gilt jedoch nur für Gerüstumgebungen))

Neues Konfigurationselement
    Name
  • , Sie können den von verwendeten Namen angeben Die Komponente in den Entwicklertools

    Definieren Sie die Komponentenabkürzung

    direkt als Objekt abgekürzt, schreiben Sie nicht Vue.extend

2. Verschachtelung von Komponenten In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue Zunächst haben wir im Allgemeinen nur eine Komponente unter der VM für Formale Entwicklung

app
    Diese Komponente fungiert als Agent für unsere VM und verwaltet alle Komponenten. Es gibt zwei Unterkomponenten, die von unserer App verwaltet werden. Es gibt Hallo und Schule, daher müssen sie in der App und der Komponente registriert werden In der Vorlage der App ist eine Unterkomponente „Schüler“ eingetragen. Ebenso muss sie unter „Schüler“ registriert werden, und die endgültige VM-Instanz hat nur eine in der Vorlage Registrierte Komponente, App, und unsere HTML-Struktur hat auch nur ein Komponenten-Tag, App Komponente
  • , schreiben Sie bis zum Ende der App und schreiben Sie schließlich die App in die VM

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

  • 3. VueComponent-Konstruktor

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in VueUnsere Komponente ist im Wesentlichen ein Konstruktor von VueComponent. Sobald wir Vue.extend haben, hilft es uns, einen Konstruktor zu erstellen und ihn dieser Variablen zuzuweisen. Wir müssen nur das Komponenten-Tag schreiben. Oder das Tag schließen , Vue generiert beim Parsen eine Instanz dieses Konstruktors und hilft uns beim Erstellen neuer

Der bei jedem Aufruf von Vue.extend erstellte Konstruktor ist brandneu Bei der Analyse des Quellcodes können wir feststellen, dass Vue.extend erstellt einen neuen Komponentenkonstruktor

  • Die This-Punkte unserer Funktionen in Methoden, Berechnet, Watch usw. im neuen Vue sind alle VM-Instanzobjekte. Die This-Punkte unserer Funktionen in Methoden, Berechnet, Watch usw. in der Komponente sind alles Instanzobjekte von VueComponent, bezeichnet als vc (erscheint nur in der Klasse, das Komponenteninstanzobjekt wird außerhalb erwähnt), ist im Grunde dasselbe wie vm und verfügt außerdem über Daten-Proxy, Daten-Hijacking usw.

4. Eine wichtige integrierte Beziehung

VueComponent.prototype.proto == Vue.prototypeDer Thread in meinem Herzen muss erstellt werden

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

Zweck: Lassen Sie die Komponente vc auch die Eigenschaften und Methoden verwenden zum Vue-Prototyp

Drei. Einzeldateikomponente

Wir sagten, dass eine Komponente.vue-Datei HTML, JS und CSS enthält, sodass eine Standard-Einzeldateikomponente HTML (Vorlagen-Tag) und JS (Skript-Tag) erfordert. , CSS (Style-Tag)

Plug-in: vetur (pine wu)Nach der Installation können Sie mit der Tastenkombination

  • Zuerst Erstellen Sie eine funktionale Komponente Schule

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

Was beachtet werden muss, ist

Eins. Da unsere Komponenten von anderen referenziert werden müssen, müssen wir sie beim Schreiben von Komponenten offenlegen. Im Allgemeinen handelt es sich um Skripte, und dies ist eine Abkürzung. Die eigentliche Originalversion lautet wie folgt: ,

two. Es gibt auch unser

Name-Konfigurationselement Im Allgemeinen ist der Stammdateiname konsistent. Unsere Dateinamen haben im Allgemeinen die Form von Großbuchstaben, die mit dem Vue-Verwaltungstool konsistent sein können

Drei. Unser Vorlagen-Tag sollte von einem div umschlossen werden

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

    und dann eine Student-Komponente definieren

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

Wenn kein Stil vorhanden ist, müssen Sie den Stil nicht schreiben

  • Die nächste Komponente

    Wie bereits erwähnt, muss jedoch eine Komponente vorhanden sein, die die VM ersetzt, um alle folgenden Komponenten zu verwalten, und zwar unter einer Person und über zehntausend Personen. Das ist die App-Komponente

    Diese Komponente wird im Allgemeinen verwendet, um unsere Sub-Komponenten vorzustellen. Komponenten und registrieren Sie sie. Achten Sie auf die Einleitung. Sie wird außerhalb des Exports geschrieben und muss dann in der Vorlage aufgerufen werden und bedienen Sie, indem Sie normalerweise eine js-Datei von main definieren.

  • Wenn Sie die nächste Seite sauber halten möchten, können Sie hier eine Vorlage schreiben, um die App-Komponentenbezeichnung hinzuzufügen uns auf der nächsten Seite kann wirksam werden

In diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue

  • Von nun an haben wir eine Einzeldatei-Komponentenumgebung eingerichtet, die jedoch zur Ausführung mit der Gerüstumgebung koordiniert werden muss. (Teilen von Lernvideos:

    Vuejs-Einführungs-Tutorial

    , Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonIn diesem Artikel erhalten Sie eine detaillierte Erläuterung der Komponentenprogrammierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen