VueJS - Reaktive Schnittstelle
VueJS bietet Optionen zum Hinzufügen von Reaktivität zu Eigenschaften, die dynamisch hinzugefügt werden. Beachten Sie, dass wir bereits eine vue-Instanz erstellt haben und die watch-Eigenschaft hinzufügen müssen. Dies kann wie folgt erfolgen:
Beispiel
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>Im Datenobjekt ist ein Eigenschaftszähler als 1 definiert. Der Zähler wird erhöht, wenn wir auf die Schaltfläche klicken.
Die Vue-Instanz ist bereits erstellt. Um Watch hinzuzufügen, müssen wir dies wie folgt tun:
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});Wir müssen $ watch verwenden, um watch außerhalb der vue-Instanz hinzuzufügen. Es wurde eine Warnung hinzugefügt, die die Wertänderung für die Zählereigenschaft anzeigt. Es wurde auch eine Timer-Funktion hinzugefügt, dh setTimeout, die den Zählerwert auf 20 setzt.
setTimeout(
function(){
vm.counter = 20;
},2000
);Bei jedem Wechsel des Zählers wird der Alarm der Überwachungsmethode ausgelöst, wie im folgenden Screenshot gezeigt.
VueJS kann das Hinzufügen und Löschen von Eigenschaften nicht erkennen. Der beste Weg ist, immer die Eigenschaften zu deklarieren, die in der Vue-Instanz im Voraus reaktiv sein müssen. Falls wir zur Laufzeit Eigenschaften hinzufügen müssen, können wir die Methoden Vue global, Vue.set und Vue.delete verwenden.
Vue.set
Diese Methode hilft beim Festlegen einer Eigenschaft für ein Objekt. Es wird verwendet, um die Einschränkung zu umgehen, dass Vue keine Eigenschaftsergänzungen erkennen kann.
Syntax
Vue.set( target, key, value )Wo,
Ziel: Kann ein Objekt oder ein Array sein
Schlüssel: Kann eine Zeichenfolge oder eine Zahl sein
Wert: Kann ein beliebiger Typ sein
Schauen wir uns ein Beispiel an.
Beispiel
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Im obigen Beispiel wird zu Beginn eine Variable myproduct mit dem folgenden Code erstellt.
var myproduct = {"id":1, name:"book", "price":"20.00"};Es wird dem Datenobjekt in der Vue-Instanz wie folgt übergeben:
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});Überlegen Sie, ob Sie dem myproduct-Array eine weitere Eigenschaft hinzufügen möchten, nachdem die Vue-Instanz erstellt wurde. Dies kann wie folgt erfolgen:
vm.products.qty = "1";Sehen wir uns die Ausgabe in der Konsole an.
Wie oben gezeigt, wird bei Produkten die Menge hinzugefügt. Die get / set-Methoden, die im Grunde genommen die Reaktivität erhöhen, sind für die ID, den Namen und den Preis verfügbar und nicht für die Menge.
Wir können die Reaktivität nicht erreichen, indem wir nur ein Vue-Objekt hinzufügen. VueJS möchte meistens, dass alle seine Eigenschaften zu Beginn erstellt werden. Falls wir es jedoch später hinzufügen müssen, können wir Vue.set verwenden. Dazu müssen wir es mit vue global einstellen, dh mit Vue.set.
Beispiel
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Wir haben Vue.set verwendet, um die Menge mit dem folgenden Code zum Array hinzuzufügen.
Vue.set(myproduct, 'qty', 1);Wir haben das vue-Objekt getröstet und es folgt die Ausgabe.
Jetzt können wir sehen, wie get / set für die Menge mit Vue.set hinzugefügt wird.
Vue.delete
Diese Funktion wird verwendet, um die Eigenschaft dynamisch zu löschen.
Beispiel
Vue.delete( target, key )Wo,
Ziel: Kann ein Objekt oder ein Array sein
Schlüssel: Kann eine Zeichenfolge oder eine Zahl sein
Um eine Eigenschaft zu löschen, können wir Vue.delete wie im folgenden Code verwenden.
Beispiel
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Im obigen Beispiel haben wir Vue.delete verwendet, um den Preis mit dem folgenden Code aus dem Array zu löschen.
Vue.delete(myproduct, 'price');Das Folgende ist die Ausgabe, die wir in der Konsole sehen.
Nach dem Löschen sehen wir nur die ID und den Namen, wenn der Preis gelöscht wird. Wir können auch feststellen, dass die get / set-Methoden gelöscht werden.