Vue.js Katso omaisuutta

Vue.js on erittäin tehokas ja reaktiivinen Javascript-kehys, jota käytetään Uis (User Interfaces) ja SPAs (Single-page Applications) rakentamiseen. Se on rakennettu yhdistämällä jo olemassa olevien kulma- ja reaktiokehysten parhaat ominaisuudet. Kehittäjät rakastavat myös koodata tai rakentaa siihen sovelluksia.

Vue.js tarjoaa kellon ominaisuuden tarkkailla muuttujia tai reagoida niihin. Voimme käyttää kello-ominaisuutta manipuloida DOM: ää, kun katsottu muuttuja muuttuu. Tässä artikkelissa tarkastellaan miten voimme käyttää kello-ominaisuutta ja suorittaa halutut tehtävät muuttujan muutoksella. Joten, aloitetaan.

Katsojat

A tarkkailija kaupungissa Vue.js toimii kuin tapahtumakuuntelija muuttujalle tai ominaisuudelle. Sitä käytetään suorittamaan useita tehtäviä muutettaessa tiettyä ominaisuutta. Se on kätevä, kun teet asynkronisia tehtäviä.

Osoitetaan ja ymmärretään katsojan käsite tarkastelemalla esimerkkiä.

Esimerkki:

Oletetaan, että rakennamme verkkokaupan verkkosivustoa, jossa meillä on luettelo tuotteista, ja rakennamme sen ostoskoria tai kassan komponenttia. Siinä komponentissa meidän on laskettava yhden elementin määrä, joka koskee esineiden määrää.

Ensinnäkin oletamme, että tietyissä ominaisuuksissa on joitakin ominaisuuksia.

data ()
paluu
itemName: "Tuote 1",
itemQuantity: tyhjä,
eräHinta: 200,
hinta: 0

,

Tässä katsomme itemQuantity-ominaisuuden ja laskemme kokonaishinnan. Teemme ensin mallin datan sidonnat,

ennen koodin kirjoittamista muuttujan katselemiseksi ja kokonaishinnan laskemiseksi.

Tämän koodin kirjoittamisen jälkeen meillä on tällainen verkkosivu:

Haluamme nyt muuttaa kokonaishintaa "itemQuantity" -muutoksella kuten aina, kun käyttäjä muuttaa määrää syöttökentän avulla. Kokonaishinnan pitäisi muuttua. Tätä tarkoitusta varten meidän on tarkkailtava "itemQuantity" ja laskettava kokonaishinta aina, kun "itemQuantity" -ominaisuus muuttuu.

Joten, itemQuantity-tarkkailija olisi seuraava:

katsella:
itemQuantity ()
Tämä.totalPrice = tämä.itemQuantity * tämä.itemPrice;
konsoli.loki (tämä.itemQuantity);

Nyt, kun käyttäjä muuttaa “itemQuantity” -maksua, kokonaishinta muuttuu hetkessä. Meidän ei tarvitse enää huolehtia mistään. Kellon omaisuus huolehtii tästä laskelmasta nyt.

Katsotaanpa verkkosivua:

Yritetään lisätä tai muuttaa määrää ja nähdä joitain tuloksia:

Jos muutamme määrää, sanotaan "4", kokonaishinta olisi "800":

Vastaavasti, jos muutamme määrän arvoksi "7", kokonaishinta olisi "1400":

Joten kello-omaisuus toimii näin ja auttaa reaktiivisessa kehityksessä. Reaktiivisuus on eräänlainen Vue-allekirjoitus.js. Kellon ominaisuus on myös kätevä suoritettaessa asynkronisia toimintoja.

Johtopäätös

Tässä artikkelissa olemme oppineet, mikä on kello-omaisuus ja miten voimme käyttää sitä Vue.js. Olemme myös kokeilleet tosielämän esimerkkiä ymmärtääkseen sen todellisen toteutuksen. Tämä auttaa paljon säästämään aikaa ja nopeuttamaan kehitysprosessia. Toivomme, että pidit tästä artikkelista hyödyllistä ja jatkat vierailua linuxhintissa.com ymmärtämisen parantamiseksi.