Einige Details zur Verwendung von vue Components_vue.js

In diesem Artikel werden hauptsächlich einige Details zur Verwendung von Vue-Komponenten vorgestellt. In diesem Artikel werden Sie anhand grundlegender Beispiele ausführlich vorgestellt.

Detail 1

Grundbeispiel

Laufergebnisse:

Jeder weiß das oben Genannte, daher werde ich hier nicht auf Details eingehen. Zurück zum Code: Manchmal muss jede Zeile im Tbody eine Unterkomponente sein. Wir können so schreiben und eine globale Komponente wie folgt definieren:

Dann können wir es im Körper so nennen:

Laufergebnisse:

Sie können sehen, dass die Zeile ausgedruckt ist, aber tatsächlich keinen Aufgabeninhalt enthält. Wo liegt also unser Problem? Zurück zum Code stellten wir fest, dass wir beim Erstellen der Vue-Instanz den zu mountenden Punkt nicht angegeben hatten, also verwendeten wir el, um den Dom anzugeben, den Vue übernommen hatte, wie folgt:

Laufergebnisse:

Es fühlt sich an, als gäbe es kein Problem, aber ist das wirklich so? Wir überprüfen die DOM-Struktur, indem wir die Elemente überprüfen:

Können Sie den Fehler sehen? Die normalen drei Tr sollten sich im Körper befinden, aber jetzt befinden sie sich auf derselben Ebene wie der Körper. Was ist los?

In der H5-Spezifikation müssen wir einen Tbody in der Tabelle haben und tr muss im Tbody platziert werden. Jetzt verwenden wir die als Zeile geschriebene Unterkomponente, sodass unser Browser beim Parsen Probleme haben wird.

Wie sollen wir also den Fehler beheben, wenn wir auf diese Situation stoßen? Zu diesem Zeitpunkt können wir dieses Problem mithilfe des von vue bereitgestellten is -Attributs lösen. Es ist ganz einfach. Nur tr kann in tbody geschrieben werden, also schreiben wir alle tr. Wenn wir tr anzeigen möchten, müssen wir jedoch nicht nur den leeren Inhalt von tr anzeigen Zeilenkomponente, also wie macht man das?

Wir können ein zusätzliches Attribut is in tr hinzufügen, um es gleich row zu machen, wie folgt:

Die Bedeutung dieses Codes ist: Ich möchte Ich verwende eine Komponente, aber ich kann diese Komponente nicht direkt schreiben, daher haben wir eine tr geschrieben. Dies bedeutet, dass es sich um eine Zeilenkomponente handelt, die nicht nur den H5-Spezifikationen entspricht Zeigt den Inhalt unserer Komponente an. Das Programm wird keine Fehler mehr aufweisen.

Laufergebnisse:

Alles ist normal.

同样我们使用 ul, select 标签的时候，也可以用这种方法。

Detail 2

Grundlegendes Beispiel

Wir haben eine Komponentenzeile mit einem Text darin definiert. Wenn wir diesen Text separat extrahieren und als Variable darstellen möchten, schreiben Sie höchstwahrscheinlich so:

Es scheint perfekt, aber wenn Sie den Browser öffnen und ausführen, werden Sie feststellen, dass Ihnen Bugs zuwinken:

Die Hauptbedeutung ist, dass Daten eine Funktion und kein Objekt sind. In der Stammkomponente, die die Instanz des äußersten Vue ist, ist es für uns in jedem Fall in Ordnung, sie durch zu definieren das Objekt, aber in Nicht-Unterkomponenten der Root-Komponente können auf diese Weise nicht definiert werden. Die Datendefinition muss eine Funktion sein, und diese Funktion muss ein Objekt wie folgt zurückgeben:

Laufendes Ergebnis:

Dies löst das Problem.

ist so definiert, weil eine Unterkomponente nicht nur einmal wie die Stammkomponente aufgerufen wird, sondern mehrmals aufgerufen werden kann. Wir möchten also nicht, dass die Daten jeder Unterkomponente mit Andere <code>之所以这么定义，原因是一个子组件不像根组件只被调用一次，而是可以多次调用，那么每一个子组件的数据我们不希望和<a href="http://www.php.cn/java/java-alibaba-qita.html" target="_blank">其它</a>的子组件产生冲突或者说每个子组件都应该有一个自己的数据域，通过函数返回一个对象就可以实现这个需求。 Unterkomponenten stehen in Konflikt oder jede Unterkomponente sollte ein eigenes Datenfeld haben. Diese Anforderung kann sein Dies wird durch die Rückgabe eines Objekts aus der Funktion erreicht.

Detail 3

Grundlegendes Beispiel

Führen Sie es aus, klicken Sie, um es zu öffnen, kein Problem. Vue empfiehlt nicht, Dom im Code zu betreiben, aber wenn es um extrem komplexe Animationseffekte geht, müssen wir Dom wirklich in Vue bedienen. Wir können über ref wie folgt referenzieren:

Zu diesem Zeitpunkt haben wir ein Bedürfnis, nämlich den Inhalt auszudrucken, wenn auf p geklickt wird. Wir können den p-Knoten per Referenz abrufen und dann den Inhalt in p ausdrucken:

Laufendes Ergebnis:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Erstellen eines persönlichen Blogs mit VuePress (mit Code)

Verarbeitung der Zusammenstellung von Vue-Projekte und deren Bereitstellung auf Nicht-Websites. Detaillierte Erläuterung der Stammverzeichnismethode

Das obige ist der detaillierte Inhalt vonEinige Details zur Verwendung von vue Components_vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!