Vorwort
VUE.JS ist eine datengesteuerte Webschnittstellenbibliothek. Vue.js konzentriert sich nur auf Sichtschichten und kann leicht in andere Bibliotheken integriert werden. Der Code ist nur 24 KB nach der Komprimierung.
Der folgende Code ist das einfachste Beispiel von Vue.js. Wenn sich der Inhalt in der Eingabe ändert, ändert sich der Inhalt des P -Knotens entsprechend.
<!-html-> <div id = "Demo"> <p> {{message}} </p> <input v-model = "message"> </div> new Vue ({el: '#demo', Data: {message: 'Hallo Vue.js!'}})Grundlegende Syntax von Vue.js
Text einfügen
<span> Nachricht: {{text}} </span>Fügen Sie den Text im HTML -Format ein und zeigen Sie es im HTML -Format auf der Seite an
<span> Nachricht: {{{html}}} </span>Der Inhalt folgt nicht den Änderungen der Daten
<span> Nachricht: {{ * text}} </span>Daten zu Eigenschaften binden
<div id = "item-{{id}}"> </div>Verwenden von JS -Ausdrücken in {{}}
{{number + 1}} {{ok? 'Yes': 'nein'}} {{message.split (''). Reverse (). Join ('')}}Verwenden von JS -Anweisungen in {{}}
{{var a = 1}} {{if (ok) {return message}}}Wenn Befehl
<p v-if = "Begrüßung"> Hallo!
HREF -Richtlinie
<a v-bind: href = "url"> </a> oder <a href = "{{url}}"> </a>Klicken Sie auf den Befehl
<a v-on: click = "dosomething">
Befehl eingeben
<input v-Model = "newtodo" v-on: keyUp.enter = "addtodo">
Abkürzung
V-Bind
<!-Komplette Syntax-> <a v-Bind: href = "url"> </a> <!-Abkürzung-> <a: href = "url"> </a> <!-komplette Syntax-> <button v-bind: deaktiviert = "SOMEYMICONDITION"> Button </button <! : Disabled = "SOMEDYNAMICCONDITION"> Button </button>
V-on
<!-Vollständige Syntax-> <a v-on: click = "dosomething"> </a> <!-Abkürzung-> <a @click = "dosomething"> </a>
Zusammenfassen
Ausdrücke in Vorlagen sind sehr bequem, sie werden jedoch nur für einfache Operationen verwendet. Die Vorlage soll die Struktur der Ansicht beschreiben. Wenn Sie zu viel Logik in eine Vorlage einfügen, kann die Vorlage zu schwer und schwer zu warten. Aus diesem Grund beschränkt Vue.js die Bindungsausdrücke auf einen Ausdruck. Wenn mehr als ein Ausdruck erforderlich ist, sollten berechnete Eigenschaften verwendet werden. Der Editor wird aktualisiert, wie die berechneten Attribute später verwendet werden. Interessierte Freunde, bitte achten Sie weiterhin auf Wulin.com.