Vue.js je taká ľahko naučiteľná a prístupná knižnica. Takže so znalosťami HTML, CSS a Javascript môžeme začať vytvárať webové aplikácie vo Vue.js. Vue.js je postavený na základe kombinácie najlepších funkcií z už existujúcich frameworkov Angular a React.
Väzba údajov je jednou z najelegantnejších funkcií aplikácie Vue.js, pretože poskytuje reaktívne / obojsmerné viazanie údajov. Vo Vue.js, na rozdiel od iných rámcov nemusíme písať veľa riadkov, aby sme mali obojsmernú dátovú väzbu. Jednosmerná väzba údajov znamená, že premenná je viazaná iba na DOM. Na druhej strane obojsmerné znamená, že premenná je viazaná aj z DOM. Pri zmene DOM sa zmení aj premenná. Poďme sa teda pozrieť na obe dátové väzby a uvidíme ten správny rozdiel.
Jednosmerná väzba údajov
Ak chceme viazať ľubovoľnú premennú, môžeme jednoducho použiť Vue.js má dvojité zložené zátvorky, syntax alebo syntax „Mustache“ na vytvorenie väzby na ľubovoľnú premennú z inštancie relatívneho komponentu.
linuxhintText
Alebo ak chceme zviazať ľubovoľnú premennú vo vnútri atribútu HTML, môžeme použiť znak v-väzba smernice.
Vue.js tiež poskytuje skratku pre väzbu premenných v atribúte HTML. Namiesto písania v-bind: názov-atribútu, môžeme použiť iba dvojbodku „:“ a názov atribútu.
Ale to sú len dátové väzby. Na demonštráciu obojsmernej dátovej väzby môžeme použiť znak v-model smernica poskytnutá Vue.js.
Obojsmerná / reaktívna väzba údajov
Na demonštráciu reaktívnej dátovej väzby môžeme použiť v-model smernica o poli vstupného formulára. Bude interne emitovať udalosť a meniť premennú. Na ktoré sa môžeme naviazať niekde inde v šablóne pomocou dvojitých zložených zátvoriek alebo syntaxe „Mustache“.
Píšete: linuxhintText
Teraz, kedykoľvek zadáme znak do poľa vstupného formulára, vidíme, že sa premenná tiež aktualizuje súčasne.
Balenie
V tomto článku sme sa naučili, ako viazať premenné vo Vue.js pomocou dvojitých zložených zátvoriek alebo syntaxe „Moustache“. Vo Vue sme tiež demonštrovali obojsmernú / reaktívnu väzbu údajov.js pomocou smernice v-model. Po prečítaní tohto článku už viazanie dát nie je pre začiatočníka, ktorý práve začal s Vue, náročná úloha.js. Takže sa neustále učte koncepty Vue.js s linuxhint.com. Ďakujem!