Phenquestions
Vue.js je veľmi výkonný a reaktívny rámec Javascript, ktorý sa používa na vytváranie Uis (používateľské rozhrania) a SPA (jednostránkové aplikácie). Je zostavený kombináciou najlepších funkcií z už existujúcich rámcov Angular a React. Vývojári v ňom tiež radi kódujú alebo vytvárajú aplikácie.
Vue.js poskytuje vlastnosť watch na sledovanie a reagovanie na premenné alebo zmenu údajov. Vlastnosť watch môžeme použiť na manipuláciu DOM, keď sa zmení sledovaná premenná. V tomto článku sa pozrieme na to, ako môžeme použiť vlastnosť watch, a vykonať požadované úlohy pri zmene premennej. Takže poďme na to.
Strážcovia
A pozorovateľ vo Vue.js funguje ako poslucháč udalostí k premennej alebo vlastnosti. Používa sa na splnenie niekoľkých úloh týkajúcich sa zmeny niektorej konkrétnej vlastnosti. To sa hodí pri vykonávaní asynchrónnych úloh.
Poďme si demonštrovať a porozumieť koncepcii pozorovateľa na príklade.
Príklad:
Predpokladajme, že budujeme webovú stránku elektronického obchodu, na ktorej máme zoznam položiek a vytvárame ju ako súčasť košíka alebo pokladne. V tejto zložke musíme vypočítať množstvo jedného prvku týkajúceho sa počtu položiek.
Najskôr predpokladáme niektoré vlastnosti údajov.
data ()návrat
itemName: "Položka 1",
itemQuantity: null,
Cena položky: 200,
celková cena: 0
,
V ktorej budeme sledovať vlastnosť „itemQuantity“ a vypočítať celkovú cenu. Najprv urobíme dátové väzby v šablóne,
pred napísaním kódu na sledovanie premennej a výpočet celkovej ceny.
Strážca
Názov položky: itemName
Cena položky: itemPrice
Celková cena: totalPrice
Po napísaní tohto kódu budeme mať našu webovú stránku takto:
Teraz chceme zmeniť celkovú cenu pri zmene položky „itemQuantity“, ako vždy, keď používateľ zmení množstvo pomocou vstupného poľa. Celková cena by sa mala zmeniť. Z tohto dôvodu budeme musieť sledovať „itemQuantity“ a vypočítať celkovú cenu vždy, keď sa zmení vlastnosť „itemQuantity“.
Strážca položky „itemQuantity“ by teda vyzeral takto:
sledovať:itemQuantity ()
toto.totalPrice = toto.itemQuantity * toto.itemPrice;
konzola.denník (toto.itemQuantity);
Teraz, kedykoľvek používateľ zmení „itemQuantity“, celková cena sa za chvíľu zmení. Už sa nemusíme ničoho báť. O tento výpočet sa teraz postará vlastníctvo hodiniek.
Pozrime sa na webovú stránku:
Pokúsme sa zvýšiť alebo zmeniť množstvo a pozrieť si niektoré výsledky:
Ak zmeníme množstvo, povedzme „4“, celková cena bude „800“:
Podobne, ak zmeníme množstvo na „7“, celková cena bude „1400“:
Takto teda funguje vlastnosť hodiniek a pomáha pri reaktívnom vývoji. Reaktivita je akýmsi podpisom Vue.js. Vlastnosť watch sa tiež hodí pri vykonávaní asynchrónnych operácií.
Záver
V tomto článku sme sa dozvedeli, čo je vlastnosť hodiniek a ako ich môžeme použiť vo Vue.js. Tiež sme vyskúšali príklad zo skutočného života, aby sme pochopili jeho skutočnú implementáciu. To veľmi pomáha pri úspore času a urýchlení procesu vývoja. Dúfame, že vám tento článok pomohol a naďalej navštevujete linuxhint.com pre lepšie pochopenie.
