Phenquestions
Vue.js är ett så lättlärt och tillgängligt bibliotek. Så med kunskapen om HTML, CSS och Javascript kan vi börja bygga webbapplikationer i Vue.js. Vue.js är byggd genom att kombinera de bästa funktionerna från en redan existerande ramverk för Angular och react.
Databindning är en av de mest eleganta funktionerna i Vue.js eftersom det ger reaktiv / tvåvägs databindning. I Vue.js, vi behöver inte skriva många rader för att ha tvåvägs databindning, till skillnad från andra ramar. Envägs databindning innebär att variabeln bara är bunden till DOM. Å andra sidan betyder tvåvägs att variabeln också är bunden från DOM. När DOM ändras ändras också variabeln. Så, låt oss ta en titt på båda databindningarna och se rätt skillnad.
Envägs databindning
Om vi vill binda någon variabel kan vi helt enkelt använda Vue.js syntax med dubbla lockiga hakparenteser eller "Mustasch" -syntax för att binda alla variabler från den relativa komponentinstansen.
linuxhintText
Eller om vi vill binda någon variabel i ett HTML-attribut kan vi använda v-binda direktiv.
Vue.js tillhandahåller också förkortningen för bindningsvariabler i ett HTML-attribut. Istället för att skriva v-bind: attributnamn, vi kan bara använda ett kolon ":" och attributnamn.
Men det här är bara databindningar. För att visa tvåvägs databindning kan vi använda v-modell direktiv som tillhandahålls av Vue.js.
Tvåvägs / reaktiv databindning
För att visa bindande reaktiva data kan vi använda v-modell direktivet om ett inmatningsfält. Det kommer internt att avge en händelse och ändra variabeln. Till vilken vi kan binda någon annanstans i mallen med dubbla lockiga hängslen eller "Mustasch" -syntax.
Du skriver: linuxhintText
Nu när vi anger ett tecken i fältet för inmatningsformulär kan vi se att variabeln också uppdateras samtidigt.
Avslutar
I den här artikeln har vi lärt oss hur man binder variabler i Vue.js med dubbla lockiga hängslen eller "Mustasch" -syntax. Vi har också visat tvåvägs / reaktiv databindning i Vue.js använder v-modelldirektivet. Efter att ha läst den här artikeln är databindning inte en svår uppgift längre för en nybörjare som just har börjat med Vue.js. Så fortsätt lära dig begreppen Vue.js med linuxhint.com. Tack!
