Her er hva du trenger å vite om databinding i Vue

Binding av data i nettapper skaper en kobling mellom appens forekomst og UI (brukergrensesnitt). Appens forekomst administrerer data, atferd og komponenter, mens brukergrensesnittet representerer det visuelle aspektet som brukere samhandler med. Bindende data lar deg lage dynamiske nettapper.

Her vil du utforske ulike bindinger i Vue, inkludert enveis og toveis bindinger. Du vil også lære å implementere disse bindingene med bartemaler og direktiver som v-bind og v-model.

Interpolering i Vue

Interpolering er en av Vues mest populære typer databinding. Interpolasjon lar deg vise dataverdier i Hyper Text Markup Language (HTML)-taggene med bartmalen, populært betegnet med doble krøllete klammeparenteser ({{ }}).

Med bartmalen kan du integrere dynamisk appinnhold som data og metodeegenskaper i HTML-en din. Du kan oppnå dette ved å vedlegge data- eller metodeegenskapsnavn fra alternativobjekt i Vue innenfor disse krøllete seler.

Her er et eksempel på en Vue-app som bruker bartmalen for å oppnå interpolering i Vue:

<kropp>
<divid="app">
<h1>{{ tittel }}h1>
<s>{{ text.toUpperCase() }}s>
div>
<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 tittel: "Velkommen",
 tekst: "Dette er din verden?",
 };
 },
 });
 app.mount("#app");
manus>
kropp>

Kodeblokken ovenfor bruker bartmalen for å vise verdien av tittelegenskapen i Vue-appens dataobjekt. Du kan også vise JavaScript-uttrykksresultater med interpolasjon. For eksempel {{text.toUpperCase()}} uttrykk i s -taggen viser den store versjonen av tekstverdien, som vist på bildet nedenfor:

Når du monterer en Vue-app, evaluerer Vue uttrykk i malene og gjengir de resulterende verdiene i HTML-kroppen. Eventuelle endringer i dataegenskaper oppdaterer de tilsvarende verdiene i brukergrensesnittet.

For eksempel:

<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 tittel: "Hei",
 tekst: "Dette er din verden?",
 };
 },
 });
 app.mount("#app");
manus>

Kodeblokken ovenfor endrer tittelegenskapen til "Hallo". Denne endringen vil automatisk reflekteres i brukergrensesnittet siden Vue-appen binder tittelegenskapen til brukergrensesnittelementet, som vist nedenfor:

Interpolering gir bare ut data når de doble krøllete parentesene er mellom åpnings- og lukkings-HTML-koder.

Enveis databinding med v-bind-direktivet

I likhet med interpolering kobler enveis databinding appens forekomst til brukergrensesnittet. Forskjellen er at den binder egenskaper som data og metoder til HTML-attributter.

Enveis databinding støtter enveis dataflyt, og hindrer brukere i å gjøre endringer som påvirker dataegenskapene på appens forekomst. Dette er nyttig når du vil vise data til appbrukeren, men hindre brukeren i å endre dem.

Du kan oppnå enveis databinding i Vue med v-bind direktiv eller dets stenografi (:):

 v-bind-direktivet 
<inputtype="tekst"v-bind: verdi="tekst">
 the: stenografitegn 
<inputtype="tekst":verdi="tekst">

Kodeblokken viser bruken av v-bind-direktivet og dets stenografi for å binde verdien av HTML-koden til en tekstdataegenskap. Her er et eksempel på en Vue-app som bruker v-bind direktiv for å oppnå enveis databinding:

<kropp>
<divid="app">
<inputtype="tekst"v-bind: verdi="tekst">
<s>{{ tekst }}s>
div>
<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 tekst: 'Vue er kjempebra!'
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Over viser et inndatafelt og et avsnittselement verdien til tekst eiendom. De verdi attributtet til inndatafeltet er bundet til tekstegenskapen ved å bruke v-bind direktiv.

Denne kodeblokken skaper en enveisbinding, der endringer i tekst egenskapen vil oppdatere inndatafeltets verdi, men endringer som gjøres i inndatafeltet vil ikke oppdatere tekst eiendom i Vue-appens forekomst.

For å vise dette kan vi starte med startverdien til tekst eiendom, "Vue er fantastisk!":

Etter å ha endret verdien på inndatafeltet til "Hei Verden!", legg merke til at Vue-appen ikke ble oppdatert, og teksten i avsnittskoden forble den samme:

Men når vi endrer verdien av tekst eiendom til Hei Verden! i Vue-appen i stedet for fra inndatafeltet, oppdateres inndatafeltet for å gjenspeile den nye verdien:

Denne måten å binde data på er nyttig i scenarier der du ønsker å vise data til brukeren, men hindre brukeren i å endre dem direkte. Ved å utnytte v-bind i Vue.js kan du etablere en enveisbinding, og enkelt koble appens data til UI-elementer.

Toveis databinding med v-modelldirektivet

Toveis databinding gjør at endringer i et UI-elements verdi automatisk reflekteres i den underliggende datamodellen og omvendt. Mest front-end JavaScript-rammeverk som Kantet bruk toveis binding å dele data og håndtere hendelser i sanntid.

Vue.js gjør toveis binding mulig med v-modell direktiv. De v-modell direktivet oppretter en toveis databinding mellom et skjemainndataelement og en dataegenskap. Når du skriver inn i et input-element, blir verdien automatisk oppdatert i dataegenskapen, og eventuelle endringer i dataegenskapen vil også oppdatere input-elementet.

Her er et eksempel på en Vue-app som bruker v-modell direktiv for å oppnå toveis databinding:

<hode>
<tittel>Toveis databinding i Vuetittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<inputtype="tekst"v-modell="tekst">
<s>{{ tekst }}s>
div>
<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 tekst: 'Vue er kjempebra!'
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Kodeblokken ovenfor har et inngangselement med v-modell direktiv som binder den til tekst dataegenskap. De tekst egenskapen er opprinnelig satt til "Vue er kjempebra!".

Inndatafeltet oppdaterer tekstegenskapen når du skriver inn i den og gjenspeiler endringer i tekstegenskapen i s stikkord. Vue.js bruker v-modelldirektivet og inngangselementet for å oppnå toveis databinding.

Mens v-bind tillater enveiskommunikasjon fra Vue-appen til brukergrensesnittet, gir v-modellen toveis kommunikasjon mellom Vue-appen og brukergrensesnittet. På grunn av sin evne til å muliggjøre toveis kommunikasjon, v-modell brukes ofte når du arbeider med skjemaelementer i Vue.

Utvid ekspertisen din i å bygge Vue-apper

Du lærte om databinding i Vue, inkludert interpolering og v-bind- og v-modell-direktivene. Disse databindingene er viktige, siden de fungerer som grunnlaget for Vue-apper.

Vue har mange andre direktiver for brukstilfeller, for eksempel listegjengivelse, hendelsesbinding og betinget gjengivelse. Å forstå Vue-direktiver hjelper deg med å bygge en dynamisk og interaktiv front-end for nettapplikasjonene dine.