Siin on, mida peate Vue andmete sidumise kohta teadma

Andmete sidumine veebirakendustes loob lingi rakenduse eksemplari ja kasutajaliidese (kasutajaliidese) vahel. Rakenduse eksemplar haldab andmeid, käitumist ja komponente, samas kui kasutajaliides esindab visuaalset aspekti, millega kasutajad suhtlevad. Andmete sidumine võimaldab teil luua dünaamilisi veebirakendusi.

Siin saate uurida erinevaid Vue köiteid, sealhulgas ühe- ja kahesuunalisi köiteid. Samuti õpite neid sidumisi rakendama vuntside mallide ja direktiividega, nagu v-bind ja v-modell.

Interpolatsioon Vue keeles

Interpolatsioon on Vue üks populaarsemaid andmete sidumise tüüpe. Interpoleerimine võimaldab teil kuvada andmeväärtusi oma hüperteksti märgistuskeele (HTML) siltides vuntside malliga, mida rahvasuus tähistatakse kahekordsete lokkis sulgudega ({{ }}).

Vuntsimalli abil saate oma HTML-i integreerida dünaamilise rakenduse sisu, nagu andmed ja meetodi atribuudid. Saate seda saavutada, lisades andmete või meetodi atribuutide nimed

suvandite objekt Vue's nende lokkis trakside sees.

Siin on näide Vue rakendusest, mis kasutab Vue interpoleerimiseks vuntside malli:

<keha>
<divid="rakendus">
<h1>{{ pealkiri }}h1>
<lk>{{ text.toUpperCase() }}lk>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed() {
 return {
 pealkiri: "Tere tulemast",
 tekst: "See on sinu maailm?",
 };
 },
 });
 app.mount("#app");
stsenaarium>
keha>

Ülaltoodud koodiplokk kasutab Vue rakenduse andmeobjektis pealkirja atribuudi väärtuse kuvamiseks vuntside malli. JavaScripti avaldiste tulemusi saate kuvada ka interpolatsiooniga. Näiteks {{text.toUpperCase()}} väljendus lk silt kuvab tekstiväärtuse suurtähtedega versiooni, nagu on näidatud alloleval pildil:

Kui ühendate Vue rakenduse, hindab Vue mallides olevaid väljendeid ja renderdab saadud väärtused HTML-i kehas. Kõik andmeatribuutide muudatused värskendavad kasutajaliidese vastavaid väärtusi.

Näiteks:

<stsenaarium>
 const app = Vue.createApp({
 andmed() {
 return {
 pealkiri: "Tere",
 tekst: "See on sinu maailm?",
 };
 },
 });
 app.mount("#app");
stsenaarium>

Ülaltoodud koodiplokk muudab pealkirja atribuudiks "Tere". See muudatus kajastub kasutajaliideses automaatselt, kuna Vue rakendus seob pealkirja atribuudi kasutajaliidese elemendiga, nagu allpool näidatud.

Interpoleerimine väljastab andmeid ainult siis, kui topeltsulud on HTML-i avamise ja sulgemise vahel.

Ühesuunaline andmete sidumine V-sidumise direktiiviga

Sarnaselt interpolatsiooniga seob ühesuunaline andmete sidumine rakenduse eksemplari kasutajaliidesega. Erinevus seisneb selles, et see seob atribuudid, nagu andmed ja meetodid, HTML-i atribuutidega.

Ühesuunaline andmete sidumine toetab ühesuunalist andmevoogu, takistades kasutajatel teha muudatusi, mis mõjutavad andmeatribuute rakenduse eksemplaris. See on kasulik, kui soovite kuvada andmeid rakenduse kasutajale, kuid takistada kasutajal neid muuta.

Saate Vue's saavutada ühesuunalise andmete sidumise rakendusega v-side käskkiri või selle stenogramm (:):

 v-bind direktiiv 
<sisendtüüp="tekst"v-bind: väärtus="tekst">
: stenogramm 
<sisendtüüp="tekst":väärtus="tekst">

Koodiplokk näitab v-bind direktiivi ja selle stenogrammi kasutamist sisend-HTML-märgendi väärtuse sidumiseks tekstiandmete atribuudiga. Siin on näide Vue rakendusest, mis kasutab v-side direktiiv andmete ühesuunalise sidumise saavutamiseks:

<keha>
<divid="rakendus">
<sisendtüüp="tekst"v-bind: väärtus="tekst">
<lk>{{ tekst }}lk>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed() {
 return {
 tekst: 'Vue on äge!'
 }
 }
 })
 app.mount('#app')
stsenaarium>
keha>

Ülal kuvatakse sisestusväljal ja lõiguelemendil parameetri väärtus tekst vara. The väärtus Sisestusvälja atribuut on seotud teksti atribuudiga, kasutades v-side direktiiv.

See koodiplokk loob ühesuunalise sidumise, kus muutub tekst atribuut värskendab sisestusvälja väärtust, kuid sisestusväljal tehtud muudatusi ei värskendata tekst atribuut Vue rakenduse eksemplaris.

Selle näitamiseks võime alustada algväärtusest tekst vara, "Vue on suurepärane! ”:

Pärast sisestusvälja väärtuse muutmist väärtuseks "Tere, Maailm!", pange tähele, et Vue rakendust ei värskendatud ja lõigu märgendi tekst jäi samaks:

Kui aga muudame väärtust tekst vara juurde Tere, Maailm! Vue rakenduse eksemplaris sisendvälja asemel värskendatakse sisestusvälja, et kajastada uut väärtust:

See andmete sidumise viis on mugav stsenaariumide puhul, kus soovite andmeid kasutajale kuvada, kuid takistate kasutajal neid otse muutmast. V-bind Vue.js-is kasutades saate luua ühesuunalise sidumise, mis ühendab rakenduse andmed hõlpsalt kasutajaliidese elementidega.

Kahesuunaline andmete sidumine V-mudeli direktiiviga

Kahesuunaline andmete sidumine võimaldab kasutajaliidese elemendi väärtuse muudatusi automaatselt kajastada aluseks olevas andmemudelis ja vastupidi. Enamik esiotsa JavaScripti raamistikud meeldib Nurgeline kasutada kahesuunalist sidumist andmete jagamiseks ja reaalajas sündmuste käsitlemiseks.

Vue.js teeb kahesuunalise sidumise võimalikuks rakendusega v-mudel direktiiv. The v-mudel direktiiv loob kahesuunalise andmete sidumise vormi sisendelemendi ja andmeatribuudi vahel. Kui sisestate sisendelemendi, värskendatakse väärtust andmeatribuudis automaatselt ja kõik andmeatribuudi muudatused värskendavad ka sisendelementi.

Siin on näide Vue rakendusest, mis kasutab v-mudel direktiiv kahesuunalise andmete sidumise saavutamiseks:

<pea>
<pealkiri>Kahesuunaline andmete sidumine Vue-spealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<sisendtüüp="tekst"v-mudel="tekst">
<lk>{{ tekst }}lk>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed() {
 return {
 tekst: 'Vue on äge!'
 }
 }
 })
 app.mount('#app')
stsenaarium>
keha>

Ülaltoodud koodiplokil on sisendelement koos v-mudel direktiiv sidub selle tekst andmete omadus. The tekst atribuut on algselt seatud "Vue on suurepärane!".

Sisestusväli värskendab teksti atribuuti, kui sellele sisestate, ja kajastab teksti atribuudi muudatusi lk tag. Vue.js kasutab kahesuunalise andmete sidumise saavutamiseks v-mudeli direktiivi ja sisendelementi.

Kui v-bind võimaldab ühesuunalist suhtlust Vue rakendusest kasutajaliidese vahel, siis v-mudel pakub kahesuunalist suhtlust Vue rakenduse ja kasutajaliidese vahel. Tänu oma võimele võimaldada kahesuunalist suhtlust, v-mudel kasutatakse sageli Vue vormielementidega töötamisel.

Laiendage oma teadmisi Vue rakenduste loomisel

Õppisite Vue andmete sidumise kohta, sealhulgas interpoleerimise ning v-bind ja v-mudeli direktiivide kohta. Need andmete sidumised on olulised, kuna need on Vue rakenduste aluseks.

Vue-l on kasutusjuhtude jaoks palju muid juhiseid, näiteks loendi renderdamine, sündmuste sidumine ja tingimuslik renderdamine. Vue direktiivide mõistmine aitab teil luua oma veebirakendustele dünaamilise ja interaktiivse kasutajaliidese.