Vorlagensyntax
Vue.js verwendet eine HTML-basierte Vorlagensyntax, mit der Entwickler das DOM deklarativ an die Daten der zugrunde liegenden Vue-Instanz binden können. Alle Vue.js-Vorlagen sind legales HTML, sodass sie von Browsern und HTML-Parsern analysiert werden können, die den Spezifikationen entsprechen
In der zugrunde liegenden Implementierung kompiliert Vue die Vorlage in eine virtuelle DOM-Rendering-Funktion. In Kombination mit dem Antwortsystem kann Vue auf intelligente Weise die Mindestanzahl von Komponenten berechnen, die neu gerendert werden müssen, und die Anzahl der DOM-Vorgänge minimieren.
Die Textausgabe mit der Moustache-Syntax ({{}} Wert)
{{msg}} wird durch den Wert des msg-Attributs in den Datenobjektdaten ersetzt (und der Inhalt bei der Interpolation ändert sich, wenn sich die Nachricht ändert).
Wenn Sie mit virtuellem DOM vertraut sind und die ursprüngliche Leistung von JavaScript bevorzugen, können Sie mithilfe der optionalen JSX-Syntax auch direkt eine Renderfunktion schreiben, ohne Vorlagen zu verwenden.
Anleitung
Direktiven sind spezielle Attribute mit dem Präfix v. Es wird erwartet, dass der Wert des Anweisungsattributs ein einzelner JavaScript-Ausdruck ist (v-for ist eine Ausnahme, wir werden es später diskutieren). Die Verantwortung der Anweisung besteht darin, auf das DOM zu reagieren, wenn sich der Wert des Ausdrucks ändert
Um einige Beispiele zu nennen, verwendet die
HTML-Ausgabe die v-html-
Attributbindung und die v-Bindung
- Parameter
Einige Befehle können einen "Parameter" erhalten, der durch einen Doppelpunkt nach dem Befehlsnamen angezeigt wird. Zum Beispiel kann der Befehl v-bind verwendet werden, um HTML-Attribute reaktionsschnell zu aktualisieren: Zum
Beispiel kann v-bind einige href-Klassen des ursprünglichen Attributstils binden, um Attribute dynamisch zu aktualisieren.
V-on kann native Ereignisse binden, auf Fokus klicken und dergleichen Der Operationsbefehl
kann den Parameter v-bind empfangen: v-on: kann einen Parameter annehmen
oder sogar einen dynamischen Parameter v-bind tragen: [value] = "xxxx"
Tatsächlich bietet Vue.js für alle Datenbindungen vollständige Unterstützung für JavaScript-Ausdrücke
Wir können js Ausdruck in {{}} schreiben. Natürlich v-bind: id = "'value' + id"
Diese Ausdrücke werden im Datenbereich der Vue-Instanz, zu der sie gehören, als JavaScript analysiert. Eine Einschränkung besteht darin, dass jede Bindung nur einen einzigen Ausdruck enthalten kann, keine Anweisungen und keine Flusskontrolle
- Modifikator
Der Modifikator ist ein spezielles Suffix, das durch einen Punkt gekennzeichnet ist. Er wird verwendet, um anzugeben, dass eine Anweisung auf besondere Weise gebunden werden soll. Der Modifikator .prevent weist die v-on-Direktive beispielsweise an, event.preventDefault () für das ausgelöste Ereignis aufzurufen. PreventDefault
dient zum Abbrechen des Standardverhaltens des Browsers für das aktuelle Ereignis
.
Wenn wir beispielsweise die Komponente selbst definieren und diese Komponente verwenden, wenn wir möchten Um die nativen Ereignisse des Browsers zu binden (benutzerdefinierte Komponentenbindungsereignisse sind standardmäßig keine nativen Ereignisse), können
Sie dieses Problem mithilfe von Modifikatoren lösen
<comp v-on:click="handleClick"></comp> //自定义组件,这么写无效 无法绑定原生事件
<comp v-on:click.native="handleClick"></comp> //绑定了原生事件
- Abkürzung
Einige häufig verwendete Anweisungen enthalten abgekürzte
v-bind-Abkürzungen: v-on-Abkürzungen @
Berechnete Attribute
Obwohl wir Ausdrücke in der Vorlage verwenden können, um den Wert {{}} zu berechnen
<div>
{{"这是测试"+message}}
</div>
Dies verschlechtert jedoch tatsächlich die Logik der Ansichtsebene. Um komplexe Logik zu reduzieren, sollten Sie berechnete Attribute verwenden
Die Ausdrücke in der Vorlage sind sehr praktisch, aber für einfache Operationen ausgelegt. Wenn Sie zu viel Logik in die Vorlage einfügen, wird die Vorlage zu schwer und schwer zu warten.
Daher sollten Sie für jede komplexe Logik berechnete Attribute verwenden.
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
Das berechnete Attribut hängt vom entsprechenden gemeinsamen Attribut ab. Wenn sich das gemeinsame Attribut ändert, wird das berechnete Attribut neu berechnet und auf der Seite neu gerendert.
Im berechneten Attribut können Sie get festlegen. Die Funktion set function
get ähnelt der ursprünglichen Definition des berechneten Attributs. Der berechnete Wert
und die Set-Funktion können uns dabei helfen, allgemeine Eigenschaften zu aktualisieren
<div id="app">
{{fullName}}
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
firstName:"57",
lastName:"one",
},
computed:{
fullName:{
get:function() {
return this.firstName+" "+this.lastName;
},
set:function(value){
console.log("change");
var arr=value.split(" ");
this.firstName=arr[0];
this.lastName=arr[1];
}
}
}
})
Wir können den Wert des berechneten Attributs fullName in der Konsole
ändern und auch die Werte des Vornamens und des Nachnamens des normalen Attributs ändern (dh die festgelegte Methode des berechneten Attributs wird aufgerufen, wenn der Wert geändert wird).
Berechneter Attribut-Cache gegen Methode
Die Methode kann diesen Effekt auch erzielen. Wir können die Funktion unter {{}} aufrufen, um denselben Effekt anzuzeigen,
aber verschiedene Methoden führen die Funktion beim erneuten Rendern immer wieder aus,
und das berechnete Attribut hängt vom entsprechenden normalen Attribut ab Wenn sich diese allgemeinen Attribute nicht geändert haben, wird die Funktion nicht erneut ausgeführt (die Funktion, die dem berechneten Attribut entspricht).