Zde je to, co potřebujete vědět o vázání dat ve Vue

Vazba dat ve webových aplikacích vytvoří propojení mezi instancí aplikace a uživatelským rozhraním. Instance aplikace spravuje data, chování a komponenty, zatímco uživatelské rozhraní představuje vizuální aspekt, se kterým uživatelé interagují. Vazba dat vám umožňuje vytvářet dynamické webové aplikace.

Zde prozkoumáte různé vazby ve Vue, včetně jednosměrných a obousměrných. Naučíte se také implementovat tyto vazby pomocí šablon a direktiv knírek, jako je v-bind a v-model.

Interpolace ve Vue

Interpolace je jedním z nejoblíbenějších typů datových vazeb Vue. Interpolace vám umožňuje zobrazit hodnoty dat ve vašich značkách HTML (Hyper Text Markup Language) pomocí šablony knírek, která se běžně označuje dvojitými složenými závorkami ({{ }}).

Pomocí šablony knírek můžete do kódu HTML integrovat dynamický obsah aplikace, jako jsou data a vlastnosti metod. Toho můžete dosáhnout uzavřením názvů vlastností dat nebo metod z opční objekt ve Vue v těchto složených závorkách.

Zde je příklad aplikace Vue využívající šablonu knírek k dosažení interpolace ve Vue:

<tělo>
<divid="aplikace">
<h1>{{ název }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 název: "Vítejte",
 text: "Toto je tvůj svět?",
 };
 },
 });
 app.mount("#app");
skript>
tělo>

Blok kódu výše používá šablonu knírek k zobrazení hodnoty vlastnosti title v datovém objektu aplikace Vue. Výsledky výrazů JavaScript můžete zobrazit také pomocí interpolace. Například, {{text.toUpperCase()}} výraz v p tag zobrazuje verzi textové hodnoty velkými písmeny, jak je znázorněno na obrázku níže:

Když připojíte aplikaci Vue, Vue vyhodnotí výrazy v šablonách a vykreslí výsledné hodnoty v těle HTML. Jakékoli změny vlastností dat aktualizují odpovídající hodnoty v uživatelském rozhraní.

Například:

<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 název: "Dobrý den",
 text: "Toto je tvůj svět?",
 };
 },
 });
 app.mount("#app");
skript>

Výše uvedený blok kódu změní vlastnost title na „Ahoj". Tato změna se automaticky projeví v uživatelském rozhraní, protože aplikace Vue váže vlastnost title k prvku uživatelského rozhraní, jak je znázorněno níže:

Interpolace vydává data pouze tehdy, když jsou dvojité složené závorky mezi otevíracími a zavíracími značkami HTML.

Jednosměrná datová vazba se směrnicí v-bind

Stejně jako interpolace propojuje jednosměrná datová vazba instanci aplikace s uživatelským rozhraním. Rozdíl je v tom, že váže vlastnosti, jako jsou data a metody, na atributy HTML.

Jednosměrná datová vazba podporuje jednosměrný tok dat a zabraňuje uživatelům provádět změny, které ovlivňují vlastnosti dat v instanci aplikace. To je užitečné, když chcete zobrazit data uživateli aplikace, ale zabránit uživateli v jejich úpravě.

Jednosměrnou datovou vazbu ve Vue můžete dosáhnout pomocí v-vázat směrnice nebo její zkrácený charakter (:):

 direktivu v-bind 
<vstuptyp="text"v-bind: hodnota="text">
 znak: těsnopis 
<vstuptyp="text":hodnota="text">

Blok kódu ukazuje použití direktivy v-bind a její zkratky k navázání hodnoty vstupní značky HTML na vlastnost textových dat. Zde je příklad aplikace Vue využívající v-vázat direktiva k dosažení jednosměrné datové vazby:

<tělo>
<divid="aplikace">
<vstuptyp="text"v-bind: hodnota="text">
<p>{{ text }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 text: 'Vue je úžasné!'
 }
 }
 })
 app.mount('#app')
skript>
tělo>

Vstupní pole a prvek odstavce nahoře zobrazují hodnotu parametru text vlastnictví. The hodnota atribut vstupního pole je svázán s vlastností text pomocí v-vázat směrnice.

Tento blok kódu vytvoří jednosměrnou vazbu, kde se změní na text vlastnost aktualizuje hodnotu vstupního pole, ale změny provedené ve vstupním poli neaktualizují text vlastnost v instanci aplikace Vue.

Abychom to ukázali, můžeme začít s počáteční hodnotou text vlastnictví, "Vue je úžasná!”:

Po změně hodnoty vstupního pole na „Ahoj světe!", všimněte si, že aplikace Vue nebyla aktualizována a text ve značce odstavce zůstal stejný:

Když však změníme hodnotu text majetek do Ahoj světe! v instanci aplikace Vue namísto ze vstupního pole se vstupní pole aktualizuje tak, aby odráželo novou hodnotu:

Tento způsob vazby dat je užitečný ve scénářích, kde chcete zobrazit data uživateli, ale zabránit uživateli v jejich přímé úpravě. Využitím v-bind ve Vue.js můžete vytvořit jednosměrnou vazbu, která snadno propojí data vaší aplikace s prvky uživatelského rozhraní.

Dvoucestná datová vazba podle směrnice v-model

Obousměrná datová vazba umožňuje, aby se změny hodnoty prvku uživatelského rozhraní automaticky projevily v základním datovém modelu a naopak. Většina front-endu JavaScriptové rámce jako Angular využívá obousměrné vázání pro sdílení dat a zpracování událostí v reálném čase.

Vue.js umožňuje obousměrnou vazbu s v-model směrnice. The v-model Direktiva vytváří obousměrnou datovou vazbu mezi vstupním prvkem formuláře a vlastností dat. Když zadáte do vstupního prvku, hodnota se automaticky aktualizuje ve vlastnosti data a jakékoli změny vlastnosti data také aktualizují vstupní prvek.

Zde je příklad aplikace Vue, která využívá v-model direktiva k dosažení obousměrné datové vazby:

<hlava>
<titul>Obousměrná datová vazba ve Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<vstuptyp="text"v-model="text">
<p>{{ text }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 text: 'Vue je úžasné!'
 }
 }
 })
 app.mount('#app')
skript>
tělo>

Blok kódu výše má vstupní prvek s v-model směrnice, která ji zavazuje k text datová vlastnost. The text vlastnost je zpočátku nastavena na "Vue je úžasná!".

Vstupní pole aktualizuje vlastnost textu, když do něj píšete, a odráží změny vlastnosti textu v p štítek. Vue.js používá direktivu v-model a vstupní prvek k dosažení obousměrné vazby dat.

Zatímco v-bind umožňuje jednosměrnou komunikaci z aplikace Vue do uživatelského rozhraní, v-model poskytuje obousměrnou komunikaci mezi aplikací Vue a uživatelským rozhraním. Díky své schopnosti umožnit obousměrnou komunikaci, v-model se často používá při práci s prvky formuláře ve Vue.

Rozšiřte své odborné znalosti při vytváření aplikací Vue

Dozvěděli jste se o vazbě dat ve Vue, včetně interpolace a direktiv v-bind a v-model. Tyto datové vazby jsou nezbytné, protože slouží jako základ aplikací Vue.

Vue má mnoho dalších direktiv pro případy použití, jako je vykreslování seznamu, vazba událostí a podmíněné vykreslování. Pochopení direktiv Vue vám pomůže vytvořit dynamický a interaktivní front-end pro vaše webové aplikace.