Vue.js Žiūrėti nuosavybę

Vue.„js“ yra labai galinga ir reaktyvi „Javascript“ sistema, naudojama kuriant Uis (vartotojo sąsajas) ir SPA (vieno puslapio programas). Jis sukurtas derinant geriausias jau esamų „Angular and Reage Frameworks“ savybes. Kūrėjai taip pat mėgsta jame koduoti ar kurti programas.

Vue.js suteikia stebėjimo savybę stebėti ir reaguoti į kintamuosius ar duomenų pokyčius. Mes galime naudoti laikrodžio ypatybę manipuliuoti DOM, kai keičiamas stebimas kintamasis. Šiame straipsnyje mes apžvelgsime, kaip galime naudoti laikrodžio ypatybes ir atlikti norimas užduotis keičiant kintamąjį. Taigi, pradėkime.

Stebėtojai

A stebėtojas Vue.js veikia kaip įvykio klausytojas kintamojo ar ypatybės. Jis naudojamas kelioms užduotims atlikti keičiant tam tikrą savybę. Tai praverčia atliekant asinchronines užduotis.

Parodykime ir supraskime stebėtojo sampratą, apsvarstydami pavyzdį.

Pavyzdys:

Tarkime, kad kuriame elektroninės prekybos svetainę, kurioje turime prekių sąrašą ir kuriame jos krepšelį ar atsiskaitymo komponentą. Tame komponente turime apskaičiuoti vieno elemento kiekį, susijusį su daiktų skaičiumi.

Pirma, mes prisiimame kai kurias duomenų savybes.

duomenys ()
grįžti
itemName: „Elementas 1“,
itemQuantity: null,
prekė Kaina: 200,
viso kaina: 0

,

Kuryje mes stebėsime „itemQuantity“ savybę ir apskaičiuosime bendrą kainą. Pirmiausia atliksime duomenų susiejimą šablone,

prieš rašydami kintamojo stebėjimo ir bendros kainos skaičiavimo kodą.

Parašę šį kodą, turėsime tokį savo tinklalapį:

Dabar norime pakeisti „itemQuantity“ pakeitimo bendrą kainą, pavyzdžiui, kai vartotojas pakeičia kiekį naudodamas įvesties lauką. Bendra kaina turėtų būti pakeista. Tuo tikslu turėsime stebėti „itemQuantity“ ir apskaičiuoti bendrą kainą, kai tik pasikeis „itemQuantity“ savybė.

Taigi „itemQuantity“ stebėtojas būtų toks:

žiūrėti:
itemQuantity ()
tai.totalPrice = tai.itemQuantity * tai.itemPrice;
konsolė.žurnalas (tai.itemQuantity);

Dabar, kai vartotojas pakeis „itemQuantity“, visa kaina bus pakeista per akimirką. Mums nebereikia dėl nieko jaudintis. Laikrodžio nuosavybė pasirūpins šiuo skaičiavimu dabar.

Pažvelkime į tinklalapį:

Pabandykime padidinti ar pakeisti kiekį ir pamatyti keletą rezultatų:

Jei pakeisime kiekį, sakykime „4“, bendra kaina būtų „800“:

Panašiai, jei kiekį pakeisime į „7“, bendra kaina bus „1400“:

Taigi, laikrodžio nuosavybė veikia ir padeda reaktyviai tobulėti. Reaktyvumas yra tarsi „Vue“ parašas.js. Be to, laikrodžio ypatybė praverčia atliekant asinchronines operacijas.

Išvada

Šiame straipsnyje mes sužinojome, kas yra laikrodžio nuosavybė ir kaip mes galime ją naudoti „Vue“.js. Mes taip pat išbandėme realaus gyvenimo pavyzdį, kad suprastume tikrąjį jo įgyvendinimą. Tai labai padeda sutaupyti laiko ir pagreitinti kūrimo procesą. Tikimės, kad šis straipsnis jums buvo naudingas ir toliau lankotės „linuxhint“.com geriau suprasti.