Tu je to, čo potrebujete vedieť o viazaní údajov vo Vue

Väzba údajov vo webových aplikáciách vytvára prepojenie medzi inštanciou aplikácie a používateľským rozhraním (používateľským rozhraním). Inštancia aplikácie spravuje údaje, správanie a komponenty, zatiaľ čo používateľské rozhranie predstavuje vizuálny aspekt, s ktorým používatelia interagujú. Väzba údajov vám umožňuje vytvárať dynamické webové aplikácie.

Tu preskúmate rôzne viazania vo Vue, vrátane jednosmerných a obojsmerných viazaní. Tiež sa naučíte implementovať tieto väzby pomocou šablón a direktív fúzov, ako sú v-bind a v-model.

Interpolácia vo Vue

Interpolácia je jedným z najpopulárnejších typov dátových väzieb Vue. Interpolácia vám umožňuje zobraziť hodnoty údajov vo vašich značkách HTML (Hyper Text Markup Language) pomocou šablóny fúzy, ktorá sa bežne označuje dvojitými zloženými zátvorkami ({{ }}).

Pomocou šablóny fúzy môžete do kódu HTML integrovať dynamický obsah aplikácie, ako sú údaje a vlastnosti metód. Môžete to dosiahnuť uzavretím názvov vlastností údajov alebo metód z

opčný objekt vo Vue v týchto kučeravých zátvorkách.

Tu je príklad aplikácie Vue, ktorá využíva šablónu fúzov na dosiahnutie interpolácie vo Vue:

<telo>
<divid="aplikácia">
<h1>{{ názov }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátiť {
 názov: "Vitajte",
 text: "Toto je tvoj svet?",
 };
 },
 });
 app.mount("#app");
skript>
telo>

Blok kódu vyššie používa šablónu fúzov na zobrazenie hodnoty vlastnosti title v dátovom objekte aplikácie Vue. Výsledky výrazov JavaScript môžete zobraziť aj s interpoláciou. Napríklad, {{text.toUpperCase()}} výraz v p značka zobrazuje textovú hodnotu s veľkými písmenami, ako je znázornené na obrázku nižšie:

Keď pripojíte aplikáciu Vue, Vue vyhodnotí výrazy v šablónach a vykreslí výsledné hodnoty v tele HTML. Akékoľvek zmeny vlastností údajov aktualizujú zodpovedajúce hodnoty v používateľskom rozhraní.

Napríklad:

<skript>
 const app = Vue.createApp({
 data() {
 vrátiť {
 názov: "Ahoj",
 text: "Toto je tvoj svet?",
 };
 },
 });
 app.mount("#app");
skript>

Vyššie uvedený blok kódu zmení vlastnosť title na „Ahoj". Táto zmena sa automaticky prejaví v používateľskom rozhraní, pretože aplikácia Vue spája vlastnosť title s prvkom používateľského rozhrania, ako je uvedené nižšie:

Interpolácia vydáva údaje iba vtedy, keď sú dvojité zložené zátvorky medzi otváracími a zatváracími značkami HTML.

Jednosmerná dátová väzba so smernicou v-bind

Podobne ako interpolácia, aj jednosmerná dátová väzba spája inštanciu aplikácie s používateľským rozhraním. Rozdiel je v tom, že viaže vlastnosti ako údaje a metódy na atribúty HTML.

Jednosmerná dátová väzba podporuje jednosmerný tok dát, čím bráni používateľom vykonávať zmeny, ktoré ovplyvňujú vlastnosti dát v inštancii aplikácie. Je to užitočné, keď chcete zobraziť údaje používateľovi aplikácie, ale zabrániť používateľovi v ich úprave.

Jednosmernú dátovú väzbu vo Vue môžete dosiahnuť pomocou v-viazať smernica alebo jej skratkový charakter (:):

 smernice v-bind 
<vstuptypu="text"v-bind: hodnota="text">
 znak: skratka 
<vstuptypu="text":hodnota="text">

Blok kódu zobrazuje použitie direktívy v-bind a jej skratky na naviazanie hodnoty vstupnej značky HTML na vlastnosť textových údajov. Tu je príklad aplikácie Vue, ktorá využíva v-viazať smernica na dosiahnutie jednosmernej dátovej väzby:

<telo>
<divid="aplikácia">
<vstuptypu="text"v-bind: hodnota="text">
<p>{{ text }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátiť {
 text: 'Vue je úžasné!'
 }
 }
 })
 app.mount('#app')
skript>
telo>

Vstupné pole a prvok odseku vyššie zobrazujú hodnotu znaku text nehnuteľnosť. The hodnotu atribút vstupného poľa je viazaný na vlastnosť text pomocou v-viazať smernice.

Tento blok kódu vytvára jednosmernú väzbu, kde sa mení na text vlastnosť aktualizuje hodnotu vstupného poľa, ale zmeny vykonané vo vstupnom poli neaktualizujú hodnotu text vlastnosť v inštancii aplikácie Vue.

Aby sme to ukázali, môžeme začať s počiatočnou hodnotou text nehnuteľnosť, "Vue je úžasné!”:

Po zmene hodnoty vstupného poľa na „Ahoj Svet!", všimnite si, že aplikácia Vue nebola aktualizovaná a text v značke odseku zostal rovnaký:

Keď však zmeníme hodnotu text majetok do Ahoj svet! v inštancii aplikácie Vue namiesto zo vstupného poľa sa vstupné pole aktualizuje tak, aby odrážalo novú hodnotu:

Tento spôsob viazania údajov je užitočný v scenároch, kde chcete zobraziť údaje používateľovi, ale zabrániť používateľovi v ich priamej úprave. Využitím v-bind vo Vue.js môžete vytvoriť jednosmernú väzbu, ktorá jednoducho prepojí údaje vašej aplikácie s prvkami používateľského rozhrania.

Obojsmerná dátová väzba so smernicou v-model

Obojsmerná dátová väzba umožňuje, aby sa zmeny hodnoty prvku používateľského rozhrania automaticky premietli do základného dátového modelu a naopak. Väčšina front-end JavaScriptové rámce Páči sa mi to Angular využíva obojsmerné viazanie na zdieľanie údajov a spracovanie udalostí v reálnom čase.

Vue.js umožňuje obojsmernú väzbu s v-model smernice. The v-model Direktíva vytvára obojsmernú dátovú väzbu medzi vstupným prvkom formulára a dátovou vlastnosťou. Keď zadáte vstupný prvok, hodnota sa automaticky aktualizuje vo vlastnosti údajov a akékoľvek zmeny vlastnosti údajov zaktualizujú aj vstupný prvok.

Tu je príklad aplikácie Vue, ktorá využíva v-model smernica na dosiahnutie obojsmernej dátovej väzby:

<hlavu>
<titul>Obojsmerná dátová väzba vo Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<vstuptypu="text"v-model="text">
<p>{{ text }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátiť {
 text: 'Vue je úžasné!'
 }
 }
 })
 app.mount('#app')
skript>
telo>

Vyššie uvedený blok kódu má vstupný prvok s v-model smernice, ktorá ho zaväzuje k text dátová vlastnosť. The text vlastnosť je pôvodne nastavená na "Vue je úžasná!".

Vstupné pole aktualizuje vlastnosť textu, keď doň píšete, a odráža zmeny vlastnosti textu v p tag. Vue.js používa direktívu v-model a vstupný prvok na dosiahnutie obojsmernej dátovej väzby.

Zatiaľ čo v-bind umožňuje jednosmernú komunikáciu z aplikácie Vue do používateľského rozhrania, v-model poskytuje obojsmernú komunikáciu medzi aplikáciou Vue a používateľským rozhraním. Vďaka svojej schopnosti umožniť obojsmernú komunikáciu, v-model sa často používa pri práci s prvkami formulára vo Vue.

Rozšírte svoju odbornosť pri vytváraní aplikácií Vue

Dozvedeli ste sa o viazaní údajov vo Vue, vrátane interpolácie a direktív v-bind a v-model. Tieto dátové väzby sú nevyhnutné, pretože slúžia ako základ aplikácií Vue.

Vue má mnoho ďalších smerníc pre prípady použitia, ako je vykresľovanie zoznamu, viazanie udalostí a podmienené vykresľovanie. Pochopenie direktív Vue vám pomôže vytvoriť dynamický a interaktívny front-end pre vaše webové aplikácie.