Vue.js Urmăriți proprietatea

Vue.js este un cadru Javascript foarte puternic și reactiv, care este utilizat pentru a construi Uis (interfețe utilizator) și SPA-uri (aplicații cu o singură pagină). Este construit prin combinarea celor mai bune caracteristici din cadrele Angular și React deja existente. De asemenea, dezvoltatorilor le place să codifice sau să creeze aplicații în acesta.

Vue.js oferă proprietatea ceas pentru a observa și a reacționa la variabilele sau schimbarea datelor. Putem folosi proprietatea ceas pentru a manipula DOM atunci când variabila vizionată se schimbă. În acest articol, vom arunca o privire asupra modului în care putem folosi proprietatea de vizionare și să realizăm sarcinile dorite la schimbarea variabilei. Asadar, haideti sa începem.

Observatori

A privitor în Vue.js acționează ca un ascultător de evenimente la o variabilă sau proprietate. Este folosit pentru a îndeplini mai multe sarcini privind schimbarea unei anumite proprietăți. Este util la realizarea unor sarcini asincrone.

Să demonstrăm și să înțelegem conceptul de observator luând în considerare un exemplu.

Exemplu:

Să presupunem că construim un site web de comerț electronic, în care avem o listă de articole și îl construim coș sau componentă de plată. În acea componentă, trebuie să calculăm cantitatea unui singur element referitoare la numărul de articole.

În primul rând, presupunem unele proprietăți în date.

date()
întoarcere
itemName: „Elementul 1”,
item Cantitate: nul,
articol Preț: 200,
Preț total: 0

,

În care vom urmări proprietatea „itemQuantity” și vom calcula prețul total. Mai întâi vom face legările de date în șablon,

înainte de a scrie codul pentru vizionarea variabilei și calcularea prețului total.

După ce am scris acest cod, vom avea pagina noastră web astfel:

Acum, dorim să schimbăm prețul total la schimbarea „itemQuantity”, de fiecare dată când utilizatorul schimbă cantitatea folosind câmpul de introducere. Prețul total ar trebui schimbat. În acest scop, va trebui să urmărim „itemQuantity” și să calculăm prețul total de fiecare dată când proprietatea „itemQuantity” se schimbă.

Deci, observatorul pentru „itemQuantity” ar fi astfel:

ceas:
itemQuantity ()
acest.totalPrice = acesta.itemQuantity * aceasta.pretul articolului;
consolă.jurnal (aceasta.itemCantitate);

Acum, ori de câte ori utilizatorul modifică „itemQuantity”, prețul total va fi schimbat într-un moment. Nu mai trebuie să ne facem griji pentru nimic. Proprietatea ceasului se va ocupa acum de acest calcul.

Să aruncăm o privire la pagina web:

Și, să încercăm să mărim sau să schimbăm cantitatea și să vedem câteva rezultate:

Dacă schimbăm cantitatea, să spunem „4”, prețul total ar fi „800”:

În mod similar, dacă schimbăm cantitatea în „7”, prețul total ar fi „1400”:

Deci, așa funcționează proprietatea ceasului și ajută la dezvoltarea reactivă. Reactivitatea este un fel de semnătură a Vue.js. De asemenea, proprietatea ceasului este utilă în timp ce efectuați operațiuni asincrone.

Concluzie

În acest articol, am aflat ce este o proprietate de ceas și cum o putem folosi în Vue.js. De asemenea, am încercat un exemplu din viața reală pentru a înțelege implementarea sa reală. Acest lucru ajută foarte mult la economisirea timpului și la accelerarea procesului de dezvoltare. Sperăm că ați găsit acest articol util și continuați să vizitați linuxhint.com pentru o mai bună înțelegere.