VueJS - Реактивный интерфейс
VueJS предоставляет параметры для добавления реактивности к свойствам, которые добавляются динамически. Учтите, что мы уже создали экземпляр vue и нам нужно добавить свойство watch. Это можно сделать следующим образом -
пример
<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>В объекте данных есть счетчик свойств, определенный как 1. Счетчик увеличивается, когда мы нажимаем кнопку.
Экземпляр Vue уже создан. Чтобы добавить к нему часы, нам нужно сделать это следующим образом:
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});Нам нужно использовать $ watch для добавления часов вне экземпляра vue. Добавлено предупреждение, которое показывает изменение значения свойства счетчика. Также добавлена функция таймера, то есть setTimeout, которая устанавливает значение счетчика на 20.
setTimeout(
function(){
vm.counter = 20;
},2000
);Каждый раз, когда счетчик изменяется, срабатывает предупреждение от метода наблюдения, как показано на следующем снимке экрана.
VueJS не может обнаружить добавление и удаление свойств. Лучший способ - всегда объявлять свойства, которые должны быть активированы заранее в экземпляре Vue. Если нам нужно добавить свойства во время выполнения, мы можем использовать методы Vue global, Vue.set и Vue.delete.
Vue.set
Этот метод помогает установить свойство объекта. Он используется, чтобы обойти ограничение, заключающееся в том, что Vue не может обнаруживать добавления свойств.
Синтаксис
Vue.set( target, key, value )Где,
цель: может быть объектом или массивом
ключ: может быть строкой или числом
значение: может быть любого типа
Давайте посмотрим на пример.
пример
<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>В приведенном выше примере есть переменная myproduct, созданная в начале с использованием следующего фрагмента кода.
var myproduct = {"id":1, name:"book", "price":"20.00"};Он передается объекту данных в экземпляре Vue следующим образом:
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});Предположим, мы хотим добавить еще одно свойство в массив myproduct после создания экземпляра Vue. Это можно сделать следующим образом -
vm.products.qty = "1";Посмотрим на вывод в консоли.
Как видно выше, в товарах добавлено количество. Методы get / set, которые в основном добавляют реактивность, доступны для идентификатора, имени и цены и недоступны для количества.
Мы не можем добиться реактивности, просто добавив объект vue. VueJS в основном хочет, чтобы все его свойства были созданы с самого начала. Однако, если нам нужно добавить его позже, мы можем использовать Vue.set. Для этого нам нужно установить его с помощью vue global, то есть Vue.set.
пример
<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>Мы использовали Vue.set для добавления количества в массив, используя следующий фрагмент кода.
Vue.set(myproduct, 'qty', 1);Мы утешили объект vue, и следующий результат.
Теперь мы можем увидеть, что get / set для qty добавлено с помощью Vue.set.
Vue.delete
Эта функция используется для динамического удаления свойства.
пример
Vue.delete( target, key )Где,
цель: может быть объектом или массивом
ключ: может быть строкой или числом
Чтобы удалить любое свойство, мы можем использовать Vue.delete, как в следующем коде.
пример
<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>В приведенном выше примере мы использовали Vue.delete для удаления цены из массива, используя следующий фрагмент кода.
Vue.delete(myproduct, 'price');Ниже приведен вывод, который мы видим в консоли.
После удаления мы можем видеть только идентификатор и имя, так как цена удаляется. Мы также можем заметить, что методы get / set удалены.