Lūk, kas jums jāzina par datu saistīšanu Vue

Datu saistīšana tīmekļa lietotnēs izveido saikni starp lietotnes gadījumu un lietotāja interfeisu (lietotāja saskarni). Lietojumprogrammas instance pārvalda datus, darbību un komponentus, savukārt lietotāja saskarne atspoguļo vizuālo aspektu, ar kuru lietotāji mijiedarbojas. Datu saistīšana ļauj izveidot dinamiskas tīmekļa lietotnes.

Šeit jūs izpētīsit dažādus Vue stiprinājumus, tostarp vienvirziena un divvirzienu stiprinājumus. Jūs arī iemācīsities ieviest šos saistījumus ar ūsu veidnēm un direktīvām, piemēram, v-bind un v-model.

Interpolācija Vue

Interpolācija ir viens no Vue populārākajiem datu saistīšanas veidiem. Interpolācija ļauj parādīt datu vērtības jūsu hiperteksta iezīmēšanas valodas (HTML) tagos ar ūsu veidni, ko tautā apzīmē ar dubultām krokainajām iekavām ({{ }}).

Izmantojot ūsu veidni, savā HTML kodā varat integrēt dinamisku lietotņu saturu, piemēram, datus un metodes rekvizītus. To var panākt, iekļaujot datu vai metožu rekvizītu nosaukumus no

opciju objekts Vue šajās cirtainajās lencēs.

Šeit ir piemērs Vue lietotnei, kas izmanto ūsu veidni, lai panāktu interpolāciju Vue:

<ķermeni>
<divid="lietotne">
<h1>{{nosaukums }}h1>
<lpp>{{ text.toUpperCase() }}lpp>
div>
<skripts>
 const app = Vue.createApp({
 dati() {
 return {
 nosaukums: "Laipni lūdzam",
 teksts: "Šī ir jūsu pasaule?",
 };
 },
 });
 app.mount("#app");
skripts>
ķermeni>

Iepriekš minētajā koda blokā tiek izmantota ūsu veidne, lai parādītu nosaukuma rekvizīta vērtību Vue lietotnes datu objektā. Varat arī parādīt JavaScript izteiksmes rezultātus ar interpolāciju. Piemēram, {{text.toUpperCase()}} izteiksme lpp tags parāda teksta vērtības lielo burtu versiju, kā parādīts tālāk esošajā attēlā:

Kad pievienojat Vue lietotni, Vue novērtē izteiksmes veidnēs un atveido iegūtās vērtības HTML pamattekstā. Jebkādas izmaiņas datu rekvizītos atjaunina atbilstošās vērtības lietotāja saskarnē.

Piemēram:

<skripts>
 const app = Vue.createApp({
 dati() {
 return {
 nosaukums: "Sveiki",
 teksts: "Šī ir jūsu pasaule?",
 };
 },
 });
 app.mount("#app");
skripts>

Iepriekš minētais koda bloks maina nosaukuma rekvizītu uz “Sveiki". Šīs izmaiņas automātiski tiks atspoguļotas lietotāja saskarnē, jo lietotne Vue saista nosaukuma rekvizītu ar lietotāja interfeisa elementu, kā parādīts tālāk.

Interpolācija izvada datus tikai tad, ja dubultās cirtainās iekavas atrodas starp HTML tagu atvēršanu un aizvēršanu.

Vienvirziena datu saistīšana ar v-saistīšanas direktīvu

Tāpat kā interpolācija, vienvirziena datu saistīšana saista lietotnes gadījumu ar lietotāja interfeisu. Atšķirība ir tāda, ka tā saista rekvizītus, piemēram, datus un metodes, ar HTML atribūtiem.

Vienvirziena datu saistīšana atbalsta vienvirziena datu plūsmu, neļaujot lietotājiem veikt izmaiņas, kas ietekmē datu rekvizītus lietotnes instancē. Tas ir noderīgi, ja vēlaties parādīt datus lietotnes lietotājam, bet neļaujat lietotājam tos mainīt.

Varat sasniegt vienvirziena datu saistīšanu Vue, izmantojot v-saiste direktīva vai tās saīsinājums (:):

 v-bind direktīva 
<ievadeveids="teksts"v-bind: vērtība="teksts">
 īsraksts 
<ievadeveids="teksts":vērtība="teksts">

Koda bloks parāda v-bind direktīvas un tās saīsinājuma lietojumu, lai saistītu ievades HTML taga vērtību ar teksta datu rekvizītu. Šeit ir Vue lietotnes piemērs, kas izmanto v-saiste direktīva, lai panāktu vienvirziena datu saistīšanu:

<ķermeni>
<divid="lietotne">
<ievadeveids="teksts"v-bind: vērtība="teksts">
<lpp>{{ teksts }}lpp>
div>
<skripts>
 const app = Vue.createApp({
 dati() {
 return {
 teksts: 'Vue ir superīgs!'
 }
 }
 })
 app.mount('#app')
skripts>
ķermeni>

Augšpusē ievades laukā un rindkopas elementā tiek parādīta vērtība tekstu īpašums. The vērtību ievades lauka atribūts ir saistīts ar teksta rekvizītu, izmantojot v-saiste direktīva.

Šis koda bloks izveido vienvirziena saistīšanu, kurā tiek veiktas izmaiņas uz tekstu rekvizīts atjauninās ievades lauka vērtību, bet ievades laukā veiktās izmaiņas neatjauninās tekstu īpašums Vue lietotnes instancē.

Lai to parādītu, mēs varam sākt ar sākotnējo vērtību tekstu īpašums, "Vue ir lieliski!:

Pēc ievades lauka vērtības maiņas uz “Sveika pasaule!", ievērojiet, ka lietotne Vue netika atjaunināta un teksts rindkopas tagā palika nemainīgs:

Tomēr, mainot vērtību tekstu īpašumu uz Sveika pasaule! Vue lietotnes instancē, nevis ievades laukā, ievades lauks tiek atjaunināts, lai atspoguļotu jauno vērtību:

Šis datu saistīšanas veids ir ērts gadījumos, kad vēlaties rādīt datus lietotājam, bet neļaujat lietotājam tos tieši mainīt. Izmantojot v-bind pakalpojumā Vue.js, varat izveidot vienvirziena saistīšanu, viegli savienojot savas lietotnes datus ar lietotāja interfeisa elementiem.

Divvirzienu datu saistīšana ar v-modeļa direktīvu

Divvirzienu datu saistīšana ļauj lietotāja interfeisa elementa vērtības izmaiņas automātiski atspoguļot pamatā esošajā datu modelī un otrādi. Lielākā daļa priekšgala JavaScript ietvari patīk Leņķiskais izmanto divvirzienu iesiešanu koplietot datus un apstrādāt reāllaika notikumus.

Vue.js padara iespējamu divvirzienu saistīšanu ar v-modelis direktīva. The v-modelis direktīva izveido divvirzienu datu saistīšanu starp formas ievades elementu un datu rekvizītu. Ievadot ievades elementu, vērtība tiek automātiski atjaunināta datu rekvizītā, un visas datu rekvizīta izmaiņas atjauninās arī ievades elementu.

Šeit ir Vue lietotnes piemērs, kas izmanto v-modelis direktīva, lai panāktu divvirzienu datu saistīšanu:

<galvu>
<virsraksts>Divvirzienu datu saistīšana Vuevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<ievadeveids="teksts"v-modelis="teksts">
<lpp>{{ teksts }}lpp>
div>
<skripts>
 const app = Vue.createApp({
 dati() {
 return {
 teksts: 'Vue ir superīgs!'
 }
 }
 })
 app.mount('#app')
skripts>
ķermeni>

Iepriekš minētajā koda blokā ir ievades elements ar v-modelis direktīva ir saistoša tekstu datu īpašums. The tekstu rekvizīts sākotnēji ir iestatīts uz "Vue ir lieliski!".

Ievades lauks atjaunina teksta rekvizītu, kad tajā rakstāt, un atspoguļo izmaiņas teksta rekvizītā laukā lpp tagu. Vue.js izmanto v-model direktīvu un ievades elementu, lai panāktu divvirzienu datu saistīšanu.

Kamēr v-bind nodrošina vienvirziena saziņu no Vue lietotnes uz lietotāja interfeisu, v-modelis nodrošina divvirzienu saziņu starp Vue lietotni un lietotāja interfeisu. Pateicoties spējai iespējot divvirzienu saziņu, v-modelis tiek bieži izmantots, strādājot ar veidlapas elementiem Vue.

Paplašiniet savas zināšanas Vue lietotņu veidošanā

Jūs uzzinājāt par datu saistīšanu Vue, tostarp par interpolāciju un v-bind un v-model direktīvām. Šīs datu piesaistes ir būtiskas, jo tās kalpo kā Vue lietotņu pamats.

Vue ir daudz citu direktīvu lietošanas gadījumiem, piemēram, sarakstu renderēšana, notikumu saistīšana un nosacījuma renderēšana. Vue direktīvu izpratne palīdz izveidot dinamisku un interaktīvu priekšgalu jūsu tīmekļa lietojumprogrammām.