Vue.JS -databinding

Vue.JS er et så enkelt å lære og tilgjengelig bibliotek. Så med kunnskapen om HTML, CSS og JavaScript, kan vi begynne å bygge webapplikasjoner i Vue.JS. Vue.JS er bygget ved å kombinere de beste funksjonene fra en allerede eksisterende kantete og reagere rammer.

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 blir endret, blir variabelen også endret. Så la oss se på begge databindingene og se riktig forskjell.

Enveis databinding

Hvis vi vil binde noen variabel, kan vi ganske enkelt bruke Vue.JSs doble krøllete seler syntaks eller "bart" syntaks for å binde enhver variabel fra den relative komponentforekomsten.

LinuxHintText

Eller, hvis vi vil binde noen variabel i en HTML -attributt, kan vi bruke v-bind direktiv.

Vue.JS gir også korthåret for bindingsvariabler i en HTML -attributt. I stedet for å skrive V-BIND: attributtnavn, Vi kan bare bruke en kolon “:” og attributtnavn.

Men dette er bare databindinger. For å demonstrere toveis databinding, kan vi bruke V-modell Direktiv levert av Vue.JS.

Toveis/reaktive databinding

For å demonstrere reaktive databinding, kan vi bruke V-modell Direktiv på et inndata -skjemafelt. Det vil avgi en hendelse internt og endre variabelen. Som vi kan binde et annet sted i malen ved å bruke doble krøllete seler eller "bart" syntaks.

Du skriver: LinuxHintText

Nå, når vi skriver inn et tegn i inndataformfeltet, kan vi se at variabelen også oppdaterer samtidig.

Innpakning

I denne artikkelen har vi lært å binde variabler i Vue.JS ved hjelp av doble krøllete seler eller "bart" syntaks. Vi har også demonstrert de toveis/reaktive databindingene i Vue.JS ved hjelp av V-modelldirektivet. Etter å ha lest denne artikkelen, er ikke databinding en vanskelig oppgave lenger for en nybegynner som nettopp har fått en start med Vue.JS. Så fortsett å lære meg konseptene.JS med Linuxhint.com. Takk skal du ha!