einführen
Vue.js ist eine Bibliothek, mit der Webanwendungsschnittstellen erstellt werden
Technisch gesehen konzentriert sich Vue.js auf die ViewModel -Schicht des MVVM -Modus, der Ansichts- und Datenbindungsmodelle auf zwei Arten verbindet. Das tatsächliche DOM -Betrieb und das Ausgangsformat werden in Anweisungen (Richtlinien) und Filter (Filter) unterzogen.
Versuchen Sie im Bereich der Philosophie, die MVVM -Datenbindung -API so einfach wie möglich zu gestalten. Modularität und Komposition sind auch wichtige Konstruktionsüberlegungen. Vue ist kein umfassender Rahmen, es ist einfach so ausgelegt und flexibel. Sie können es zum schnellen Prototypen verwenden oder mit anderen Bibliotheken mischen und anpassen, um den Front-End-Stapel zu definieren.
Vue. Die JS -API bezieht sich auf AngularJs, Knockoutjs ractive.js Rivets.js. Trotz der Ähnlichkeiten glaube ich, dass Vue.js eine wertvolle Möglichkeit bietet, Ihren Wert in einigen vorhandenen Frameworks jetzt zu erhalten
Auch wenn Sie mit einigen dieser Begriffe bereits vertraut sind, wird empfohlen, den folgenden Überblick über die Konzepte zu geben, da sich die Konzepte dieser Begriffe unter vue.js unterscheiden können
Konzeptübersicht
ViewModel
Ein Objekt, synchronisiert Modelle und Ansichten. In Vue.js ist ViewModels der instanziierte Vue -Konstruktor oder die Unterklasse
var vm = new Vue ({ / * Optionen * /})Dies ist das Hauptobjekt, mit dem Sie als Entwickler mit Vue.js. Weitere Informationen finden Sie unter Klasse: Vue.
Sicht
Das tatsächliche HTML/DOM vom Benutzer gesehen
vm. $ el // die Ansicht
Bei Verwendung von Vue.js berühren Sie die DOM -Operation mit Ausnahme Ihrer eigenen benutzerdefinierten Anweisungen kaum. Wenn die Daten aktualisiert werden, wird das Update der Ansicht automatisch ausgelöst. Das Update der Ansicht kann zu jedem Testnode -Knoten genau erreicht werden. Sie werden auch asynchron angegeben und ausgeführt, um eine bessere Leistung zu erzielen.
Modell
Dies ist ein leicht modifiziertes JavaScript -Objekt
vm. $ data // das Modell
In Vue.js ist das Modell nur ein einfaches JavaScript -Objekt, ein Datenobjekt, Sie können ihre Eigenschaften manipulieren und Modelle anzeigen, ihre beobachten und dann Benachrichtigungen zum Ändern erhalten. Vue.js verwendet Getter/Setter von ES5, um Eigenschaften in Data -Objekt -HU zu konvertieren, was den direkten Betrieb ohne schmutzige Überprüfung ermöglicht.
Das Datenobjekt hat zu geeigneten Zeiten Mutationen, so dass das Ändern von VM. Dies erleichtert auch mehrere ViewModel -Instanzen, um dieselben Daten zu beobachten.
Weitere technische Details finden Sie in Instantiationsoptionen: Daten.
Richtlinien
Das private HTML -Attribut fordert Vue.js an, eine Verarbeitung über DOM durchzuführen
<div v-text = "message"> </div>
Das DIV-Element hier hat eine V-Text-Anweisung und der Wert ist die Nachricht. Es bedeutet, Vue.js zu sagen, dass der Inhalt dieses Div -Knotens mit dem Nachrichtenattribut in ViewMode synchronisiert ist
Anweisungen können jeden DOM -Vorgang zusammenfassen. Zum Beispiel arbeitet V-ATTR mit einem Attributelement, das ein Element basierend auf einem Array, V-on Additional Event-Hören kloniert, und wir werden es später diskutieren.
Schnurrbartbindungen
Sie können auch Bindungen im Schnurrbartstil in Text und Eigenschaften verwenden. Sie werden in die V-Text-V-ATTR-Direktive übersetzt. Zum Beispiel:
<div id = "person-{{id}}"> Hallo {{name}}! </div>Obwohl es bequem ist, müssen Sie einige Dinge beachten, um darauf zu achten:
Wenn ein Bild-SRC-Attribut festgelegt ist, wird eine HTTP-Anforderung gesendet. Wenn die Vorlage zum ersten Mal analysiert wird, ist es besser, V-ATTR zu verwenden
Bei der Parsen von HTML löscht Internet Explorer das ungültige Attribut für interne Stil. Wenn wir also die IE-Bindungs-Inline-CSS unterstützen möchten, verwende ich immer V-Style
In der V-HTML können Sie drei Klammern verwenden, um nicht umgebaute HTML zu verarbeiten. Dies führt zu potenziellen XSS-Angriffen und kann Fenster öffnen. Daher wird empfohlen, dies nur zu tun, wenn die Daten absolut sicher sind, oder nicht vertrauenswürdig über einen benutzerdefinierten Pipeline -Filter reinigen
Filter
Diese Rohdaten können mit Funktionen verarbeitet werden, bevor die Ansicht aktualisiert wird. Sie verwenden eine "Pipeline" -Direktive oder -Bindung:
<div> {{message | Kapitalisieren Sie}} </div>Bevor der Textinhalt der DIV aktualisiert wird, wird der Wert dieser Nachricht durch die Kapitalisierungsfunktion verarbeitet. Einzelheiten finden Sie in den Filtern ausführlich.
Komponenten
In Vue.js ist eine Komponente ein einfacher Ansichtsmodellkonstruktor, der bei Vue.comPonent (ID, Konstruktor) registriert ist. Mit einer zugehörigen ID kann die V-Komponenten-Richtlinie für die Vorlage eines anderen Ansichtsmodells verschachtelt werden. Dieser einfache Mechanismus macht das deklarierte Ansichtsmodell wiederverwendet und kombiniert auf ähnliche Weise wie Webkomponenten, ohne dass der neueste Browser oder schwere Polyfills erforderlich sind. Durch die Aufschlüsselung der Anwendung in kleinere Komponenten ist das Ergebnis eine stark entkoppelte und wartbare Codebasis. Weitere Informationen finden Sie unter Komposition ViewModels.
Ein kurzes Beispiel
<div id = "Demo"> <H1> {{title | Großbuchstaben}} </h1> <ul> <li v-repeat = "todos" v-on = "klicken: Done =! Done"> {{Inhalt}} </li> </ul> </div> var Demo = new vue ({el: '#demo', Daten: {title: 'todos', todos: [{feur: true, content: 'javaScript'}, {fone: false, Inhalt: 'Learn Vue.js'}}})Ungefähre Übersetzung, bitte weisen Sie alle Fehler auf