Phenquestions
Vue.js er så let at lære og tilgængeligt bibliotek. Så med viden om HTML, CSS og Javascript kan vi begynde at opbygge webapplikationer i Vue.js. Vue.js er bygget ved at kombinere de bedste funktioner fra en allerede eksisterende Angular og react-rammer.
Databinding er en af de mest elegante funktioner i Vue.js fordi det giver reaktiv / tovejs databinding. I Vue.js, vi behøver ikke at skrive mange linjer for at have tovejs databinding, i modsætning til andre rammer. Envejs databinding betyder, at variabelen bare er bundet til DOM. På den anden side betyder tovejs, at variablen også er bundet fra DOM. Når DOM ændres, ændres variablen også. Så lad os tage et kig på begge databindingerne og se den rigtige forskel.
Envejs databinding
Hvis vi vil binde en variabel, kan vi bare bruge Vue.js's syntaks med dobbelt krøllet afstivning eller "Mustache" -syntaks for at binde enhver variabel fra den relative komponentforekomst.
linuxhintText
Eller hvis vi vil binde en variabel inde i en HTML-attribut, kan vi bruge v-bind direktiv.
Vue.js giver også stenografi til binding af variabler i en HTML-attribut. I stedet for at skrive v-bind: attribut-navn, vi kan kun bruge et kolon ":" og attributnavn.
Men dette er bare databindinger. For at demonstrere tovejs databinding kan vi bruge v-model direktiv leveret af Vue.js.
Tovejs / reaktiv databinding
For at demonstrere reaktiv databinding kan vi bruge v-model direktiv om et inputformularfelt. Det udsender internt en begivenhed og ændrer variablen. Som vi kan binde et andet sted til i skabelonen ved hjælp af dobbelt krøllede seler eller "Mustache" -syntaks.
Du skriver: linuxhintText
Når vi nu indtaster et tegn i inputformularfeltet, kan vi se, at variablen også opdateres samtidigt.
Afslutter
I denne artikel har vi lært, hvordan man binder variabler i Vue.js ved hjælp af dobbelt krøllede seler eller "Mustache" -syntaks. Vi har også demonstreret den tovejs / reaktive databinding i Vue.js ved hjælp af v-model direktivet. Efter at have læst denne artikel er databinding ikke længere en vanskelig opgave for en nybegynder, der lige har startet med Vue.js. Så fortsæt med at lære begreberne Vue.js med linuxhint.com. tak skal du have!
