Vue.js Watch Property

Vue.js je vrlo moćan i reaktivan Javascript okvir koji se koristi za izgradnju Uisa (korisničko sučelje) i SPA-a (aplikacije na jednoj stranici). Izgrađen je kombiniranjem najboljih značajki već postojećih kutnih i reakcijskih okvira. Programeri također vole kodirati ili graditi programe u njemu.

Vue.js pruža svojstvo sata za promatranje i reagiranje na varijable ili promjenu podataka. Svojstvom watch možemo koristiti za manipulaciju DOM-om kada se promijenjena varijabla gleda. U ovom ćemo članku pogledati kako možemo koristiti svojstvo sata i izvršiti željene zadatke na promjeni varijable. Pa, krenimo.

Promatrači

A promatrač u Vueu.js ponaša se poput preslušavača događaja varijable ili svojstva. Koristi se za ostvarenje nekoliko zadataka na promjeni određenog svojstva. Dobro dođe dok obavljate asinkrone zadatke.

Pokažimo i shvatimo koncept promatrača razmatrajući primjer.

Primjer:

Pretpostavimo da gradimo web mjesto za e-trgovinu na kojem imamo popis predmeta i izrađujemo ga u košarici ili komponenti za naplatu. U toj komponenti moramo izračunati količinu pojedinog elementa s obzirom na broj predmeta.

Prvo, pretpostavljamo neka svojstva podataka.

podaci ()
povratak
itemName: "Stavka 1",
itemQuantity: null,
itemPrice: 200,
ukupnoCijena: 0

,

U kojem ćemo gledati svojstvo "itemQuantity" i izračunati ukupnu cijenu. Prvo ćemo izvršiti vezivanje podataka u predlošku,

prije pisanja koda za gledanje varijable i izračuna ukupne cijene.

Nakon pisanja ovog koda, imat ćemo našu web stranicu poput ove:

Sada želimo promijeniti ukupnu cijenu pri promjeni "itemQuantity" kao kad god korisnik promijeni količinu pomoću polja za unos. Ukupna cijena trebala bi se promijeniti. U tu svrhu morat ćemo gledati "itemQuantity" i izračunati ukupnu cijenu kad god se promijeni svojstvo "itemQuantity".

Dakle, promatrač "itemQuantity" bio bi ovakav:

Gledati:
itemQuantity ()
ovaj.totalPrice = ovo.itemQuantity * ovo.itemPrice;
konzola.zapisnik (ovo.itemQuantity);

Sada, kad god korisnik promijeni "itemQuantity", ukupna cijena promijenit će se za trenutak. Više se ne moramo brinuti ni o čemu. Za ovaj izračun pobrinut će se sada vlasništvo sata.

Pogledajmo web stranicu:

Pokušajmo povećati ili promijeniti količinu i vidjeti neke rezultate:

Ako promijenimo količinu, recimo "4", ukupna cijena bila bi "800":

Slično tome, ako količinu promijenimo u "7", ukupna cijena bila bi "1400":

Dakle, ovako funkcionira svojstvo sata i pomaže u reaktivnom razvoju. Reaktivnost je svojevrsni Vueov potpis.js. Također, svojstvo sata dobro dolazi tijekom izvođenja asinkronih operacija.

Zaključak

U ovom smo članku naučili što je svojstvo sata i kako ga možemo koristiti u Vueu.js. Također smo isprobali primjer iz stvarnog života kako bismo razumjeli njegovu stvarnu provedbu. To puno pomaže u uštedi vremena i ubrzavanju procesa razvoja. Nadamo se da vam je ovaj članak bio koristan i nastavite posjećivati ​​linuxhint.com za bolje razumijevanje.