Phenquestions
Vue.js este o bibliotecă ușor de învățat și accesibilă. Deci, având cunoștințe de HTML, CSS și Javascript, putem începe să construim aplicații web în Vue.js. Vue.js este construit prin combinarea celor mai bune caracteristici dintr-un cadru Angular și react deja existent.
Legarea datelor este una dintre cele mai elegante caracteristici ale Vue.js, deoarece oferă o legare reactivă / bidirecțională a datelor. În Vue.js, nu trebuie să scriem o mulțime de linii pentru a avea legături de date bidirecționale, spre deosebire de alte cadre. Legarea unidirecțională a datelor înseamnă că variabila este legată doar de DOM. Pe de altă parte, bidirecțional înseamnă că variabila este, de asemenea, legată de DOM. Când DOM se schimbă, variabila se schimbă și ea. Deci, să aruncăm o privire la ambele legături de date și să vedem diferența corectă.
Legare de date unidirecțională
Dacă dorim să legăm orice variabilă, putem folosi pur și simplu Vue.sintaxa acoladurilor duble sau sintaxa „Mustache” a lui js pentru a lega orice variabilă din instanța componentă relativă.
linuxhintText
Sau, dacă dorim să legăm orice variabilă din interiorul unui atribut HTML, putem folosi v-lega directivă.
Vue.js oferă, de asemenea, prescurtarea pentru variabilele de legare într-un atribut HTML. În loc să scrie v-bind: atribut-nume, putem folosi doar un punct „:” și numele atributului.
Dar acestea sunt doar legături de date. Pentru a demonstra legarea bidirecțională a datelor, putem folosi model v directivă furnizată de Vue.js.
Legare de date bidirecțională / reactivă
Pentru a demonstra legarea reactivă a datelor, putem folosi model v directivă privind un câmp de formular de intrare. Acesta va emite intern un eveniment și va schimba variabila. La care ne putem lega în altă parte în șablon folosind acolade duble sau sintaxa „Mustață”.
Scrieți: linuxhintText
Acum, ori de câte ori introducem un caracter în câmpul formularului de intrare, putem vedea că variabila se actualizează și simultan.
Înfășurându-se
În acest articol, am învățat cum să legăm variabile în Vue.js folosind acolade duble sau sintaxa „Mustață”. Am demonstrat, de asemenea, legarea de date în două direcții / reactivă în Vue.js folosind directiva v-model. După ce ați citit acest articol, legarea datelor nu mai este o sarcină dificilă pentru un începător care tocmai a început cu Vue.js. Așadar, continuați să învățați conceptele Vue.js cu linuxhint.com. Mulțumesc!
