Evo što trebate znati o povezivanju podataka u Vueu

Povezivanje podataka u web aplikacijama stvara vezu između instance aplikacije i korisničkog sučelja (korisničkog sučelja). Instanca aplikacije upravlja podacima, ponašanjem i komponentama, dok korisničko sučelje predstavlja vizualni aspekt s kojim korisnici komuniciraju. Povezivanje podataka omogućuje vam stvaranje dinamičkih web-aplikacija.

Ovdje ćete istražiti razna vezivanja u Vueu, uključujući jednosmjerna i dvosmjerna vezivanja. Također ćete naučiti implementirati ova povezivanja s predlošcima brkova i direktivama kao što su v-bind i v-model.

Interpolacija u Vue

Interpolacija je jedna od Vue najpopularnijih vrsta povezivanja podataka. Interpolacija vam omogućuje prikaz vrijednosti podataka u vašim Hyper Text Markup Language (HTML) oznakama s predloškom brkova, koji se popularno označava dvostrukim vitičastim zagradama ({{ }}).

S predloškom brkova možete integrirati dinamički sadržaj aplikacije kao što su podaci i svojstva metode u svoj HTML. To možete postići dodavanjem imena svojstava podataka ili metode iz

objekt opcija u Vueu unutar ovih vitičastih zagrada.

Evo primjera aplikacije Vue koja koristi predložak brkova za postizanje interpolacije u Vue:

<tijelo>
<diviskaznica="aplikacija">
<h1>{{ naslov }}h1>
<str>{{ text.toUpperCase() }}str>
div>
<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 naslov: "Dobro došli",
 tekst: "Ovo je tvoj svijet?",
 };
 },
 });
 app.mount("#app");
skripta>
tijelo>

Gornji blok koda koristi predložak brkova za prikaz vrijednosti svojstva naslova u podatkovnom objektu aplikacije Vue. Također možete prikazati rezultate JavaScript izraza s interpolacijom. Na primjer, {{text.toUpperCase()}} izraz u str prikazuje verziju tekstualne vrijednosti velikim slovima, kao što je prikazano na slici ispod:

Kada montirate Vue aplikaciju, Vue procjenjuje izraze u predlošcima i prikazuje dobivene vrijednosti u HTML tijelu. Sve promjene svojstava podataka ažuriraju odgovarajuće vrijednosti u korisničkom sučelju.

Na primjer:

<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 naslov: "Pozdrav",
 tekst: "Ovo je tvoj svijet?",
 };
 },
 });
 app.mount("#app");
skripta>

Gornji blok koda mijenja svojstvo naslova u "Zdravo". Ova će se promjena automatski odraziti na korisničko sučelje budući da aplikacija Vue povezuje svojstvo naslova s ​​elementom korisničkog sučelja, kao što je prikazano u nastavku:

Interpolacija daje podatke samo kada su dvostruke vitičaste zagrade između otvarajućih i zatvarajućih HTML oznaka.

Jednosmjerno povezivanje podataka s v-bind direktivom

Poput interpolacije, jednosmjerno povezivanje podataka povezuje instancu aplikacije s korisničkim sučeljem. Razlika je u tome što povezuje svojstva poput podataka i metoda s HTML atributima.

Jednosmjerno povezivanje podataka podržava jednosmjerni tok podataka, sprječavajući korisnike da naprave promjene koje utječu na svojstva podataka na instanci aplikacije. Ovo je korisno kada želite prikazati podatke korisniku aplikacije, ali spriječiti korisnika da ih mijenja.

Možete postići jednosmjerno povezivanje podataka u Vueu s v-vezivanje direktiva ili njezin skraćeni znak (:):

 v-bind direktiva 
<ulaznitip="tekst"v-bind: vrijednost="tekst">
 the: stenografski znak 
<ulaznitip="tekst":vrijednost="tekst">

Blok koda pokazuje upotrebu v-bind direktive i njezine skraćenice za vezanje vrijednosti ulazne HTML oznake za svojstvo tekstualnih podataka. Evo primjera aplikacije Vue koja koristi v-vezivanje direktiva za postizanje jednosmjernog povezivanja podataka:

<tijelo>
<diviskaznica="aplikacija">
<ulaznitip="tekst"v-bind: vrijednost="tekst">
<str>{{ tekst }}str>
div>
<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 tekst: 'Vue je super!'
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>

Iznad, polje za unos i element odlomka prikazuju vrijednost tekst vlasništvo. The vrijednost atribut polja za unos vezan je za svojstvo teksta pomoću v-vezivanje direktiva.

Ovaj blok koda stvara jednosmjerno vezanje, gdje se mijenja u tekst svojstvo će ažurirati vrijednost polja za unos, ali promjene napravljene u polju za unos neće ažurirati tekst svojstvo u instanci aplikacije Vue.

Da bismo to pokazali, možemo početi s početnom vrijednošću tekst vlasništvo,"Vue je super!":

Nakon promjene vrijednosti polja za unos u "Pozdrav svijete!", primijetite da aplikacija Vue nije ažurirana, a tekst u oznaci odlomka ostao je isti:

Međutim, kada promijenimo vrijednost tekst vlasništvo na Pozdrav svijete! u instanci aplikacije Vue umjesto iz polja za unos, polje za unos se ažurira kako bi odražavalo novu vrijednost:

Ovaj način povezivanja podataka zgodan je u scenarijima u kojima želite prikazati podatke korisniku, ali spriječiti korisnika da ih izravno mijenja. Koristeći v-bind u Vue.js, možete uspostaviti jednosmjerno povezivanje, jednostavno povezujući podatke svoje aplikacije s elementima korisničkog sučelja.

Dvosmjerno povezivanje podataka s v-model direktivom

Dvosmjerno povezivanje podataka omogućuje da se promjene vrijednosti elementa korisničkog sučelja automatski odražavaju u temeljnom podatkovnom modelu i obrnuto. Većina front-end JavaScript okviri Kao Angular koristi dvosmjerno uvezivanje za dijeljenje podataka i rukovanje događajima u stvarnom vremenu.

Vue.js omogućuje dvosmjerno uvezivanje s v-model direktiva. The v-model direktiva stvara dvosmjerno povezivanje podataka između ulaznog elementa obrasca i svojstva podataka. Kada upišete u ulazni element, vrijednost se automatski ažurira u svojstvu podataka, a sve promjene u svojstvu podataka također će ažurirati ulazni element.

Evo primjera aplikacije Vue koja koristi v-model direktiva za postizanje dvosmjernog povezivanja podataka:

<glava>
<titula>Dvosmjerno povezivanje podataka u Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<ulaznitip="tekst"v-model="tekst">
<str>{{ tekst }}str>
div>
<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 tekst: 'Vue je super!'
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>

Gornji blok koda ima ulazni element s v-model direktiva koja ga obvezuje na tekst svojstvo podataka. The tekst svojstvo je inicijalno postavljeno na "Vue je super!".

Polje za unos ažurira svojstvo teksta kada upišete u njega i odražava promjene svojstva teksta u str označiti. Vue.js koristi direktivu v-model i ulazni element za postizanje dvosmjernog povezivanja podataka.

Dok v-bind omogućuje jednosmjernu komunikaciju od aplikacije Vue do korisničkog sučelja, v-model omogućuje dvosmjernu komunikaciju između aplikacije Vue i korisničkog sučelja. Zbog svoje sposobnosti da omogući dvosmjernu komunikaciju, v-model često se koristi pri radu s elementima obrasca u Vueu.

Proširite svoju stručnost u izradi Vue aplikacija

Naučili ste o povezivanju podataka u Vueu, uključujući interpolaciju i direktive v-bind i v-model. Ova povezivanja podataka bitna su jer služe kao temelj Vue aplikacija.

Vue ima mnoge druge direktive za slučajeve upotrebe, kao što je renderiranje popisa, vezivanje događaja i uvjetno renderiranje. Razumijevanje Vue direktiva pomaže vam u izgradnji dinamičnog i interaktivnog sučelja za vaše web aplikacije.