Vue.js-gegevensbinding

Vue.js is zo'n gemakkelijk te leren en toegankelijke bibliotheek. Dus met de kennis van HTML, CSS en Javascript kunnen we beginnen met het bouwen van webapplicaties in Vue.js. Vue.js is gebouwd door de beste functies van een reeds bestaande Angular en react Frameworks te combineren.

Gegevensbinding is een van de meest elegante functies van Vue.js omdat het reactieve/tweerichtingsgegevensbinding biedt. In Vue.js hoeven we niet veel regels te schrijven om gegevens in twee richtingen te binden, in tegenstelling tot andere frameworks. Eenrichtingsgegevensbinding betekent dat de variabele alleen is gebonden aan de DOM. Aan de andere kant betekent tweerichtingsverkeer dat de variabele ook gebonden is aan de DOM. Wanneer DOM wordt gewijzigd, wordt de variabele ook gewijzigd. Laten we dus eens kijken naar beide databindingen en het juiste verschil zien.

Gegevens in één richting binden

Als we een variabele willen binden, kunnen we eenvoudig Vue . gebruiken.js' dubbele accolades-syntaxis of "Snor" -syntaxis om elke variabele van de relatieve componentinstantie te binden.

linuxhintTekst

Of, als we een variabele binnen een HTML-attribuut willen binden, kunnen we de . gebruiken v-bind richtlijn.

Vue.js biedt ook de afkorting voor het binden van variabelen in een HTML-kenmerk. In plaats van te schrijven v-bind:kenmerknaam, we kunnen alleen een dubbele punt ":" en attribuutnaam gebruiken.

Maar dit zijn slechts gegevensbindingen. Om de tweerichtingsgegevensbinding te demonstreren, kunnen we de . gebruiken v-model richtlijn van de Vue.js.

Bidirectionele/reactieve gegevensbinding

Om reactieve gegevensbinding aan te tonen, kunnen we de v-model richtlijn op een invoerformulierveld. Het zal intern een gebeurtenis uitzenden en de variabele veranderen. Waaraan we ergens anders in de sjabloon kunnen binden met dubbele accolades of de syntaxis "Snor".

Je typt: linuxhintText

Wanneer we nu een teken in het invoerformulierveld invoeren, kunnen we zien dat de variabele ook gelijktijdig wordt bijgewerkt.

Afsluiten

In dit artikel hebben we geleerd hoe je variabelen kunt binden in Vue.js met dubbele accolades of "Snor"-syntaxis. We hebben ook de bidirectionele/reactieve gegevensbinding in Vue . aangetoond.js met behulp van de v-model-richtlijn. Na het lezen van dit artikel is databinding geen moeilijke taak meer voor een beginner die net is begonnen met Vue.js. Dus blijf de concepten van Vue . leren.js met linuxhint.com. Dank u!