Štai ką reikia žinoti apie duomenų įrišimą Vue

Duomenų susiejimas žiniatinklio programose sukuria ryšį tarp programos egzemplioriaus ir vartotojo sąsajos (naudotojo sąsajos). Programos egzempliorius valdo duomenis, elgseną ir komponentus, o vartotojo sąsaja atspindi vizualinį aspektą, su kuriuo sąveikauja vartotojai. Duomenų susiejimas leidžia kurti dinamines žiniatinklio programas.

Čia tyrinėsite įvairius Vue apkaustus, įskaitant vienpusius ir dvipusius apkaustus. Taip pat išmoksite įdiegti šiuos įrišimus naudodami ūsų šablonus ir direktyvas, tokias kaip v-bind ir v-modelis.

Interpoliacija Vue

Interpoliacija yra vienas iš populiariausių Vue duomenų susiejimo tipų. Interpoliacija leidžia rodyti duomenų reikšmes hiperteksto žymėjimo kalbos (HTML) žymose naudojant ūsų šabloną, liaudiškai žymimą dvigubais riestiniais skliaustais ({{ }}).

Naudodami ūsų šabloną galite integruoti dinaminį programos turinį, pvz., duomenis ir metodų ypatybes, į savo HTML. Tai galite pasiekti įtraukdami duomenų arba metodų ypatybių pavadinimus iš

parinkčių objektas Vue šiose garbanotose petnešose.

Štai „Vue“ programos pavyzdys, kuriame naudojamas ūsų šablonas, kad būtų galima interpoliuoti „Vue“:

<kūnas>
<divid="programėlė">
<h1>{{ pavadinimas }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 pavadinimas: "Sveiki atvykę",
 tekstas: "Tai tavo pasaulis?",
 };
 },
 });
 app.mount("#programa");
scenarijus>
kūnas>

Aukščiau pateiktame kodo bloke naudojamas ūsų šablonas, kad būtų rodoma pavadinimo ypatybės reikšmė Vue programos duomenų objekte. Taip pat galite rodyti „JavaScript“ išraiškos rezultatus naudodami interpoliaciją. Pavyzdžiui, {{text.toUpperCase()}} išraiška p žyma rodo didžiųjų raidžių teksto vertės versiją, kaip parodyta toliau pateiktame paveikslėlyje:

Kai prijungiate „Vue“ programą, „Vue“ įvertina išraiškas šablonuose ir gautas reikšmes pateikia HTML tekste. Bet kokie duomenų ypatybių pakeitimai atnaujina atitinkamas NS reikšmes.

Pavyzdžiui:

<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 pavadinimas: "Sveiki",
 tekstas: "Tai tavo pasaulis?",
 };
 },
 });
 app.mount("#programa");
scenarijus>

Aukščiau pateiktas kodo blokas pakeičia pavadinimo ypatybę į "Sveiki". Šis pakeitimas automatiškai atsispindės vartotojo sąsajoje, nes programa „Vue“ pavadinimo ypatybę susieja su vartotojo sąsajos elementu, kaip parodyta toliau:

Interpoliacija išveda duomenis tik tada, kai dvigubi garbanoti skliaustai yra tarp atidarymo ir uždarymo HTML žymų.

Vienpusis duomenų susiejimas su v-bind direktyva

Kaip ir interpoliacija, vienpusis duomenų susiejimas susieja programos egzempliorių su vartotojo sąsaja. Skirtumas tas, kad jis susieja tokias savybes kaip duomenys ir metodai su HTML atributais.

Vienpusis duomenų susiejimas palaiko vienakryptį duomenų srautą, neleidžiant vartotojams atlikti pakeitimų, turinčių įtakos duomenų ypatybėms programos egzemplioriuje. Tai naudinga, kai norite rodyti duomenis programos vartotojui, bet neleisti vartotojui jų keisti.

Vienpusį duomenų susiejimą Vue galite pasiekti naudodami v-bind direktyva arba jos trumpinys (:):

 v-bind direktyvą 
<įvestistipo="tekstas"v-bind: vertė="tekstas">
: trumpasis simbolis 
<įvestistipo="tekstas":vertė="tekstas">

Kodo blokas rodo, kaip naudojama v-bind direktyva ir jos trumpinys, siekiant susieti įvesties HTML žymos vertę su teksto duomenų ypatybe. Štai „Vue“ programos, kurioje naudojama v-bind direktyvą, kad būtų pasiektas vienpusis duomenų susiejimas:

<kūnas>
<divid="programėlė">
<įvestistipo="tekstas"v-bind: vertė="tekstas">
<p>{{ tekstas }}p>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 tekstas: 'Vue yra nuostabus!'
 }
 }
 })
 app.mount('#app')
scenarijus>
kūnas>

Aukščiau esančiame įvesties lauke ir pastraipos elemente rodoma reikšmė tekstą nuosavybė. The vertė įvesties lauko atributas yra susietas su teksto ypatybe naudojant v-bind direktyva.

Šis kodo blokas sukuria vienpusį susiejimą, kuriame keičiasi į tekstą ypatybė atnaujins įvesties lauko reikšmę, tačiau įvesties lauke atlikti pakeitimai neatnaujins tekstą nuosavybė Vue programos egzemplioriuje.

Norėdami tai parodyti, galime pradėti nuo pradinės vertės tekstą nuosavybė, "Vue yra nuostabus!:

Pakeitus įvesties lauko reikšmę į „Labas pasauli!", atkreipkite dėmesį, kad „Vue“ programa nebuvo atnaujinta, o tekstas pastraipos žymoje liko toks pat:

Tačiau kai keičiame vertę tekstą nuosavybė į Labas pasauli! „Vue“ programos egzemplioriuje, o ne iš įvesties lauko, įvesties laukas atnaujinamas, kad atspindėtų naują vertę:

Šis duomenų susiejimo būdas yra patogus tais atvejais, kai norite rodyti duomenis vartotojui, bet neleisti vartotojui jų tiesiogiai keisti. Naudodami v-bind Vue.js galite sukurti vienpusį susiejimą, lengvai susiedami programos duomenis su vartotojo sąsajos elementais.

Dvipusis duomenų susiejimas su v modelio direktyva

Dvipusis duomenų susiejimas leidžia UI elemento vertės pakeitimus automatiškai atspindėti pagrindiniame duomenų modelyje ir atvirkščiai. Dauguma priekinės dalies JavaScript karkasai Kaip Kampinis naudoti dvipusis surišimas dalytis duomenimis ir tvarkyti įvykius realiuoju laiku.

Vue.js leidžia abipusiai susieti su v-modelis direktyva. The v-modelis direktyva sukuria dvipusį duomenų susiejimą tarp formos įvesties elemento ir duomenų ypatybės. Kai įvedate įvesties elementą, vertė automatiškai atnaujinama duomenų ypatybėje, o bet kokie duomenų ypatybės pakeitimai taip pat atnaujins įvesties elementą.

Štai „Vue“ programos, kuri naudoja v-modelis direktyvą, kad būtų pasiektas dvipusis duomenų susiejimas:

<galva>
<titulą>Dvipusis duomenų susiejimas Vuetitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<įvestistipo="tekstas"v-modelis="tekstas">
<p>{{ tekstas }}p>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 tekstas: 'Vue yra nuostabus!'
 }
 }
 })
 app.mount('#app')
scenarijus>
kūnas>

Aukščiau pateiktame kodo bloke yra įvesties elementas su v-modelis direktyva, kuri ją įpareigoja tekstą duomenų nuosavybė. The tekstą nuosavybė iš pradžių nustatyta į "Vue yra nuostabus!".

Įvesties laukas atnaujina teksto ypatybę, kai įvesite jį, ir atspindi teksto ypatybės pakeitimus p žyma. Vue.js naudoja v-model direktyvą ir įvesties elementą, kad pasiektų dvipusį duomenų susiejimą.

Nors „v-bind“ leidžia viena kryptimi palaikyti ryšį iš „Vue“ programos į vartotojo sąsają, „v-modelis“ užtikrina dvikryptį ryšį tarp „Vue“ programos ir vartotojo sąsajos. Dėl savo galimybės įgalinti dvikryptį ryšį, v-modelis dažnai naudojamas dirbant su formos elementais Vue.

Išplėskite savo Vue programų kūrimo patirtį

Sužinojote apie duomenų susiejimą Vue, įskaitant interpoliaciją ir v-bind bei v-model direktyvas. Šie duomenų surišimai yra būtini, nes jie yra „Vue“ programų pagrindas.

„Vue“ turi daug kitų naudojimo atvejų direktyvų, tokių kaip sąrašo atvaizdavimas, įvykių susiejimas ir sąlyginis atvaizdavimas. „Vue“ direktyvų supratimas padės sukurti dinamišką ir interaktyvią žiniatinklio programų sąsają.