Was ist das Vue.js-Framework?

Im vorherigen Artikel haben wir Ihnen die einfache Installation und den schnellen Start von Vue.js vorgestellt. In diesem Artikel teilen wir Ihnen hauptsächlich mit, was das Vue.js-Framework ist und warum Sie es wählen sollten. Dieser Artikel stellt die aktuellen Trends bei der Verwendung der Front-End-Technologie sowie die Vorteile und Anwendungsszenarien von Vue.js vor. Ich hoffe, dass er Ihnen weiterhelfen kann.

Vue.js ist ein fortschrittliches Framework zum Erstellen datengesteuerter Webschnittstellen. Das Ziel von Vue.js besteht darin, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten mit einer möglichst einfachen API zu ermöglichen. Der Einstieg ist nicht nur einfach, sondern auch die Integration in Bibliotheken von Drittanbietern oder bestehende Projekte ist einfach.

Die Reihe „Vernacular, Programming“ ist wieder zurück. In dieser Reihe lernen wir gemeinsam die Grundlagen von Vue.js. Du hast richtig gelesen, Grundwissen. Deshalb bin ich davon überzeugt, dass man es im einheimischen Stil lernen kann, auch wenn man erst seit kurzer Zeit in der Branche tätig ist.

Aber ich hoffe trotzdem, dass Sie Projekterfahrung in der Entwicklung von HTML, CSS und Javascript haben. Wenn Sie keine Projekterfahrung haben oder die Kenntnisse von Vue.js bereits beherrschen, dann ist dies bei dieser Serie nicht der Fall passend zu Ihrer aktuellen Lernsituation.

1 Lernziele

In diesem Abschnitt lernen Sie:

Aktuelle Trends beim Einsatz von Front-End-Technologie

2. Was ist MVVM

Vorteile von Vue.js

Die beiden Kerne von Vue.js

5

2 Geburtshintergrund

In den letzten Jahren ist dank der Beliebtheit und Leistungsverbesserung von Mobiltelefonen die Nachfrage nach Web auf mobilen Endgeräten erheblich gestiegen, was dazu geführt hat in etwas namens Webapp, also einer mobilen Webanwendung.

Ihre Funktionen werden immer komplexer, die Interaktionen werden immer cooler und die Funktionen und Effekte rücken immer näher an die native APP heran. Zum Beispiel das Folgende:

(Der Effekt ist fast so gut wie die native APP)

Diese Art von WebApp ist nicht nur wie H5-Marketing. Webseiten haben auch coole Effekte, sie verfügen auch über komplexe Interaktionen wie Klicks, Eingaben, Dropdown-Auswahl und Ansichtswechsel. Unter solchen Geschäftsanforderungen verwenden wir immer noch die PC-seitige Entwicklungslösung, was zwangsläufig ungeeignet ist. Beispiel: Ansichtswechsel.

Auf der PC-Seite verwenden wir beim Wechseln der Ansichten das Tag 3499910bf9dac5ae3c52d5ede7383485, aber wenn es auf der mobilen Seite ist, ist es ein Kinderspiel, dass Sie auf einen Bildschirm stoßen so:

(Warten Sie, bis die Blumen verblassen)

Zu diesem Zeitpunkt kann der Benutzer nur warten ... 3 Sekunden, 5 Sekunden, 8 Sekunden ... Es ist schwer vorstellbar, dass die Verwendung des 3499910bf9dac5ae3c52d5ede7383485-Tags für Benutzer sehr unfreundlich ist wäre nicht bereit. ....

Außerdem wird die Ansicht wahrscheinlich rechtzeitig aktualisiert, wenn der Benutzer beispielsweise andere Inhalte eingibt , und verschiedene Optionen werden angezeigt, wenn Sie auf verschiedene Optionen Status und andere interaktive Effekte klicken. Sobald es zu viele Interaktionen wie diese gibt und Sie sie manuell durchführen müssen, wird der Code schnell komplex und schwer zu warten.

Um die Mängel in der Erfahrung und Entwicklung von Webanwendungen zu beheben, haben wir uns entschieden, ein MVVM-Framework zu erlernen und zu verwenden – Vue.js

3 Was ist MVVM

MVVM kann in drei Teile unterteilt werden: Ansicht --- ViewModel --- Modell Schauen Sie sich die Ansicht unten an:

Wie verstehen wir also MVVM? ?

Im obigen Bild entspricht die Ansicht links unserem DOM-Inhalt, der Seitenansicht, die wir sehen, und das Modell rechts entspricht unserem Datenobjekt, beispielsweise den Informationen eines Objekts:

{ 

name:"张三", 
age:21,

}

Der Monitor in der Mitte ist dafür verantwortlich, die Daten auf beiden Seiten zu überwachen und die andere Seite zu benachrichtigen, entsprechende Änderungen vorzunehmen. Beispiel: Wenn Sie den Wert des Namens in der Modellebene in „李思“ ändern, ändert sich der in der Ansichtsebene angezeigte „Zhang San“ automatisch in „李思“, und dieser Vorgang wird von ViewModel You ausgeführt Sie müssen keinen manuellen Code schreiben, um ihn zu implementieren (Sie müssen das DOM nicht mehr manuell manipulieren).

Wenn Sie komplexe DOM-Operationen geschrieben haben, können Sie den Komfort spüren, den es mit sich bringt.

Dies ist das MVVM-Framework. Zu den zu MVVM gehörenden JS-Frameworks gehören auch React.js und Angular.js.

Hier werden wir nicht analysieren, welches der drei Frameworks besser ist. Jedes Entwicklungsteam hat eine andere Situation und berücksichtigt unterschiedliche Faktoren. Hier sprechen wir nur über die Vorteile von Vue.js:

1. Vue.js ist leichter und schneller

2

4 Der Kern von Vue

Nach so viel Vorbereitung kommen wir endlich zum Kern von Vue.

Also lernen wir Vue.js kennen. Hier ist ein Auszug aus der Einführung auf der offiziellen Website:

Realisieren Sie die Bindung und Kombination von Antwortdaten durch die einfachste API, die möglich ist Komponente von

hat zwei Schlüsselwörter: Datenbindung und Komponenten anzeigen .

Vues Datentreiber: Datenänderungen steuern die automatische Aktualisierung der Ansicht. Traditionell müssen Sie das DOM manuell ändern, um die Ansicht zu ändern, und das wird auch der Fall sein automatisch die Ansicht ändern. Ein Wort: cool. Sie müssen sich nicht mehr um DOM-Updates kümmern. Dies ist die Umsetzung der MVVM-Idee.

Komponentisierung anzeigen: Teilen Sie die gesamte Webseite in Blöcke auf, und jeder Block kann als Komponente betrachtet werden. Eine Webseite besteht aus mehreren Komponenten, die zusammengefügt oder verschachtelt sind. Schauen Sie sich das Bild unten an:

Genauer gesagt, wie eine Komponente während des Entwicklungsprozesses implementiert wird und welche Blöcke in Komponenten unterteilt werden können. Wir werden sie einzeln vorstellen In den folgenden Kapiteln müssen Sie nur wissen, dass eine Webseite in Vue.js als aus mehreren Komponenten zusammengesetzt betrachtet werden kann.

5 anwendbare Szenarien

Wenn Sie immer noch jquery verwenden, um Ihr DOM häufig zu bedienen und die Seite zu aktualisieren, können Sie Vue.js verwenden, um Ihr DOM zu befreien.

Wenn Ihr Projekt mehrere Teile enthält, die gleich sind und in einer Komponente gekapselt werden können, können Sie es mit Vue.js versuchen.

Darüber hinaus verwendet die Kernimplementierung von Vue.js die Object.defineProperty-Funktion von ES5, die mit Browsern von IE8 und niedriger nicht kompatibel ist. Daher muss Ihr Projekt mit diesen niedrigeren Browserversionen kompatibel sein. , dann ist Vue.js nicht anwendbar.

Der Zweck der Entwicklung eines Projekts besteht schließlich nicht darin, ein bestimmtes Framework zu verwenden.

6 Zusammenfassung dieses Abschnitts

Um den Entwicklungsanforderungen aktueller mobiler Webapp-Projekte besser gerecht zu werden, wurde das MVVM-Framework geboren, und Vue.js ist ein solches js-Framework, seine zwei Kerne: datengesteuert und komponentenbasiert.

Verwandte Empfehlungen:

Vue.js-Framework implementiert Zugticket-Abfragesystem

vue.js-Instanzobjekt und Komponentenbaum Detaillierte Erläuterung der Beispiele

Vue.js-Komponenten-Kommunikationsbeispiel-Sharing

Das obige ist der detaillierte Inhalt vonWas ist das Vue.js-Framework?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!