Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie mit Vue ein schwebendes/verstecktes Menü in der oberen rechten Ecke der Seite

php中世界最好的语言
Freigeben: 2018-06-01 11:22:05
Original
2692 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit Vue ein schwebendes/verstecktes Menü in der oberen rechten Ecke der Seite implementieren. Welche Vorsichtsmaßnahmen gibt es für die Verwendung von Vue, um ein schwebendes/verstecktes Menü in der oberen rechten Ecke der Seite zu implementieren? Seite? Hier ist ein praktischer Fall, schauen wir uns das an.

Dies ist eine sehr häufige Funktion auf den meisten Websites. Klicken Sie auf den Avatar in der oberen rechten Ecke der Seite, um ein schwebendes Menü anzuzeigen. Klicken Sie an einer anderen Stelle auf der Seite oder klicken Sie erneut auf den Avatar, um das Menü auszublenden.

Als jQuery-Front-End-Belagerungslöwe kann man sagen, dass es sehr einfach ist, diese Funktion zu implementieren, aber für einen Anfänger, der gerade einen Blick auf das Vue-Dokument geworfen hat , es gibt immer noch Fallstricke Es ist nur dann vollständig, wenn man selbst darauf tritt.

Wissenspunkte

  • Kommunikation zwischen Komponenten und Komponenten

  • Berechnung Eigenschaften

Text

1. Übergeordnete Komponente

Hierbei handelt es sich vorerst nur um die Systemmenüfunktion, Routing ist also noch nicht beteiligt.

Die Grundidee besteht darin, den booleschen Wert showCancel über Requisiten an die untergeordnete Komponente zu übergeben und Ereignisse an die übergeordnete bzw. untergeordnete Komponente zu binden, um den Anzeigestatus des Systemmenüs zu steuern. Im gebundenen Klickereignis der übergeordneten Komponente wird der an die untergeordnete Komponente übergebene showCancel-Wert zurückgesetzt.

Hier kommt der erste kleine Wissenspunkt – Unterkomponentenaufruf:

Schreiben Sie zuerst das benutzerdefinierte Element, das darauf wartet, von der Unterkomponente gerendert zu werden:

<t-header :showCancel=showCancel></t-header>
Nach dem Login kopieren

Dann schreiben Sie das Unterkomponente importieren:

import THeader from "./components/t-header/t-header";
Nach dem Login kopieren

Dann registrieren Sie die Unterkomponente in der Komponente:

components: {
 THeader
}
Nach dem Login kopieren

An diesem Punkt sind neue Schüler möglicherweise verwirrt darüber, wie diese Codezeilen die Unterkomponente zu < t-header> zuordnen. Tag, in der offiziellen Dokumentation heißt es:

Bei der Registrierung einer Komponente (oder Requisite) können Sie kebab-case (durch Bindestriche getrennte Benennung), camelCase (benennende Kamel-Fallschrift) oder PascalCase (benannt mit dem Anfangsbuchstaben von) verwenden das Wort großgeschrieben);

Bitte verwenden Sie in der HTML-Vorlage die Groß-/Kleinschreibung von kebab;

Mein Verständnis ist (zum Beispiel), wenn das benutzerdefinierte Element ist Der Komponentenname kann auf drei Arten geschrieben werden: t-header, tHeader und THeader. In diesem Fall wird die registrierte Komponente automatisch erkannt und als gerendert.

Es ist zu beachten, dass es sich bei dem oben genannten um eine HTML-Vorlage handelt, die mit