Her er hvad du behøver at vide om databinding i Vue

Binding af data i webapps skaber et link mellem appens instans og UI (brugergrænseflade). Appens instans administrerer data, adfærd og komponenter, mens brugergrænsefladen repræsenterer det visuelle aspekt, som brugerne interagerer med. Bindende data giver dig mulighed for at oprette dynamiske webapps.

Her vil du udforske forskellige bindinger i Vue, inklusive envejs- og tovejsbindinger. Du lærer også at implementere disse bindinger med overskægsskabeloner og direktiver såsom v-bind og v-model.

Interpolation i Vue

Interpolation er en af ​​Vues mest populære typer databinding. Interpolation giver dig mulighed for at vise dataværdier i dine Hyper Text Markup Language (HTML) tags med overskægsskabelonen, populært betegnet med dobbelte krøllede seler ({{ }}).

Med overskægsskabelonen kan du integrere dynamisk appindhold som data og metodeegenskaber i din HTML. Du kan opnå dette ved at vedlægge data- eller metodeegenskabsnavne fra optionsobjekt i Vue inden for disse krøllede seler.

Her er et eksempel på en Vue-app, der bruger overskægsskabelonen til at opnå interpolation i Vue:

<legeme>
<divid="app">
<h1>{{ titel }}h1>
<s>{{ text.toUpperCase() }}s>
div>
<manuskript>
 const app = Vue.createApp({
 data() {
 Vend tilbage {
 titel: "Velkommen",
 tekst: "Dette er din verden?",
 };
 },
 });
 app.mount("#app");
manuskript>
legeme>

Kodeblokken ovenfor bruger overskægsskabelonen til at vise værdien af ​​titelegenskaben i Vue-appens dataobjekt. Du kan også vise JavaScript-udtryksresultater med interpolation. For eksempel {{text.toUpperCase()}} udtryk i s tag viser den store version af tekstværdien, som vist på billedet nedenfor:

Når du monterer en Vue-app, evaluerer Vue udtryk i skabelonerne og gengiver de resulterende værdier i HTML-kroppen. Eventuelle ændringer af dataegenskaber opdaterer de tilsvarende værdier i brugergrænsefladen.

For eksempel:

<manuskript>
 const app = Vue.createApp({
 data() {
 Vend tilbage {
 titel: "Hej",
 tekst: "Dette er din verden?",
 };
 },
 });
 app.mount("#app");
manuskript>

Ovenstående kodeblok ændrer titelegenskaben til "Hej". Denne ændring afspejles automatisk i brugergrænsefladen, da Vue-appen binder titelegenskaben til brugergrænsefladeelementet, som vist nedenfor:

Interpolation udsender kun data, når de dobbelte krøllede parenteser er mellem åbne og lukke HTML-tags.

Envejsdatabinding med v-bind-direktivet

Ligesom interpolation forbinder envejsdatabinding appens instans til brugergrænsefladen. Forskellen er, at den binder egenskaber som data og metoder til HTML-attributter.

Envejsdatabinding understøtter det ensrettede dataflow, hvilket forhindrer brugere i at foretage ændringer, der påvirker dataegenskaber på appens instans. Dette er nyttigt, når du vil vise data til appbrugeren, men forhindre brugeren i at ændre dem.

Du kan opnå envejsdatabinding i Vue med v-bind direktiv eller dets stenografi (:):

 v-bind direktivet 
<inputtype="tekst"v-bind: værdi="tekst">
 den: stenografiske tegn 
<inputtype="tekst":værdi="tekst">

Kodeblokken viser brugen af ​​v-bind-direktivet og dets stenografi til at binde værdien af ​​input-HTML-tagget til en tekstdataegenskab. Her er et eksempel på en Vue-app, der bruger v-bind direktiv for at opnå envejsdatabinding:

<legeme>
<divid="app">
<inputtype="tekst"v-bind: værdi="tekst">
<s>{{ tekst }}s>
div>
<manuskript>
 const app = Vue.createApp({
 data() {
 Vend tilbage {
 tekst: 'Vue er fantastisk!'
 }
 }
 })
 app.mount('#app')
manuskript>
legeme>

Ovenfor viser et inputfelt og et afsnitselement værdien af tekst ejendom. Det værdi attributten for inputfeltet er bundet til tekstegenskaben ved hjælp af v-bind direktiv.

Denne kodeblok opretter en envejsbinding, hvor ændringer til tekst egenskaben opdaterer inputfeltets værdi, men ændringer foretaget i inputfeltet vil ikke opdatere tekst ejendom i Vue-appens forekomst.

For at vise dette kan vi starte med startværdien af tekst ejendom, "Vue er fantastisk!”:

Efter at have ændret værdien af ​​indtastningsfeltet til "Hej Verden!", bemærk, at Vue-appen ikke blev opdateret, og teksten i afsnitstagget forblev den samme:

Men når vi ændrer værdien af tekst ejendom til Hej Verden! i Vue-app-forekomsten i stedet for fra inputfeltet, bliver inputfeltet opdateret, så det afspejler den nye værdi:

Denne måde at binde data på er praktisk i scenarier, hvor du ønsker at vise data til brugeren, men forhindrer brugeren i at ændre dem direkte. Ved at udnytte v-bind i Vue.js kan du etablere en envejsbinding, der nemt forbinder din apps data til UI-elementer.

Tovejs databinding med v-modeldirektivet

To-vejs databinding tillader ændringer af et UI-elements værdi automatisk at blive afspejlet i den underliggende datamodel og omvendt. Mest front-end JavaScript rammer synes godt om Kantet anvende to-vejs binding at dele data og håndtere hændelser i realtid.

Vue.js gør to-vejs binding mulig med v-model direktiv. Det v-model direktiv opretter en tovejs databinding mellem et formularinputelement og en dataegenskab. Når du skriver i et input-element, bliver værdien automatisk opdateret i dataegenskaben, og enhver ændring af dataegenskaben vil også opdatere input-elementet.

Her er et eksempel på en Vue-app, der bruger v-model direktiv for at opnå tovejs databinding:

<hoved>
<titel>To-vejs databinding i Vuetitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<inputtype="tekst"v-model="tekst">
<s>{{ tekst }}s>
div>
<manuskript>
 const app = Vue.createApp({
 data() {
 Vend tilbage {
 tekst: 'Vue er fantastisk!'
 }
 }
 })
 app.mount('#app')
manuskript>
legeme>

Kodeblokken ovenfor har et input-element med v-model direktiv, der binder det til tekst dataegenskab. Det tekst egenskab er oprindeligt sat til "Vue er fantastisk!".

Indtastningsfeltet opdaterer tekstegenskaben, når du skriver i den, og afspejler ændringer af tekstegenskaben i s tag. Vue.js bruger v-model-direktivet og input-elementet til at opnå to-vejs databinding.

Mens v-bind tillader envejskommunikation fra Vue-appen til brugergrænsefladen, giver v-modellen tovejskommunikation mellem Vue-appen og brugergrænsefladen. På grund af sin evne til at muliggøre tovejskommunikation, v-model bruges ofte, når der arbejdes med formularelementer i Vue.

Udvid din ekspertise i at bygge Vue-apps

Du lærte om databinding i Vue, herunder interpolation og v-bind- og v-model-direktiverne. Disse databindinger er essentielle, da de tjener som grundlaget for Vue-apps.

Vue har mange andre direktiver for brugstilfælde, såsom listegengivelse, hændelsesbinding og betinget gengivelse. At forstå Vue-direktiver hjælper dig med at opbygge en dynamisk og interaktiv front-end til dine webapplikationer.