Vue.js Watch Property

Vue.A js egy nagyon hatékony és reaktív Javascript keretrendszer, amelyet Uis (felhasználói interfészek) és SPA (egyoldalas alkalmazások) felépítésére használnak. A már meglévő szög- és reagálókeret legjobb tulajdonságainak ötvözésével épül fel. A fejlesztők is szeretnek kódolni vagy alkalmazásokat építeni benne.

Vue.A js biztosítja a figyelés tulajdonságát a változók vagy az adatok változásának megfigyelésére és reagálására. A watch tulajdonsággal manipulálhatjuk a DOM-ot, amikor a figyelt változó megváltozik. Ebben a cikkben megnézzük, hogyan használhatjuk a watch tulajdonságot, és hogyan végezhetjük el a kívánt feladatokat a változó változtatásakor. Tehát kezdjük.

Figyelők

A virrasztó a Vue-ban.A js úgy viselkedik, mint egy változó vagy tulajdonság eseményhallgatója. Számos feladat elvégzésére szolgál bizonyos tulajdonságok megváltoztatásával. Ez jól jön aszinkron feladatok végrehajtása közben.

Bemutassuk és megértsük a figyelő fogalmát egy példával.

Példa:

Tegyük fel, hogy építünk egy e-kereskedelmi weboldalt, amelyben megvan a tételek listája, és mi kosarat vagy pénztár alkatrészt építünk fel. Ebben a komponensben ki kell számolnunk az elemek számára vonatkozó egyetlen elem összegét.

Először feltételezünk néhány tulajdonságot az adatokban.

adatok ()
Visszatérés
itemName: "1. tétel",
itemQuantity: null,
tételÁra: 200,
totalPrice: 0

,

Ebben figyeljük az „itemQuantity” tulajdonságot, és kiszámoljuk a teljes árat. Először elvégezzük az adatkötéseket a sablonban,

mielőtt megírná a kódot a változó figyeléséhez és a teljes ár kiszámításához.

A kód megírása után a következő weboldalunk lesz:

Most meg akarjuk változtatni a teljes árat az „itemQuantity” változásakor, például amikor a felhasználó megváltoztatja a mennyiséget a beviteli mező segítségével. A teljes árat módosítani kell. Ebből a célból meg kell néznünk az „itemQuantity” -t és ki kell számolnunk a teljes árat, valahányszor az „itemQuantity” tulajdonság megváltozik.

Tehát a „itemQuantity” figyelője a következő lenne:

néz:
itemQuantity ()
ez.totalPrice = ez.itemQuantity * ez.darab ár;
konzol.napló (ez.itemQuantity);

Most, amikor a felhasználó megváltoztatja az „itemQuantity” értéket, a teljes ár egy pillanat alatt megváltozik. Semmi miatt nem kell aggódnunk. Az óra tulajdonosa gondoskodik erről a számításról.

Vessünk egy pillantást a weboldalra:

És próbáljuk meg növelni vagy módosítani a mennyiséget, és nézzünk meg néhány eredményt:

Ha megváltoztatjuk a mennyiséget, mondjuk „4”, a teljes ár „800” lenne:

Hasonlóképpen, ha a mennyiséget „7” -re változtatjuk, a teljes ár „1400” lenne:

Tehát ez az óra tulajdonság működik, és segít a reaktív fejlődésben. A reaktivitás a Vue egyfajta aláírása.js. Ezenkívül az óra tulajdonság jól jön aszinkron műveletek végrehajtása közben.

Következtetés

Ebben a cikkben megtudtuk, hogy mi az óra tulajdonság, és hogyan tudjuk használni a Vue-ban.js. Kipróbáltunk egy valós példát is, hogy megértsük annak valódi megvalósítását. Ez sokat segít az időmegtakarításban és a fejlesztési folyamat felgyorsításában. Reméljük, hogy hasznosnak találta ezt a cikket, és folytatja a linuxhint látogatását.com a jobb megértés érdekében.