Vue.js Watch Watch

Vue.js - це дуже потужний і реактивний фреймворк Javascript, який використовується для створення Uis (користувальницькі інтерфейси) та SPA (односторінкові програми). Він побудований шляхом поєднання найкращих функцій із вже існуючих Angular і Framework. Розробники також люблять кодувати або будувати в ньому додатки.

Vue.js надає властивість watch спостерігати і реагувати на змінні або зміну даних. Ми можемо використовувати властивість watch для маніпулювання DOM, коли змінна спостереження змінюється. У цій статті ми подивимося, як ми можемо використовувати властивість watch, і виконаємо бажані завдання щодо зміни змінної. Отже, давайте почнемо.

Сторожки

A спостерігач у Vue.js діє як прослуховувач подій до змінної чи властивості. Він використовується для виконання кількох завдань щодо зміни певного властивості. Це стане в нагоді під час виконання асинхронних завдань.

Давайте продемонструємо та зрозуміємо концепцію спостерігача, розглянувши приклад.

Приклад:

Припустимо, ми створюємо веб-сайт електронної комерції, на якому ми маємо перелік товарів, і створюємо його кошик або компонент оплати. У цій складовій нам потрібно розрахувати кількість окремого елемента щодо кількості предметів.

По-перше, ми припускаємо деякі властивості даних.

дані ()
повернути
itemName: "Пункт 1",
itemQuantity: null,
ціна: 200,
totalPrice: 0

,

У якому ми будемо спостерігати за властивістю “itemQuantity” та обчислити загальну ціну. Спочатку ми зробимо прив’язку даних у шаблоні,

перед написанням коду для перегляду змінної та обчислення загальної ціни.

Після написання цього коду у нас буде така веб-сторінка:

Тепер ми хочемо змінити загальну ціну на зміну “itemQuantity”, як завжди, коли користувач змінює кількість за допомогою поля введення. Загальну ціну слід змінити. Для цього нам доведеться спостерігати за “itemQuantity” і обчислювати загальну ціну, коли властивість “itemQuantity” змінюється.

Отже, спостерігач за “itemQuantity” буде таким:

дивитися:
itemQuantity ()
це.totalPrice = це.itemQuantity * це.itemPrice;
консолі.журнал (це.itemQuantity);

Тепер, коли користувач змінює “itemQuantity”, загальна ціна за мить буде змінена. Ми більше ні про що не повинні турбуватися. Власне годинник подбає про цей розрахунок зараз.

Давайте подивимось на веб-сторінку:

І спробуємо збільшити або змінити кількість і побачити деякі результати:

Якщо ми змінимо кількість, скажімо “4”, загальна ціна буде “800”:

Подібним чином, якщо ми змінимо кількість на “7”, загальна ціна буде “1400”:

Отже, саме так працює властивість годинника та допомагає у реактивному розвитку. Реактивність - це свого роду підпис Vue.js. Також властивість годинника стане в нагоді під час виконання асинхронних операцій.

Висновок

У цій статті ми дізналися, що таке властивість годинника та як ми можемо використовувати його у Vue.js. Ми також спробували приклад із реального життя, щоб зрозуміти його справжнє втілення. Це дуже допомагає заощадити час і пришвидшити процес розробки. Ми сподіваємось, що ця стаття була вам корисною і продовжуєте відвідувати linuxhint.com для кращого розуміння.