Tukaj je tisto, kar morate vedeti o vezavi podatkov v Vue

Povezovanje podatkov v spletnih aplikacijah ustvari povezavo med primerkom aplikacije in uporabniškim vmesnikom (uporabniški vmesnik). Primerek aplikacije upravlja podatke, vedenje in komponente, uporabniški vmesnik pa predstavlja vizualni vidik, s katerim uporabniki komunicirajo. Vezavi podatkov vam omogočajo ustvarjanje dinamičnih spletnih aplikacij.

Tukaj boste raziskali različne vezave v Vue, vključno z enosmernimi in dvosmernimi vezavami. Naučili se boste tudi izvajati te vezave s predlogami za brke in direktivami, kot sta v-bind in v-model.

Interpolacija v Vue

Interpolacija je ena izmed najbolj priljubljenih vrst vezave podatkov Vue. Interpolacija vam omogoča prikaz podatkovnih vrednosti v oznakah HTML (Hyper Text Markup Language) s predlogo moustache, popularno označeno z dvojnimi zavitimi oklepaji ({{ }}).

S predlogo moustache lahko v svoj HTML integrirate dinamično vsebino aplikacije, kot so podatki in lastnosti metod. To lahko dosežete tako, da priložite podatke ali imena lastnosti metod iz

predmet možnosti v Vue v teh zavitih oklepajih.

Tukaj je primer aplikacije Vue, ki uporablja predlogo brkov za doseganje interpolacije v Vue:

<telo>
<divid="aplikacija">
<h1>{{ naslov }}h1>
<str>{{ text.toUpperCase() }}str>
div>
<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 naslov: "Dobrodošli",
 besedilo: "To je tvoj svet?",
 };
 },
 });
 app.mount("#app");
scenarij>
telo>

Zgornji blok kode uporablja predlogo brkov za prikaz vrednosti lastnosti naslova v podatkovnem objektu aplikacije Vue. Rezultate izrazov JavaScript lahko prikažete tudi z interpolacijo. Na primer, {{text.toUpperCase()}} izraz v str prikaže različico besedilne vrednosti z velikimi črkami, kot je prikazano na spodnji sliki:

Ko namestite aplikacijo Vue, Vue ovrednoti izraze v predlogah in upodobi dobljene vrednosti v telesu HTML. Vse spremembe lastnosti podatkov posodobijo ustrezne vrednosti v uporabniškem vmesniku.

Na primer:

<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 naslov: "Pozdravljeni",
 besedilo: "To je tvoj svet?",
 };
 },
 });
 app.mount("#app");
scenarij>

Zgornji blok kode spremeni lastnost naslova v »Zdravo". Ta sprememba se bo samodejno odražala v uporabniškem vmesniku, saj aplikacija Vue poveže lastnost naslova z elementom uporabniškega vmesnika, kot je prikazano spodaj:

Interpolacija izpiše podatke le, če sta dvojna zavita oklepaja med začetno in zapiralno oznako HTML.

Enosmerna vezava podatkov z direktivo v-bind

Tako kot interpolacija tudi enosmerna vezava podatkov poveže primerek aplikacije z uporabniškim vmesnikom. Razlika je v tem, da lastnosti, kot so podatki in metode, veže na atribute HTML.

Enosmerna vezava podatkov podpira enosmerni pretok podatkov in uporabnikom preprečuje spreminjanje, ki vpliva na lastnosti podatkov v primerku aplikacije. To je uporabno, če želite prikazati podatke uporabniku aplikacije, vendar preprečite, da bi jih uporabnik spreminjal.

V Vue lahko dosežete enosmerno vezavo podatkov z v-vezava direktiva ali njen skrajšani znak (:):

 direktivo v-bind 
<vnosvrsta="besedilo"v-bind: vrednost="besedilo">
 the: stenografski znak 
<vnosvrsta="besedilo":vrednost="besedilo">

Blok kode prikazuje uporabo direktive v-bind in njene okrajšave za vezavo vrednosti vhodne oznake HTML na lastnost besedilnih podatkov. Tukaj je primer aplikacije Vue, ki uporablja v-vezava direktiva za doseganje enosmerne vezave podatkov:

<telo>
<divid="aplikacija">
<vnosvrsta="besedilo"v-bind: vrednost="besedilo">
<str>{{ besedilo }}str>
div>
<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 besedilo: 'Vue je super!'
 }
 }
 })
 app.mount('#app')
scenarij>
telo>

Zgoraj polje za vnos in element odstavka prikazujeta vrednost besedilo premoženje. The vrednost atribut vnosnega polja je vezan na lastnost besedila z uporabo v-vezava direktiva.

Ta blok kode ustvari enosmerno vezavo, kjer se spremeni v besedilo bo posodobila vrednost vnosnega polja, vendar spremembe v vnosnem polju ne bodo posodobile besedilo lastnost v primerku aplikacije Vue.

Da to pokažemo, lahko začnemo z začetno vrednostjo besedilo lastnina,«Vue je super!":

Ko spremenite vrednost vnosnega polja v "Pozdravljen, svet!", opazite, da aplikacija Vue ni bila posodobljena in da je besedilo v oznaki odstavka ostalo enako:

Vendar, ko spremenimo vrednost besedilo premoženje do Pozdravljen, svet! v primeru aplikacije Vue namesto iz vnosnega polja se vnosno polje posodobi, da odraža novo vrednost:

Ta način vezave podatkov je priročen v scenarijih, kjer želite podatke prikazati uporabniku, vendar preprečite, da bi jih uporabnik neposredno spreminjal. Z uporabo v-bind v Vue.js lahko vzpostavite enosmerno vezavo in preprosto povežete podatke vaše aplikacije z elementi uporabniškega vmesnika.

Dvosmerna vezava podatkov z direktivo v-model

Dvosmerna vezava podatkov omogoča, da se spremembe vrednosti elementa uporabniškega vmesnika samodejno odražajo v osnovnem podatkovnem modelu in obratno. Večina front-end ogrodje JavaScript kot Angular uporablja dvosmerno vezavo za izmenjavo podatkov in obravnavo dogodkov v realnem času.

Vue.js omogoča dvosmerno vezavo z v-model direktiva. The v-model ustvari dvosmerno podatkovno vezavo med vhodnim elementom obrazca in lastnostjo podatkov. Ko vnesete v vnosni element, se vrednost samodejno posodobi v lastnosti podatkov in vse spremembe lastnosti podatkov bodo posodobile tudi vnosni element.

Tukaj je primer aplikacije Vue, ki uporablja v-model direktiva za doseganje dvosmerne vezave podatkov:

<glavo>
<naslov>Dvosmerna vezava podatkov v Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<vnosvrsta="besedilo"v-model="besedilo">
<str>{{ besedilo }}str>
div>
<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 besedilo: 'Vue je super!'
 }
 }
 })
 app.mount('#app')
scenarij>
telo>

Zgornji blok kode ima vhodni element z v-model direktivo, ki jo veže na besedilo lastnost podatkov. The besedilo lastnost je prvotno nastavljena na "Vue je super!".

Vnosno polje posodobi lastnost besedila, ko vanj vnesete, in odraža spremembe lastnosti besedila v str oznaka. Vue.js uporablja direktivo v-model in vhodni element za doseganje dvosmerne vezave podatkov.

Medtem ko v-bind omogoča enosmerno komunikacijo od aplikacije Vue do uporabniškega vmesnika, v-model zagotavlja dvosmerno komunikacijo med aplikacijo Vue in uporabniškim vmesnikom. Zaradi svoje sposobnosti omogočanja dvosmerne komunikacije, v-model se pogosto uporablja pri delu z elementi obrazca v Vue.

Razširite svoje strokovno znanje o izdelavi aplikacij Vue

Naučili ste se o vezavi podatkov v Vue, vključno z interpolacijo ter direktivama v-bind in v-model. Te podatkovne vezave so bistvene, saj služijo kot temelj aplikacij Vue.

Vue ima številne druge direktive za primere uporabe, kot so upodabljanje seznamov, vezava dogodkov in pogojno upodabljanje. Razumevanje direktiv Vue vam pomaga zgraditi dinamično in interaktivno sprednjo stran za vaše spletne aplikacije.