Íme, amit tudnia kell a Vue adatkötéséről

Az adatok webalkalmazásokban történő összerendelése kapcsolatot hoz létre az alkalmazás példánya és a felhasználói felület (felhasználói felület) között. Az alkalmazás példánya kezeli az adatokat, a viselkedést és az összetevőket, míg a felhasználói felület azt a vizuális szempontot képviseli, amellyel a felhasználók interakcióba lépnek. Az adatok összerendelése lehetővé teszi dinamikus webalkalmazások létrehozását.

Itt felfedezheti a Vue különféle kötéseit, beleértve az egyirányú és kétirányú kötéseket. Megtanulja ezen kötések megvalósítását is bajuszsablonokkal és direktívákkal, például v-bind és v-model.

Interpoláció Vue-ban

Az interpoláció a Vue egyik legnépszerűbb adat-összerendelési típusa. Az interpoláció lehetővé teszi, hogy adatértékeket jelenítsen meg a Hyper Text Markup Language (HTML) címkéiben a bajuszsablon segítségével, amelyet dupla kapcsos kapcsos zárójelekkel jelölnek ({{ }}).

A bajuszsablonnal dinamikus alkalmazástartalmakat, például adatokat és metódustulajdonságokat integrálhat a HTML-kódjába. Ezt úgy érheti el, hogy az adatok vagy metódustulajdonságok neveit mellékeli a Options objektum a Vue-ban ezeken a göndör fogszabályzókon belül.

Íme egy példa egy Vue alkalmazásra, amely a bajuszsablont használja a Vue interpolációjához:

<test>
<divid="alkalmazás">
<h1>{{ cím }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adat() {
 Visszatérés {
 cím: "Üdvözöljük",
 szöveg: "Ez a te világod?",
 };
 },
 });
 app.mount("#app");
forgatókönyv>
test>

A fenti kódblokk a bajuszsablont használja a title tulajdonság értékének megjelenítéséhez a Vue alkalmazás adatobjektumában. Interpolációval is megjelenítheti a JavaScript kifejezés eredményeit. Például a {{text.toUpperCase()}} kifejezés a p címke a szöveges érték nagybetűs változatát jeleníti meg, amint az az alábbi képen látható:

Amikor csatlakoztat egy Vue-alkalmazást, a Vue kiértékeli a kifejezéseket a sablonokban, és a kapott értékeket a HTML törzsben jeleníti meg. Az adattulajdonságok módosítása frissíti a megfelelő értékeket a felhasználói felületen.

Például:

<forgatókönyv>
 const app = Vue.createApp({
 adat() {
 Visszatérés {
 cím: "Helló",
 szöveg: "Ez a te világod?",
 };
 },
 });
 app.mount("#app");
forgatókönyv>

A fenti kódblokk a címtulajdonságot a következőre változtatja:Helló". Ez a változás automatikusan megjelenik a felhasználói felületen, mivel a Vue alkalmazás a title tulajdonságot a felhasználói felület eleméhez köti, az alábbiak szerint:

Az interpoláció csak akkor ad ki adatokat, ha a dupla zárójelek a nyitó és záró HTML-címkék között vannak.

Egyirányú adatkötés A v-bind irányelvvel

Az interpolációhoz hasonlóan az egyirányú adat-összerendelés összekapcsolja az alkalmazás példányát a felhasználói felülettel. A különbség az, hogy olyan tulajdonságokat köt HTML-attribútumokhoz, mint az adatok és módszerek.

Az egyirányú adat-összerendelés támogatja az egyirányú adatáramlást, megakadályozva, hogy a felhasználók olyan változtatásokat hajtsanak végre, amelyek az alkalmazáspéldány adattulajdonságait érintik. Ez akkor hasznos, ha adatokat szeretne megjeleníteni az alkalmazás felhasználója számára, de megakadályozza, hogy a felhasználó módosítsa azokat.

Egyirányú adatkötést érhet el a Vue-ban a v-kötés direktíva vagy annak rövidített karaktere (:):

 a v-bind direktíva 
<bemenettípus="szöveg"v-bind: érték="szöveg">
 a: gyorsított karakter 
<bemenettípus="szöveg":érték="szöveg">

A kódblokk a v-bind direktíva és annak rövidítésének használatát mutatja a bemeneti HTML címke értékének egy szöveges adattulajdonsághoz való kötésére. Íme egy példa egy Vue alkalmazásra, amely a v-kötés irányelv az egyirányú adatkötés eléréséhez:

<test>
<divid="alkalmazás">
<bemenettípus="szöveg"v-bind: érték="szöveg">
<p>{{ szöveg }}p>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adat() {
 Visszatérés {
 szöveg: 'Vue fantasztikus!'
 }
 }
 })
 app.mount('#app')
forgatókönyv>
test>

Fent egy beviteli mezőben és egy bekezdéselemben jelennek meg a szöveg ingatlan. A érték A beviteli mező attribútuma a szövegtulajdonsághoz van kötve a v-kötés irányelv.

Ez a kódblokk egyirányú összerendelést hoz létre, ahol megváltozik a szöveg tulajdonság frissíti a beviteli mező értékét, de a beviteli mezőben végrehajtott módosítások nem frissítik a szöveg tulajdonság a Vue alkalmazás példányában.

Ennek bemutatásához kezdhetjük a kezdeti értékével szöveg ingatlan, "A Vue fantasztikus!”:

Miután megváltoztatta a beviteli mező értékét "Helló Világ!", vegye figyelembe, hogy a Vue alkalmazás nem frissült, és a bekezdéscímke szövege változatlan maradt:

Amikor azonban megváltoztatjuk a szöveg tulajdonát Helló Világ! a Vue alkalmazáspéldányban a beviteli mező helyett a beviteli mező frissül, hogy tükrözze az új értéket:

Az adatok összerendelésének ez a módja olyan esetekben hasznos, amikor adatokat szeretne megjeleníteni a felhasználó számára, de megakadályozza, hogy a felhasználó közvetlenül módosítsa azokat. A Vue.js v-bind funkcióját kihasználva egyirányú összerendelést hozhat létre, amellyel könnyedén összekapcsolhatja az alkalmazás adatait a felhasználói felület elemeivel.

Kétirányú adatkötés a v-modell irányelvvel

A kétirányú adat-összerendelés lehetővé teszi, hogy a felhasználói felület elem értékének módosításai automatikusan megjelenjenek az alapul szolgáló adatmodellben, és fordítva. A legtöbb front-end JavaScript keretrendszerek mint Szögletes, kétirányú kötés adatok megosztására és valós idejű események kezelésére.

A Vue.js lehetővé teszi a kétirányú kötést a v-modell irányelv. A v-modell direktíva kétirányú adat-összerendelést hoz létre egy űrlap bemeneti elem és egy adattulajdonság között. Amikor beír egy bemeneti elemet, az érték automatikusan frissül az adattulajdonságban, és az adattulajdonság minden módosítása a bemeneti elemet is frissíti.

Íme egy példa egy Vue alkalmazásra, amely a v-modell irányelv a kétirányú adatkötés eléréséhez:

<fej>
<cím>Kétirányú adatkötés a Vue-bancím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<bemenettípus="szöveg"v-modell="szöveg">
<p>{{ szöveg }}p>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adat() {
 Visszatérés {
 szöveg: 'Vue fantasztikus!'
 }
 }
 })
 app.mount('#app')
forgatókönyv>
test>

A fenti kódblokkban van egy bemeneti elem a v-modell irányelvre kötelezi szöveg adattulajdonság. A szöveg A tulajdonság kezdetben értéke "Vue fantasztikus!".

A beviteli mező frissíti a szövegtulajdonságot, amikor beírja, és tükrözi a szövegtulajdonság változásait a mezőben p címke. A Vue.js a v-model direktívát és a bemeneti elemet használja a kétirányú adat-összerendelés eléréséhez.

Míg a v-bind lehetővé teszi az egyirányú kommunikációt a Vue alkalmazástól a felhasználói felületig, a v-modell kétirányú kommunikációt biztosít a Vue alkalmazás és a felhasználói felület között. A kétirányú kommunikációt lehetővé tevő képességének köszönhetően v-modell gyakran használják a Vue űrlapelemeivel való munka során.

Bővítse szakértelmét a Vue alkalmazások építésében

Megismerte a Vue adat-összerendelését, beleértve az interpolációt és a v-bind és v-model direktívákat. Ezek az adat-összerendelések elengedhetetlenek, mivel ezek szolgálják a Vue-alkalmazások alapját.

A Vue számos más direktívával rendelkezik a használati esetekre, például a lista-megjelenítésre, az eseménykötésre és a feltételes megjelenítésre. A Vue direktívák megértése segít dinamikus és interaktív front-end kialakításában webalkalmazásai számára.