Iată ce trebuie să știți despre legarea datelor în Vue

Legarea datelor în aplicațiile web creează o legătură între instanța aplicației și interfața de utilizare (interfața de utilizator). Instanța aplicației gestionează datele, comportamentul și componentele, în timp ce interfața de utilizare reprezintă aspectul vizual cu care interacționează utilizatorii. Legarea datelor vă permite să creați aplicații web dinamice.

Aici, veți explora diverse legături în Vue, inclusiv legături unidirecționale și bidirecționale. De asemenea, veți învăța să implementați aceste legături cu șabloane de mustață și directive, cum ar fi v-bind și v-model.

Interpolare în Vue

Interpolarea este unul dintre cele mai populare tipuri de legare de date de la Vue. Interpolarea vă permite să afișați valorile datelor în etichetele HTML (Hyper Text Markup Language) cu șablonul de mustață, notat în mod popular cu acolade duble ({{ }}).

Cu șablonul mustață, puteți integra conținut dinamic al aplicației, cum ar fi proprietățile de date și metode, în HTML. Puteți realiza acest lucru prin includerea datelor sau a numelor de proprietăți ale metodei din

obiect opțiuni în Vue în cadrul acestor bretele.

Iată o instanță a unei aplicații Vue care utilizează șablonul mustață pentru a realiza interpolarea în Vue:

<corp>
<divid=„aplicație”>
<h1>{{ titlu }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<scenariu>
 const app = Vue.createApp({
 date() {
 întoarcere {
 titlu: „Bine ați venit”,
 text: „Aceasta este lumea ta?”,
 };
 },
 });
 app.mount("#aplicație");
scenariu>
corp>

Blocul de cod de mai sus folosește șablonul mustață pentru a afișa valoarea proprietății titlu în obiectul de date al aplicației Vue. De asemenea, puteți afișa rezultatele expresiei JavaScript cu interpolare. De exemplu, cel {{text.toUpperCase()}} expresie în p eticheta afișează versiunea cu majuscule a valorii textului, așa cum se arată în imaginea de mai jos:

Când montezi o aplicație Vue, Vue evaluează expresiile din șabloane și redă valorile rezultate în corpul HTML. Orice modificare adusă proprietăților datelor actualizează valorile corespunzătoare în interfața de utilizare.

De exemplu:

<scenariu>
 const app = Vue.createApp({
 date() {
 întoarcere {
 titlu: „Bună ziua”,
 text: „Aceasta este lumea ta?”,
 };
 },
 });
 app.mount("#aplicație");
scenariu>

Blocul de cod de mai sus schimbă proprietatea titlului în „Buna ziua". Această modificare se va reflecta automat în interfața de utilizare, deoarece aplicația Vue leagă proprietatea titlu de elementul UI, după cum se arată mai jos:

Interpolarea produce date numai atunci când parantezele duble sunt între etichetele HTML de deschidere și de închidere.

Legare unidirecțională a datelor cu directiva v-bind

La fel ca interpolarea, legarea de date unidirecțională leagă instanța aplicației de interfața de utilizare. Diferența este că leagă proprietăți precum datele și metodele de atribute HTML.

Legarea unidirecțională a datelor acceptă fluxul unidirecțional de date, împiedicând utilizatorii să facă modificări care afectează proprietățile datelor din instanța aplicației. Acest lucru este util atunci când doriți să afișați date utilizatorului aplicației, dar împiedicați utilizatorul să le modifice.

Puteți obține o legare de date unidirecțională în Vue cu v-bind directivă sau caracterul său prescurtat (:):

 directiva v-bind 
<intraretip="text"v-bind: valoare="text">
 caracterul: stenografie 
<intraretip="text":valoare="text">

Blocul de cod arată utilizarea directivei v-bind și prescurtarea acesteia pentru a lega valoarea etichetei HTML de intrare la o proprietate de date text. Iată un exemplu de aplicație Vue care utilizează v-bind directivă pentru a realiza legarea de date unidirecțională:

<corp>
<divid=„aplicație”>
<intraretip="text"v-bind: valoare="text">
<p>{{ text }}p>
div>
<scenariu>
 const app = Vue.createApp({
 date() {
 întoarcere {
 text: „Vue este minunat!”
 }
 }
 })
 app.mount('#app')
scenariu>
corp>

Mai sus, un câmp de intrare și un element de paragraf afișează valoarea text proprietate. The valoare atributul câmpului de introducere este legat de proprietatea text folosind v-bind directivă.

Acest bloc de cod creează o legare unidirecțională, în care se modifică text proprietatea va actualiza valoarea câmpului de intrare, dar modificările făcute în câmpul de intrare nu vor actualiza text proprietatea în instanța aplicației Vue.

Pentru a arăta acest lucru, putem începe cu valoarea inițială a lui text proprietate,”Vue este minunat!”:

După modificarea valorii câmpului de intrare în „Salut Lume!", observați că aplicația Vue nu a fost actualizată, iar textul din eticheta de paragraf a rămas același:

Cu toate acestea, atunci când schimbăm valoarea text proprietate la Salut Lume! în instanța aplicației Vue în loc de din câmpul de intrare, câmpul de intrare este actualizat pentru a reflecta noua valoare:

Acest mod de legare a datelor este util în scenariile în care doriți să afișați date utilizatorului, dar împiedicați utilizatorul să le modifice direct. Folosind v-bind în Vue.js, puteți stabili o legare unidirecțională, conectând cu ușurință datele aplicației dvs. la elementele UI.

Legare bidirecțională a datelor cu directiva v-model

Legarea bidirecțională a datelor permite ca modificările aduse valorii unui element UI să fie reflectate automat în modelul de date subiacent și invers. Cele mai multe front-end cadre JavaScript ca Angular utiliza legarea în două sensuri pentru a partaja date și a gestiona evenimente în timp real.

Vue.js face posibilă legarea în două sensuri cu v-model directivă. The v-model directiva creează o legătură de date bidirecțională între un element de intrare al formularului și o proprietate de date. Când tastați într-un element de intrare, valoarea este actualizată automat în proprietatea de date și orice modificare a proprietății de date va actualiza și elementul de intrare.

Iată un exemplu de aplicație Vue care utilizează v-model directivă pentru a realiza legarea bidirecțională a datelor:

<cap>
<titlu>Legare bidirecțională de date în Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<intraretip="text"v-model="text">
<p>{{ text }}p>
div>
<scenariu>
 const app = Vue.createApp({
 date() {
 întoarcere {
 text: „Vue este minunat!”
 }
 }
 })
 app.mount('#app')
scenariu>
corp>

Blocul de cod de mai sus are un element de intrare cu v-model directivă care o leagă de text proprietatea datelor. The text proprietatea este setată inițial la "Vue este minunat!".

Câmpul de introducere actualizează proprietatea text atunci când îl tastați și reflectă modificările aduse proprietății text în p etichetă. Vue.js folosește directiva v-model și elementul de intrare pentru a realiza legarea de date în două sensuri.

În timp ce v-bind permite comunicarea unidirecțională de la aplicația Vue la UI, v-model oferă comunicare bidirecțională între aplicația Vue și UI. Datorită capacității sale de a permite comunicarea bidirecțională, v-model este adesea folosit atunci când lucrați cu elemente de formular în Vue.

Lărgiți-vă experiența în construirea de aplicații Vue

Ați învățat despre legarea de date în Vue, inclusiv despre interpolare și directivele v-bind și v-model. Aceste legături de date sunt esențiale, deoarece servesc drept bază pentru aplicațiile Vue.

Vue are multe alte directive pentru cazuri de utilizare, cum ar fi randarea listelor, legarea evenimentelor și redarea condiționată. Înțelegerea directivelor Vue vă ajută să construiți un front-end dinamic și interactiv pentru aplicațiile dvs. web.