Phenquestions
Vue.js er et veldig kraftig og reaktivt Javascript-rammeverk, som brukes til å bygge Uis (User Interfaces) og SPAs (Single-page Applications). Den er bygget ved å kombinere de beste funksjonene fra allerede eksisterende Angular og react Frameworks. Utviklere elsker også å kode eller bygge applikasjoner i den.
Vue.js gir klokkeegenskapen til å observere og reagere på variablene eller dataendringen. Vi kan bruke klokkeegenskapen til å manipulere DOM når den overvåkede variabelen blir endret. I denne artikkelen skal vi se på hvordan vi kan bruke klokkeegenskap, og utføre de ønskede oppgavene ved endring av variabel. Så la oss komme i gang.
Watchers
EN seer i Vue.js fungerer som en hendelseslytter til en variabel eller eiendom. Den brukes til å utføre flere oppgaver om endring av en bestemt eiendom. Det kommer godt med når du gjør asynkrone oppgaver.
La oss demonstrere og forstå konseptet med seeren ved å vurdere et eksempel.
Eksempel:
Anta at vi bygger et netthandelsnettsted, der vi har en liste over varer, og at vi bygger den handlekurven eller kassen. I den komponenten må vi beregne mengden av et enkelt element angående antall varer.
For det første antar vi noen egenskaper i dataene.
data ()komme tilbake
itemName: "Item 1",
itemQuantity: null,
vare Pris: 200,
totalPris: 0
,
Der vil vi se på "itemQuantity" -egenskapen og beregne totalprisen. Vi gjør først databindinger i malen,
før du skriver koden for å se på variabelen og beregne totalprisen.
Watcher
Artikkelnavn: itemName
Varepris: itemPrice
Totalpris: totalPrice
Etter å ha skrevet denne koden, vil vi ha websiden vår slik:
Nå vil vi endre totalprisen på endringen av "itemQuantity" som når brukeren endrer antall ved hjelp av inndatafeltet. Totalprisen bør endres. For det formålet må vi se på "itemQuantity" og beregne totalprisen hver gang "itemQuantity" -egenskapen blir endret.
Så, seeren på "itemQuantity" vil være slik:
se:itemQuantity ()
dette.totalpris = dette.itemQuantity * dette.varePris;
konsoll.logg (dette.itemQuantity);
Nå, når brukeren endrer "itemQuantity", vil totalprisen endres i løpet av et øyeblikk. Vi trenger ikke bekymre oss for noe lenger. Klokkeegenskapen tar seg av denne beregningen nå.
La oss ta en titt på websiden:
Og la oss prøve å øke eller endre mengden og se noen resultater:
Hvis vi endrer antall, la oss si "4", vil totalprisen være "800":
På samme måte, hvis vi endrer mengden til "7", vil totalprisen være "1400":
Så dette er hvordan klokkeegenskapen fungerer og hjelper til med reaktiv utvikling. Reaktivitet er en slags signatur fra Vue.js. Også klokkeegenskapen er nyttig når du utfører asynkrone operasjoner.
Konklusjon
I denne artikkelen har vi lært hva som er en klokkeegenskap og hvordan vi kan bruke den i Vue.js. Vi har også prøvd et eksempel fra virkeligheten for å forstå den virkelige implementeringen. Dette hjelper mye med å spare tid og påskynde utviklingsprosessen. Vi håper at du syntes denne artikkelen var nyttig og fortsatte å besøke linuxhint.com for bedre forståelse.
