Vue.JS Oglądaj nieruchomość

Vue.JS jest bardzo potężnym i reaktywnym frameworkiem JavaScript, który służy do budowy interfejsu użytkownika (interfejsy użytkownika) i spa (aplikacje jednostronicowe). Jest zbudowany przez połączenie najlepszych funkcji już istniejących ram kątowych i react. Deweloperzy również uwielbiają kodować lub budować aplikacje.

Vue.JS zapewnia właściwość obserwacyjną obserwowania i reagowania na zmienne lub zmianę danych. Możemy użyć właściwości zegarków do manipulowania DOM, gdy zmienna obserwowana zostanie zmieniona. W tym artykule przyjrzymy się, w jaki sposób możemy korzystać z właściwości Watch i wykonywać pożądane zadania dotyczące zmiany zmiennej. Więc zacznijmy.

Obserwatorzy

A obserwator w Vue.JS działa jak słuchacz zdarzeń zmiennej lub właściwości. Służy do wykonywania kilku zadań dotyczących zmiany jakiejś konkretnej właściwości. Przydaje się podczas wykonywania zadań asynchronicznych.

Pokazajmy i zrozumiemy pojęcie obserwatora, rozważając przykład.

Przykład:

Załóżmy, że budujemy witrynę e-commerce, w której mamy listę przedmiotów, i budujemy Komponent IT. W tym komponencie musimy obliczyć ilość pojedynczego elementu dotyczącą liczby elementów.

Po pierwsze, zakładamy pewne właściwości danych.

dane()
powrót
Nazwa pozycji: „Pozycja 1”,
quantity: Null,
ItemPrice: 200,
Całkowita wartość: 0

,

W którym obejrzymy nieruchomość „iquantity” i obliczyć całkowitą cenę. Najpierw wykonamy powiązania danych w szablonie,

Przed napisaniem kodu do oglądania zmiennej i obliczenia całkowitej ceny.

Po napisaniu tego kodu będziemy mieć naszą stronę internetową w ten sposób:

Teraz chcemy zmienić całkowitą cenę zmiany „Item Quantity”, jak ilekroć użytkownik zmienia ilość za pomocą pola wejściowego. Całkowita cena powinna zostać zmieniona. W tym celu będziemy musieli obejrzeć „podstawność” i obliczyć całkowitą cenę za każdym razem, gdy zmienia się nieruchomość „Item Quantity”.

Tak więc obserwator „iquantity” byłby taki:

oglądać:
Ilość przedmiotów()
Ten.TotalPrice = to.Ququantity * to.Cena przedmiotu;
konsola.Log (to.Ilość przedmiotów);

Teraz, ilekroć użytkownik zmienia „Quanter”, całkowita cena zostanie zmieniona za chwilę. Nie musimy się już o nic martwić,. Nieruchomość zegarka zajmie się teraz tym obliczeniami.

Rzućmy okiem na stronę internetową:

I spróbujmy zwiększyć lub zmienić ilość i zobaczmy niektóre wyniki:

Jeśli zmienimy ilość, powiedzmy „4”, całkowita cena wynosiłaby „800”:

Podobnie, jeśli zmienimy ilość na „7”, całkowita cena wynosiłaby „1400”:

Tak właśnie działa i pomaga w reaktywnym rozwoju. Reaktywność jest rodzajem podpisu Vue.JS. Również nieruchomość zegarka przydaje się podczas wykonywania operacji asynchronicznych.

Wniosek

W tym artykule dowiedzieliśmy się, co to jest nieruchomość zegarka i jak możemy ją wykorzystać w Vue.JS. Próbowaliśmy również prawdziwego przykładu, aby zrozumieć jego prawdziwą implementację. To bardzo pomaga w oszczędzaniu czasu i przyspieszeniu procesu rozwoju. Mamy nadzieję, że ten artykuł jest pomocny i odwiedzaj Linuxhint.com dla lepszego zrozumienia.