Vue.js Se ejendom

Vue.js er en meget kraftfuld og reaktiv Javascript-ramme, som bruges til at opbygge Uis (User Interfaces) og SPAs (Single-page Applications). Den er bygget ved at kombinere de bedste funktioner fra allerede eksisterende kantede og reagerende rammer. Udviklere elsker også at kode eller bygge applikationer i det.

Vue.js giver urets egenskab til at observere og reagere på variabler eller dataændring. Vi kan bruge uregenskaben til at manipulere DOM, når den overvågede variabel bliver ændret. I denne artikel skal vi se på, hvordan vi kan bruge uregenskab og udføre de ønskede opgaver ved ændring af variabel. Så lad os komme i gang.

Vagter

EN seer i Vue.js fungerer som en begivenhedslytter til en variabel eller egenskab. Det bruges til at udføre flere opgaver om ændring af en bestemt egenskab. Det kommer godt med, når du udfører asynkrone opgaver.

Lad os demonstrere og forstå begrebet seeren ved at overveje et eksempel.

Eksempel:

Antag, at vi bygger et e-handelswebsted, hvor vi har en liste over varer, og vi bygger det vogn eller kassekomponent. I den komponent skal vi beregne mængden af ​​et enkelt element vedrørende antallet af varer.

For det første antager vi nogle egenskaber i dataene.

data()
Vend tilbage
itemName: "Item 1",
itemQuantity: null,
vare Pris: 200,
totalpris: 0

,

I hvilken vi vil se egenskaben "itemQuantity" og beregne den samlede pris. Vi laver først databindingerne i skabelonen,

inden du skriver koden til overvågning af variablen og beregning af den samlede pris.

Efter at have skrevet denne kode, får vi vores webside sådan:

Nu ønsker vi at ændre den samlede pris på ændringen af ​​"itemQuantity" som når brugeren ændrer mængden ved hjælp af indtastningsfeltet. Den samlede pris skal ændres. Til dette formål bliver vi nødt til at se "itemQuantity" og beregne den samlede pris, hver gang "itemQuantity" -egenskaben bliver ændret.

Så seeren til "itemQuantity" vil være sådan:

holde øje:
itemQuantity ()
det her.totalpris = dette.itemQuantity * dette.varePris;
konsol.log (dette.itemQuantity);

Nu, hver gang brugeren ændrer “itemQuantity”, ændres den samlede pris på et øjeblik. Vi behøver ikke længere bekymre os om noget. Urejendommen tager sig af denne beregning nu.

Lad os se på websiden:

Og lad os prøve at øge eller ændre mængden og se nogle resultater:

Hvis vi ændrer mængden, lad os sige “4”, vil den samlede pris være “800”:

Tilsvarende, hvis vi ændrer mængden til "7", vil den samlede pris være "1400":

Så dette er, hvordan urejendommen fungerer og hjælper med reaktiv udvikling. Reaktivitet er en slags signatur fra Vue.js. Også urejendommen er praktisk, når du udfører asynkrone operationer.

Konklusion

I denne artikel har vi lært, hvad der er et uregenskab, og hvordan vi kan bruge det i Vue.js. Vi har også prøvet et eksempel fra det virkelige liv for at forstå dets ægte implementering. Dette hjælper meget med at spare tid og fremskynde udviklingsprocessen. Vi håber, at du fandt denne artikel hjælpsom og fortsætter med at besøge linuxhint.com for bedre forståelse.