VueJS - interfejs reaktywny
VueJS zapewnia opcje dodawania reaktywności do właściwości, które są dodawane dynamicznie. Weź pod uwagę, że utworzyliśmy już instancję vue i musimy dodać właściwość watch. Można to zrobić w następujący sposób -
Przykład
<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>Istnieje licznik właściwości zdefiniowany jako 1 w obiekcie danych. Licznik jest zwiększany, gdy klikamy przycisk.
Instancja Vue została już utworzona. Aby dodać do niego zegarek, musimy zrobić to w następujący sposób -
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});Musimy użyć $ watch, aby dodać watch poza instancją vue. Dodano alert, który pokazuje zmianę wartości właściwości licznika. Dodano również funkcję timera setTimeout, która ustawia wartość licznika na 20.
setTimeout(
function(){
vm.counter = 20;
},2000
);Za każdym razem, gdy licznik zostanie zmieniony, alert z metody zegarka zostanie uruchomiony, jak pokazano na poniższym zrzucie ekranu.
VueJS nie może wykryć dodawania i usuwania właściwości. Najlepszym sposobem jest zawsze deklarowanie właściwości, które muszą być reaktywne z góry w instancji Vue. W przypadku, gdy musimy dodać właściwości w czasie wykonywania, możemy skorzystać z metod globalnych Vue, Vue.set i Vue.delete.
Vue.set
Ta metoda pomaga ustawić właściwość obiektu. Służy do obejścia ograniczenia polegającego na tym, że Vue nie może wykryć dodatkowych właściwości.
Składnia
Vue.set( target, key, value )Gdzie,
cel: może być obiektem lub tablicą
klucz: może być ciągiem lub liczbą
wartość: może być dowolnego typu
Spójrzmy na przykład.
Przykład
<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>W powyższym przykładzie istnieje zmienna myproduct utworzona na początku przy użyciu następującego fragmentu kodu.
var myproduct = {"id":1, name:"book", "price":"20.00"};Jest on nadawany obiektowi danych w instancji Vue w następujący sposób -
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});Rozważmy, że po utworzeniu instancji Vue chcemy dodać jeszcze jedną właściwość do tablicy myproduct. Można to zrobić w następujący sposób -
vm.products.qty = "1";Zobaczmy wynik w konsoli.
Jak widać powyżej, w produktach ilość jest dodawana. Metody get / set, które zasadniczo dodają reaktywność, są dostępne dla identyfikatora, nazwy i ceny i nie są dostępne dla ilości.
Nie możemy osiągnąć reaktywności po prostu dodając obiekt vue. VueJS przede wszystkim chce, aby wszystkie jego właściwości były tworzone na początku. Jednak w przypadku konieczności dodania go później, możemy użyć Vue.set. W tym celu musimy ustawić go za pomocą vue global, czyli Vue.set.
Przykład
<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>Użyliśmy Vue.set, aby dodać ilość do tablicy, używając następującego fragmentu kodu.
Vue.set(myproduct, 'qty', 1);Pocieszyliśmy obiekt vue i oto wynik.
Teraz możemy zobaczyć get / set dla ilości dodanej za pomocą Vue.set.
Vue.delete
Ta funkcja służy do dynamicznego usuwania właściwości.
Przykład
Vue.delete( target, key )Gdzie,
cel: może być obiektem lub tablicą
klucz: może być łańcuchem lub liczbą
Aby usunąć dowolną właściwość, możemy użyć Vue.delete jak w poniższym kodzie.
Przykład
<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>W powyższym przykładzie użyliśmy Vue.delete do usunięcia ceny z tablicy przy użyciu następującego fragmentu kodu.
Vue.delete(myproduct, 'price');Poniżej przedstawiono dane wyjściowe, które widzimy w konsoli.
Po usunięciu widzimy tylko identyfikator i nazwę, ponieważ cena jest usuwana. Możemy również zauważyć, że metody get / set są usuwane.