Bindungsausdrü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 die ** Rechenattribute verwendet werden.
Grundlegende Beispiele
<div id = "example"> a = {{a}}, b = {{b}} </div> var vm = new vue ({el: '#example', data: {a: 1}, berechnet: {// a Getter for Computed Attribut b: function () {// `this` Diese `auf die VM -Instanz gibt diese zurück. A + 1}})Hier deklarieren wir eine berechnete Eigenschaft b. Die Funktion, die wir zur Verfügung stellen, wird als Getter für die Immobilie VM.B verwendet.
console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3
Sie können die Browserkonsole öffnen und die VM ändern. Der Wert von VM.B hängt immer vom Wert von VM.A.
Sie können berechnete Eigenschaften in einer Vorlage binden, wie Sie eine normale Eigenschaft binden würden. Vue weiß, dass VM.B von VM.A abhängt. Wenn sich VM.A ändert, werden Bindungen, die von VM.B abhängen, ebenfalls aktualisiert. Und das Beste ist, dass wir diese Abhängigkeit deklarativ erstellen: Die Getter der berechneten Eigenschaften sind sauber und haben keine Nebenwirkungen, sodass sie auch leicht zu testen und zu verstehen sind.
Berechnen Sie Eigenschaften im Vergleich zu $ Watch
Vue.js bietet eine Methode $ Watch, mit der Datenänderungen zu VUE -Instanzen beobachtet werden. $ watch ist verlockend, wenn sich einige Daten anhand anderer Daten ändern müssen - insbesondere wenn Sie von AngularJS stammen. In der Regel ist es jedoch besser, berechnete Eigenschaften anstelle eines imperativen $ Watch -Rückrufs zu verwenden. Betrachten Sie das folgende Beispiel:
<div id = "Demo"> {{fullname}} </div> var vm = new Vue ({el: '#demo', Daten: {FirstName: 'foo', LastName: 'bar', fullname: 'foo bar'}) vm. this.lastname}) vm.Der obige Code ist eine Wiederholung von Imperativen. Vergleich mit den Berechnungseigenschaften:
var vm = new Vue ({Daten: {FirstName: 'foo', Lastname: 'bar'}, berechnet: {fullname: function () {return this.firstname + '' + this.lastname}}})Das ist besser, nicht wahr?
Setter berechnen
Das berechnete Attribut ist standardmäßig nur ein Getter, aber Sie können bei Bedarf auch einen Setter bereitstellen:
// ...compute: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}// ...Wenn nun vm.fullname = 'John Doe' angerufen wird, wird der Setter genannt, und Vm.firstname und Vm.LastName werden ebenfalls entsprechend aktualisiert.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.