Vue.js er et så lettlært og tilgjengelig bibliotek. Så, med kunnskap om HTML, CSS og Javascript, kan vi begynne å bygge webapplikasjoner i Vue.js. Vue.js er bygget ved å kombinere de beste funksjonene fra et allerede eksisterende Angular og react-rammeverk.
Databinding er en av de mest elegante funksjonene i Vue.js fordi det gir reaktiv / toveis databinding. I Vue.js, vi trenger ikke å skrive mange linjer for å ha toveis databinding, i motsetning til andre rammer. Enveis databinding betyr at variabelen bare er bundet til DOM. På den annen side betyr toveis at variabelen også er bundet fra DOM. Når DOM endres, endres også variabelen. Så, la oss ta en titt på begge datainnbindingene og se riktig forskjell.
Enveis datainnbinding
Hvis vi vil binde en variabel, kan vi bare bruke Vue.js syntaks med dobbelt krøllete bukseseler eller syntaks for "bart" for å binde en variabel fra den relative komponentforekomsten.
linuxhintText
Eller hvis vi ønsker å binde en variabel i et HTML-attributt, kan vi bruke v-bind direktivet.
Vue.js gir også forkortelse for bindingsvariabler i et HTML-attributt. I stedet for å skrive v-bind: attributt-navn, vi kan bare bruke et kolon ":" og attributtnavn.
Men dette er bare databindinger. For å demonstrere toveis databinding, kan vi bruke v-modell direktivet gitt av Vue.js.
Toveis / reaktiv databinding
For å demonstrere reaktiv databinding, kan vi bruke v-modell direktiv på et inndatafeltfelt. Det vil internt avgi en hendelse og endre variabelen. Som vi kan binde et annet sted i malen ved å bruke dobbel krøllete bukseseler eller "Mustache" -syntaks.
Du skriver: linuxhintText
Nå, når vi skriver inn et tegn i inndatafeltfeltet, kan vi se at variabelen også oppdateres samtidig.
Innpakning
I denne artikkelen har vi lært hvordan vi kan binde variabler i Vue.js bruker dobbel krøllete bukseseler eller "Mustache" -syntaks. Vi har også demonstrert toveis / reaktiv databinding i Vue.js bruker v-modell direktivet. Etter å ha lest denne artikkelen er databinding ikke en vanskelig oppgave lenger for en nybegynner som nettopp har startet med Vue.js. Så fortsett å lære konseptene til Vue.js med linuxhint.com. Takk skal du ha!