Dit is wat u moet weten over gegevensbinding in Vue

Door gegevens in web-apps te binden, wordt een koppeling gemaakt tussen de instantie van de app en de gebruikersinterface (gebruikersinterface). De instantie van de app beheert gegevens, gedrag en componenten, terwijl de gebruikersinterface het visuele aspect vertegenwoordigt waarmee gebruikers communiceren. Door gegevens te binden, kunt u dynamische web-apps maken.

Hier verken je verschillende bindingen in Vue, waaronder eenrichtings- en tweerichtingsbindingen. Ook leer je deze bindingen te implementeren met snorsjablonen en richtlijnen zoals v-bind en v-model.

Interpolatie in Vue

Interpolatie is een van Vue's meest populaire vormen van gegevensbinding. Met interpolatie kunt u gegevenswaarden weergeven in uw HTML-tags (Hyper Text Markup Language) met de snor-sjabloon, in de volksmond aangeduid met dubbele accolades ({{ }}).

Met de snor-sjabloon kunt u dynamische app-inhoud, zoals gegevens en methode-eigenschappen, integreren in uw HTML. U kunt dit bereiken door gegevens of namen van methode-eigenschappen uit de

opties-object in Vue binnen deze accolades.

Hier is een voorbeeld van een Vue-app die de snor-sjabloon gebruikt om interpolatie in Vue te bereiken:

<lichaam>
<divID kaart="app">
<h1>{{ titel }}h1>
<P>{{ tekst.toUpperCase() }}P>
div>
<script>
 const app = Vue.createApp({
 gegevens() {
 opbrengst {
 titel: "Welkom",
 tekst: "Dit is jouw wereld?",
 };
 },
 });
 app.mount("#app");
script>
lichaam>

Het bovenstaande codeblok gebruikt de snor-sjabloon om de waarde van de titeleigenschap weer te geven in het gegevensobject van de Vue-app. U kunt de resultaten van JavaScript-expressies ook weergeven met interpolatie. Bijvoorbeeld de {{text.toUpperCase()}} uitdrukking in de P tag geeft de hoofdletterversie van de tekstwaarde weer, zoals weergegeven in de onderstaande afbeelding:

Wanneer u een Vue-app aankoppelt, evalueert Vue uitdrukkingen in de sjablonen en geeft de resulterende waarden weer in de HTML-body. Alle wijzigingen in gegevenseigenschappen werken de overeenkomstige waarden in de gebruikersinterface bij.

Bijvoorbeeld:

<script>
 const app = Vue.createApp({
 gegevens() {
 opbrengst {
 titel: "Hallo",
 tekst: "Dit is jouw wereld?",
 };
 },
 });
 app.mount("#app");
script>

Het bovenstaande codeblok verandert de eigenschap title in "Hallo". Deze wijziging wordt automatisch weerspiegeld in de gebruikersinterface, aangezien de Vue-app de titeleigenschap aan het gebruikersinterface-element bindt, zoals hieronder weergegeven:

Interpolatie voert alleen gegevens uit wanneer de dubbele accolades zich tussen het openen en sluiten van HTML-tags bevinden.

Eenrichtingsgegevensbinding met de v-bind-richtlijn

Net als bij interpolatie koppelt gegevensbinding in één richting de instantie van de app aan de gebruikersinterface. Het verschil is dat het eigenschappen zoals gegevens en methoden bindt aan HTML-attributen.

Gegevensbinding in één richting ondersteunt de eenrichtingsstroom van gegevens, waardoor wordt voorkomen dat gebruikers wijzigingen aanbrengen die van invloed zijn op gegevenseigenschappen in de instantie van de app. Dit is handig wanneer u gegevens wilt weergeven aan de app-gebruiker, maar wilt voorkomen dat de gebruiker deze wijzigt.

U kunt gegevensbinding in één richting bereiken in Vue met de v-binden richtlijn of het verkorte karakter ervan (:):

 de v-bind richtlijn 
<invoertype="tekst"v-binding: waarde="tekst">
 het: steno-teken 
<invoertype="tekst":waarde="tekst">

Het codeblok toont het gebruik van de v-bind-richtlijn en de afkorting ervan om de waarde van de invoer-HTML-tag te binden aan een tekstgegevenseigenschap. Hier is een voorbeeld van een Vue-app die gebruikmaakt van de v-binden richtlijn om gegevensbinding in één richting te bereiken:

<lichaam>
<divID kaart="app">
<invoertype="tekst"v-binding: waarde="tekst">
<P>{{ tekst }}P>
div>
<script>
 const app = Vue.createApp({
 gegevens() {
 opbrengst {
 tekst: 'Vue is geweldig!'
 }
 }
 })
 app.mount('#app')
script>
lichaam>

Hierboven geven een invoerveld en een alinea-element de waarde weer van de tekst eigendom. De waarde attribuut van het invoerveld is gebonden aan de text eigenschap met behulp van de v-binden richtlijn.

Dit codeblok creëert een eenrichtingsbinding, waarbij wijzigingen in de tekst eigenschap zal de waarde van het invoerveld bijwerken, maar wijzigingen in het invoerveld zullen de tekst eigenschap in de instantie van de Vue-app.

Om dit aan te tonen, kunnen we beginnen met de beginwaarde van de tekst eigendom, "Vu is geweldig!”:

Na het wijzigen van de waarde van het invoerveld in "Hallo Wereld!", merk op dat de Vue-app niet is bijgewerkt en dat de tekst in de alinea-tag hetzelfde is gebleven:

Wanneer we echter de waarde van de tekst eigendom aan Hallo Wereld! in de instantie van de Vue-app in plaats van vanuit het invoerveld, wordt het invoerveld bijgewerkt om de nieuwe waarde weer te geven:

Deze manier om gegevens te binden is handig in scenario's waarin u gegevens aan de gebruiker wilt weergeven, maar wilt voorkomen dat de gebruiker deze rechtstreeks wijzigt. Door gebruik te maken van v-bind in Vue.js, kunt u een eenrichtingsbinding tot stand brengen, waardoor de gegevens van uw app eenvoudig worden verbonden met UI-elementen.

Tweerichtingsgegevensbinding met de v-modelrichtlijn

Door gegevensbinding in twee richtingen kunnen wijzigingen in de waarde van een UI-element automatisch worden weerspiegeld in het onderliggende gegevensmodel en vice versa. De meeste front-end JavaScript-frameworks leuk vinden Angular maakt gebruik van tweerichtingsbinding om gegevens te delen en real-time gebeurtenissen af ​​te handelen.

Vue.js maakt binding in twee richtingen mogelijk met de v-model richtlijn. De v-model richtlijn creëert een tweerichtingsgegevensbinding tussen een formulierinvoerelement en een gegevenseigenschap. Wanneer u in een invoerelement typt, wordt de waarde automatisch bijgewerkt in de data-eigenschap, en eventuele wijzigingen in de data-eigenschap zullen ook het invoerelement bijwerken.

Hier is een voorbeeld van een Vue-app die gebruikmaakt van de v-model richtlijn om gegevensbinding in twee richtingen te bereiken:

<hoofd>
<titel>Tweerichtingsgegevensbinding in Vuetitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<invoertype="tekst"v-model="tekst">
<P>{{ tekst }}P>
div>
<script>
 const app = Vue.createApp({
 gegevens() {
 opbrengst {
 tekst: 'Vue is geweldig!'
 }
 }
 })
 app.mount('#app')
script>
lichaam>

Het bovenstaande codeblok heeft een invoerelement met de v-model richtlijn die haar bindt aan de tekst gegevens eigenschap. De tekst eigenschap is in eerste instantie ingesteld op "Vue is geweldig!".

Het invoerveld werkt de teksteigenschap bij wanneer u erin typt en weerspiegelt wijzigingen in de teksteigenschap in het P label. Vue.js gebruikt de v-model-richtlijn en het invoerelement om gegevensbinding in twee richtingen te bereiken.

Terwijl v-bind eenrichtingscommunicatie van de Vue-app naar de gebruikersinterface mogelijk maakt, biedt v-model bidirectionele communicatie tussen de Vue-app en de gebruikersinterface. Vanwege de mogelijkheid om bidirectionele communicatie mogelijk te maken, v-model wordt vaak gebruikt bij het werken met formulierelementen in Vue.

Verbreed uw expertise in het bouwen van Vue-apps

Je hebt geleerd over databinding in Vue, inclusief interpolatie en de richtlijnen v-bind en v-model. Deze gegevensbindingen zijn essentieel, omdat ze de basis vormen van Vue-apps.

Vue heeft veel andere richtlijnen voor use cases, zoals lijstweergave, gebeurtenisbinding en voorwaardelijke weergave. Als u Vue-richtlijnen begrijpt, kunt u een dynamische en interactieve front-end voor uw webapplicaties bouwen.