Zusammenfassung der Grundkenntnisse von Vue.js_Others

Einführung

vue.js ist eine Bibliothek zum Erstellen von Webanwendungsschnittstellen

Technisch gesehen konzentriert sich Vue.js auf die ViewModel-Ebene des MVVM-Musters, die die Ansicht und das Datenbindungsmodell auf zwei Arten verbindet. Die eigentliche DOM-Manipulation und Ausgabeformatierung werden in Direktiven und Filter

abstrahiert

Versuchen Sie im Bereich der Philosophie, die MVVM-Datenbindungs-API so einfach wie möglich zu gestalten. Modularität und Zusammensetzbarkeit waren ebenfalls wichtige Designaspekte. Vue ist kein umfassendes Framework, sondern einfach und flexibel konzipiert. Sie können es für schnelles Prototyping verwenden oder mit anderen Bibliotheken kombinieren, um Ihren Front-End-Stack zu definieren.

Vue. Die js-API bezieht sich auf AngularJS, KnockoutJS, Ractive.js und Rivets.js. Trotz der Ähnlichkeiten glaube ich, dass Vue.js einen Mehrwert bietet, der es Ihnen ermöglicht, einige der vorhandenen Frameworks auszutauschen

Auch wenn Sie mit einigen dieser Begriffe bereits vertraut sind, wird empfohlen, dass Sie die folgende Übersicht der Konzepte durchgehen, da Ihr Konzept dieser Begriffe in den folgenden Vue.js möglicherweise anders ist

Konzeptübersicht

ViewModel

Ein Objekt, das Modelle und Ansichten synchronisiert. In Vue.js sind ViewModels die Konstruktoren von instanziiertem Vue oder seinen Unterklassen

var vm = new Vue({ /* options */ })

Dies ist das Hauptobjekt, mit dem Sie als Entwickler interagieren, wenn Sie Vue.js verwenden. Weitere Einzelheiten finden Sie unter Klasse: Vue.

Ansicht

Das tatsächliche HTML/DOM, das der Benutzer sieht

vm.$el // The View

Wenn Sie Vue.js verwenden, werden Sie die DOM-Operation fast nie berühren, wenn die Daten aktualisiert werden. Die Ansichtsaktualisierung kann auch für jeden testNode-Knoten erfolgen Batch- und asynchrone Ausführung ermöglichen so eine bessere Leistung.

Modell

Dies ist ein leicht modifiziertes Javascript-Objekt

vm.$data // The Model

In Vue.js sind Modelle nur einfache Javascript-Objekte und Datenobjekte. Sie können ihre Eigenschaften bearbeiten und Modelle anzeigen, ihre Änderungen beobachten und Benachrichtigungen erhalten. Vue.js verwendet ES5-Getter/Setter, um Attribute im Datenobjekt zu konvertieren, was direkte Operationen ohne Dirty Checking ermöglicht.

Das Datenobjekt wird bei Bedarf mutiert, daher hat eine Änderung den gleichen Effekt wie eine Änderung von vm.$data durch Referenz. Dies erleichtert auch mehreren ViewModel-Instanzen die Beobachtung derselben Daten.

Technische Details finden Sie unter Instanziierungsoptionen: Daten.

Richtlinien

Private HTML-Attribute weisen Vue.js an, einige Verarbeitungen im DOM durchzuführen

<div v-text="message"></div>

Das div-Element hat hier eine V-Text-Anweisung und der Wert ist message. Dies bedeutet, dass Vue.js angewiesen wird, den Inhalt dieses div-Knotens mit dem Nachrichtenattribut im viewMode zu synchronisieren.

Die

-Direktive kann jede DOM-Operation kapseln. Beispielsweise betreibt v-attr ein Attributelement, v-repeat klont ein Element basierend auf einem Array und v-on fügt eine Ereignisüberwachung hinzu, auf die wir später noch näher eingehen werden

Schnurrbartbindungen

Sie können sowohl im Text als auch in den Attributen auch eine Bindung im Schnurrbartstil verwenden. Sie werden in V-Text-V-Attr-Anweisungen übersetzt. Zum Beispiel:

<div id="person-{{id}}">Hello {{name}}!</div>

Obwohl es praktisch ist, gibt es ein paar Dinge, auf die Sie achten müssen:

Wenn Sie das src-Attribut eines Bildes festlegen, wird eine HTTP-Anfrage gesendet. Wenn die Vorlage also zum ersten Mal analysiert wird und 404 angezeigt wird, ist es zu diesem Zeitpunkt besser, v-attr zu verwenden

Internet Explorer entfernt beim Parsen von HTML ungültige interne Stilattribute. Wenn wir also IE-bindendes Inline-CSS unterstützen möchten, verwende ich immer v-style

Innerhalb von v-html können Sie drei geschweifte Klammern {{{wie folgt}}} verwenden, um nicht maskiertes HTML zu verarbeiten. Dies birgt jedoch potenzielle XSS-Angriffe und kann Fenster öffnen. Daher wird empfohlen, absolut sicher zu sein. Tun Sie dies nur wenn die Daten vollständig sind, oder bereinigen Sie nicht vertrauenswürdiges HTML über einen benutzerdefinierten Pipeline-Filter

Filter

Sie können Funktionen verwenden, um diese Rohdaten zu verarbeiten, bevor Sie die Ansicht aktualisieren. Sie verwenden eine „Pipeline“-Direktive oder -Bindung:

<div>{{message | capitalize}}</div>

Bevor der Textinhalt des Div aktualisiert wird, wird der Wert dieser Nachricht von der Großschreibungsfunktion verarbeitet. Einzelheiten finden Sie unter Filter im Detail.

Komponenten

In Vue.js ist eine Komponente ein einfacher Ansichtsmodellkonstruktor, der über Vue.component (ID, Konstruktor) registriert wird. Die V-Komponenten-Direktive der Vorlage eines anderen Ansichtsmodells kann über eine zugehörige ID verschachtelt werden. Dieser einfache Mechanismus ermöglicht die Wiederverwendung und Zusammenstellung deklarativer Ansichtsmodelle auf ähnliche Weise wie Webkomponenten, ohne dass die neuesten Browser oder leistungsstarke Polyfills erforderlich sind. Durch die Aufteilung der Anwendung in kleinere Komponenten entsteht eine stark entkoppelte und wartbare Codebasis. Weitere Einzelheiten finden Sie unter Erstellen von ViewModels.

Ein kurzes Beispiel

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

Grobe Übersetzung, bitte auf eventuelle Fehler hinweisen