Lär dig hur du använder databindning i Vue med interpolations-, v-bind- och v-modelldirektiv.

Bindning av data i webbappar skapar en länk mellan appens instans och UI (användargränssnitt). Appens instans hanterar data, beteende och komponenter, medan användargränssnittet representerar den visuella aspekten som användare interagerar med. Bindande data låter dig skapa dynamiska webbappar.

Här kommer du att utforska olika bindningar i Vue, inklusive envägs- och tvåvägsbindningar. Du får även lära dig att implementera dessa bindningar med mustaschmallar och direktiv som v-bind och v-model.

Interpolation i Vue

Interpolation är en av Vues mest populära typer av databindning. Interpolation låter dig visa datavärden i dina HTML-taggar (Hyper Text Markup Language) med mustaschmallen, populärt betecknad med dubbla lockiga hängslen ({{ }}).

Med mustaschmallen kan du integrera dynamiskt appinnehåll som data och metodegenskaper i din HTML. Du kan uppnå detta genom att bifoga data- eller metodegenskapsnamn från optionsobjekt i Vue inom dessa lockiga hängslen.

instagram viewer

Här är ett exempel på en Vue-app som använder mustaschmallen för att uppnå interpolation i Vue:

<kropp>
<divid="app">
<h1>{{ title }}h1>
<sid>{{ text.toUpperCase() }}sid>
div>
<manus>
 const app = Vue.createApp({
 data() {
 lämna tillbaka {
 titel: "Välkommen",
 text: "Det här är din värld?",
 };
 },
 });
 app.mount("#app");
manus>
kropp>

Kodblocket ovan använder mustaschmallen för att visa värdet på titelegenskapen i Vue-appens dataobjekt. Du kan också visa JavaScript-uttrycksresultat med interpolation. Till exempel {{text.toUpperCase()}} uttryck i sid taggen visar versalversionen av textvärdet, som visas i bilden nedan:

När du monterar en Vue-app utvärderar Vue uttryck i mallarna och återger de resulterande värdena i HTML-kroppen. Alla ändringar av dataegenskaper uppdaterar motsvarande värden i användargränssnittet.

Till exempel:

<manus>
 const app = Vue.createApp({
 data() {
 lämna tillbaka {
 titel: "Hej",
 text: "Det här är din värld?",
 };
 },
 });
 app.mount("#app");
manus>

Ovanstående kodblock ändrar titelegenskapen till "Hallå". Denna ändring kommer automatiskt att återspeglas i användargränssnittet eftersom Vue-appen binder titelegenskapen till användargränssnittselementet, som visas nedan:

Interpolation matar endast ut data när de dubbla krulliga parenteserna är mellan öppnande och stängda HTML-taggar.

Envägsdatabindning med v-bind-direktivet

Precis som interpolering länkar envägsdatabindning appens instans till användargränssnittet. Skillnaden är att den binder egenskaper som data och metoder till HTML-attribut.

Envägsdatabindning stöder det enkelriktade dataflödet, vilket förhindrar användare från att göra ändringar som påverkar dataegenskaper på appens instans. Detta är användbart när du vill visa data för appanvändaren men hindra användaren från att ändra den.

Du kan uppnå enkelriktad databindning i Vue med v-binda direktiv eller dess förkortning (:):

 v-bind-direktivet 
<inmatningtyp="text"v-bind: värde="text">
 the: stenografi karaktär 
<inmatningtyp="text":värde="text">

Kodblocket visar användningen av v-bind-direktivet och dess förkortning för att binda värdet av HTML-inmatningstaggen till en textdataegenskap. Här är ett exempel på en Vue-app som använder v-binda direktiv för att uppnå enkelriktad databindning:

<kropp>
<divid="app">
<inmatningtyp="text"v-bind: värde="text">
<sid>{{ text }}sid>
div>
<manus>
 const app = Vue.createApp({
 data() {
 lämna tillbaka {
 text: 'Vue är fantastiskt!'
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Ovan visar ett inmatningsfält och ett styckeelement värdet på text fast egendom. De värde attributet för inmatningsfältet är bundet till textegenskapen med hjälp av v-binda direktiv.

Detta kodblock skapar en envägsbindning, där ändringar av text egenskapen kommer att uppdatera inmatningsfältets värde, men ändringar som görs i inmatningsfältet kommer inte att uppdatera text egendom i Vue-appens instans.

För att visa detta kan vi börja med det initiala värdet av text fast egendom, "Vue är fantastiskt!”:

Efter att ha ändrat värdet på inmatningsfältet till "Hej världen!", lägg märke till att Vue-appen inte uppdaterades och texten i stycketaggen förblev densamma:

Men när vi ändrar värdet på text egendom till Hej världen! i Vue app-instansen istället för från inmatningsfältet uppdateras inmatningsfältet för att återspegla det nya värdet:

Det här sättet att binda data är praktiskt i scenarier där du vill visa data för användaren men hindra användaren från att ändra dem direkt. Med hjälp av v-bind i Vue.js kan du skapa en enkelriktad bindning, som enkelt kopplar din apps data till UI-element.

Tvåvägsdatabindning med v-modelldirektivet

Tvåvägsdatabindning gör att ändringar av ett UI-elements värde automatiskt återspeglas i den underliggande datamodellen och vice versa. Mest front-end JavaScript-ramverk tycka om Angular använder tvåvägsbindning att dela data och hantera händelser i realtid.

Vue.js gör tvåvägsbindning möjlig med v-modell direktiv. De v-modell direktivet skapar en tvåvägsdatabindning mellan ett formulärinmatningselement och en dataegenskap. När du skriver i ett inmatningselement uppdateras värdet automatiskt i dataegenskapen, och alla ändringar av dataegenskapen kommer också att uppdatera indataelementet.

Här är ett exempel på en Vue-app som använder v-modell direktiv för att uppnå tvåvägsdatabindning:

<huvud>
<titel>Tvåvägsdatabindning i Vuetitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">
<inmatningtyp="text"v-modell="text">
<sid>{{ text }}sid>
div>
<manus>
 const app = Vue.createApp({
 data() {
 lämna tillbaka {
 text: 'Vue är fantastiskt!'
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Kodblocket ovan har ett ingångselement med v-modell direktiv som binder den till text dataegenskap. De text egenskapen är initialt inställd på "Vue är fantastiskt!".

Inmatningsfältet uppdaterar textegenskapen när du skriver i den och återspeglar ändringar av textegenskapen i sid märka. Vue.js använder v-modelldirektivet och inmatningselementet för att uppnå tvåvägsdatabindning.

Medan v-bind tillåter enkelriktad kommunikation från Vue-appen till användargränssnittet, tillhandahåller v-modellen dubbelriktad kommunikation mellan Vue-appen och användargränssnittet. På grund av dess förmåga att möjliggöra dubbelriktad kommunikation, v-modell används ofta när man arbetar med formulärelement i Vue.

Bredda din expertis på att bygga Vue-appar

Du lärde dig om databindning i Vue, inklusive interpolation och direktiven v-bind och v-modell. Dessa databindningar är viktiga, eftersom de fungerar som grunden för Vue-appar.

Vue har många andra direktiv för användningsfall, som listrendering, händelsebindning och villkorlig rendering. Att förstå Vue-direktiven hjälper dig att bygga ett dynamiskt och interaktivt gränssnitt för dina webbapplikationer.