Opi käyttämään tietojen sidontaa Vuessa interpolaatio-, v-bind- ja v-malliohjeiden kanssa.

Tietojen sitominen verkkosovelluksissa luo linkin sovelluksen esiintymän ja käyttöliittymän (käyttöliittymän) välille. Sovelluksen esiintymä hallitsee tietoja, käyttäytymistä ja komponentteja, kun taas käyttöliittymä edustaa visuaalista näkökulmaa, jonka kanssa käyttäjät ovat vuorovaikutuksessa. Tietojen sitomisen avulla voit luoda dynaamisia verkkosovelluksia.

Täällä voit tutkia erilaisia ​​​​sidoksia Vuessa, mukaan lukien yksisuuntaiset ja kaksisuuntaiset siteet. Opit myös toteuttamaan nämä sidokset viiksimalleilla ja ohjeilla, kuten v-bind ja v-malli.

Interpolointi Vuessa

Interpolointi on yksi Vuen suosituimmista tiedonsidontatyypeistä. Interpoloinnin avulla voit näyttää data-arvoja HTML (Hyper Text Markup Language) -tageissasi viiksimallilla, jota kutsutaan yleisesti kaksoiskiharoilla aaltosulkeilla ({{ }}).

Viikset-mallin avulla voit integroida dynaamista sovellussisältöä, kuten dataa ja menetelmän ominaisuuksia, HTML-koodiisi. Voit saavuttaa tämän liittämällä mukaan datan tai menetelmän ominaisuuksien nimet

instagram viewer
vaihtoehtoobjekti Vuessa näiden kiharaisten olkaimet.

Tässä on esimerkki Vue-sovelluksesta, joka käyttää viiksimallia interpoloinnin saavuttamiseksi Vuessa:

<kehon>
<divid="sovellus">
<h1>{{ otsikko }}h1>
<s>{{ text.toUpperCase() }}s>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 data() {
 return {
 otsikko: "Tervetuloa",
 teksti: "Tämä on sinun maailmasi?",
 };
 },
 });
 app.mount("#app");
käsikirjoitus>
kehon>

Yllä oleva koodilohko käyttää viiksimallia otsikkoominaisuuden arvon näyttämiseen Vue-sovelluksen tietoobjektissa. Voit myös näyttää JavaScript-lausekkeen tulokset interpoloinnilla. Esimerkiksi, {{text.toUpperCase()}} ilmaisu s -tunniste näyttää tekstiarvon isoilla kirjaimilla, kuten alla olevassa kuvassa näkyy:

Kun asennat Vue-sovelluksen, Vue arvioi lausekkeet malleissa ja renderöi tuloksena saadut arvot HTML-tekstiin. Kaikki muutokset dataominaisuuksiin päivittävät vastaavat arvot käyttöliittymässä.

Esimerkiksi:

<käsikirjoitus>
 const app = Vue.createApp({
 data() {
 return {
 otsikko: "Hei",
 teksti: "Tämä on sinun maailmasi?",
 };
 },
 });
 app.mount("#app");
käsikirjoitus>

Yllä oleva koodilohko muuttaa otsikkoominaisuuden muotoon "Hei". Tämä muutos näkyy automaattisesti käyttöliittymässä, koska Vue-sovellus sitoo otsikkoominaisuuden käyttöliittymäelementtiin alla olevan kuvan mukaisesti:

Interpolointi tulostaa dataa vain, kun kaksinkertaiset kiharat hakasulkeet ovat avaavan ja sulkevan HTML-tunnisteen välissä.

One Way Data Binding v-bind -direktiivin kanssa

Kuten interpolaatio, yksisuuntainen tiedonsidonta linkittää sovelluksen ilmentymän käyttöliittymään. Erona on, että se sitoo ominaisuuksia, kuten dataa ja menetelmiä, HTML-attribuutteihin.

Yksisuuntainen tietojen sidonta tukee yksisuuntaista tiedonkulkua, mikä estää käyttäjiä tekemästä muutoksia, jotka vaikuttavat sovelluksen esiintymän tietoominaisuuksiin. Tästä on hyötyä, kun haluat näyttää tietoja sovelluksen käyttäjälle, mutta estää käyttäjää muokkaamasta niitä.

Voit saavuttaa yksisuuntaisen tiedonsidon Vuessa käyttämällä v-sidos direktiivi tai sen lyhenne (:):

 v-bind -direktiivi 
<syöttötyyppi="teksti"v-bind: arvo="teksti">
 sana: pikakirjamerkki 
<syöttötyyppi="teksti":arvo="teksti">

Koodilohko näyttää v-bind-direktiivin ja sen lyhenteen käytön syötetyn HTML-tunnisteen arvon sitomiseksi tekstidata-ominaisuuteen. Tässä on esimerkki Vue-sovelluksesta, joka käyttää v-sidos direktiivi yksisuuntaisen tiedon sitomisen saavuttamiseksi:

<kehon>
<divid="sovellus">
<syöttötyyppi="teksti"v-bind: arvo="teksti">
<s>{{ teksti }}s>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 data() {
 return {
 teksti: 'Vue on mahtavaa!'
 }
 }
 })
 app.mount('#app')
käsikirjoitus>
kehon>

Yllä syöttökenttä ja kappaleelementti näyttävät arvon teksti omaisuutta. The arvo syöttökentän attribuutti on sidottu tekstiominaisuuteen käyttämällä v-sidos direktiivi.

Tämä koodilohko luo yksisuuntaisen sidoksen, jossa muuttuu teksti ominaisuus päivittää syöttökentän arvon, mutta syöttökenttään tehdyt muutokset eivät päivitä teksti omaisuutta Vue-sovelluksen ilmentymässä.

Tämän osoittamiseksi voimme aloittaa arvon alkuarvolla teksti omaisuutta, "Vue on mahtava!”:

Kun olet muuttanut syöttökentän arvoksi "Hei maailma!", huomaa, että Vue-sovellusta ei päivitetty ja kappaletunnisteen teksti pysyi samana:

Kuitenkin, kun muutamme arvoa teksti omaisuutta Hei maailma! Vue-sovellusesiintymässä syöttökentän sijaan syöttökenttä päivitetään vastaamaan uutta arvoa:

Tämä tapa sitoa tietoja on kätevä tilanteissa, joissa haluat näyttää tiedot käyttäjälle, mutta estää käyttäjää muokkaamasta niitä suoraan. Hyödyntämällä v-bindiä Vue.js: ssa voit luoda yksisuuntaisen sidoksen, joka yhdistää sovelluksesi tiedot helposti käyttöliittymäelementteihin.

Kaksisuuntainen tietojen sidonta v-mallidirektiivin kanssa

Kaksisuuntainen tietojen sidonta mahdollistaa sen, että käyttöliittymäelementin arvon muutokset näkyvät automaattisesti taustalla olevassa tietomallissa ja päinvastoin. Suurin osa etupäästä JavaScript-kehykset Kuten Kulmikas käyttää kaksisuuntaista sidontaa jakaa tietoja ja käsitellä reaaliaikaisia ​​tapahtumia.

Vue.js mahdollistaa kaksisuuntaisen sitomisen v-malli direktiivi. The v-malli direktiivi luo kaksisuuntaisen datasidoksen lomakkeen syöttöelementin ja tietoominaisuuden välille. Kun kirjoitat syöttöelementtiin, arvo päivittyy automaattisesti data-ominaisuuteen, ja kaikki tieto-ominaisuuden muutokset päivittävät myös syöttöelementin.

Tässä on esimerkki Vue-sovelluksesta, joka käyttää v-malli direktiivi kahdensuuntaisen tiedon sitomisen saavuttamiseksi:

<pää>
<otsikko>Kaksisuuntainen tiedonsidonta Vuessaotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">
<syöttötyyppi="teksti"v-malli="teksti">
<s>{{ teksti }}s>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 data() {
 return {
 teksti: 'Vue on mahtavaa!'
 }
 }
 })
 app.mount('#app')
käsikirjoitus>
kehon>

Yllä olevassa koodilohkossa on syöttöelementti, jossa on v-malli direktiivi sitoo sen teksti dataominaisuus. The teksti ominaisuus on alun perin asetettu arvoon "Vue on mahtava!".

Syötekenttä päivittää tekstiominaisuuden, kun kirjoitat siihen, ja heijastaa muutoksia tekstin ominaisuuteen s tag. Vue.js käyttää v-model-direktiiviä ja syöttöelementtiä kaksisuuntaisen tiedon sitomisen saavuttamiseksi.

V-bind mahdollistaa yksisuuntaisen viestinnän Vue-sovelluksesta käyttöliittymään, kun taas v-malli tarjoaa kaksisuuntaisen viestinnän Vue-sovelluksen ja käyttöliittymän välillä. Koska se pystyy mahdollistamaan kaksisuuntaisen viestinnän, v-malli käytetään usein työskenneltäessä lomakeelementtien kanssa Vuessa.

Laajenna asiantuntemustasi Vue-sovellusten rakentamisessa

Opit Vuen tietojen sidonnasta, mukaan lukien interpolaatiosta ja v-bind- ja v-model-käskyistä. Nämä datasidokset ovat välttämättömiä, koska ne toimivat Vue-sovellusten perustana.

Vuella on monia muita käyttötapauksia koskevia ohjeita, kuten listan hahmonnus, tapahtumasidonta ja ehdollinen renderöinti. Vue-ohjeiden ymmärtäminen auttaa sinua rakentamaan dynaamisen ja interaktiivisen käyttöliittymän verkkosovelluksille.