Vue.js je tak snadno naučitelná a přístupná knihovna. Se znalostmi HTML, CSS a Javascript tedy můžeme začít vytvářet webové aplikace ve Vue.js. Vue.js je postaven kombinací nejlepších funkcí z již existujících rámců Angular a Reagovat.
Datová vazba je jednou z nejelegantnějších funkcí Vue.js, protože poskytuje reaktivní / obousměrné vázání dat. Vue.js, na rozdíl od jiných frameworků nemusíme psát mnoho řádků, abychom měli obousměrnou datovou vazbu. Jednosměrná datová vazba znamená, že proměnná je právě vázána na DOM. Na druhou stranu obousměrný znamená, že proměnná je také vázána z DOM. Když se DOM změní, změní se také proměnná. Pojďme se tedy podívat na obě datové vazby a uvidíme ten správný rozdíl.
Jednosměrná datová vazba
Pokud chceme vázat libovolnou proměnnou, můžeme jednoduše použít Vue.Syntaxe dvojitých složených závorek js nebo syntaxe „Moustache“ k navázání jakékoli proměnné z instance relativní komponenty.
linuxhintText
Nebo pokud chceme vázat libovolnou proměnnou uvnitř atributu HTML, můžeme použít v-bind směrnice.
Vue.js také poskytuje zkratku pro vazbu proměnných v atributu HTML. Místo psaní v-bind: název-atributu, můžeme použít pouze dvojtečku „:“ a název atributu.
Ale to jsou jen datové vazby. K předvedení obousměrné datové vazby můžeme použít v-model směrnice poskytovaná Vue.js.
Obousměrná / reaktivní vazba dat
Abychom prokázali reaktivní datovou vazbu, můžeme použít v-model směrnice o poli vstupního formuláře. Bude interně emitovat událost a měnit proměnnou. Ke kterému se můžeme vázat někde jinde v šabloně pomocí dvojitých složených závorek nebo syntaxe „Moustache“.
Píšete: linuxhintText
Nyní, kdykoli zadáme znak do pole vstupního formuláře, vidíme, že se proměnná také aktualizuje současně.
Balení
V tomto článku jsme se naučili, jak vázat proměnné ve Vue.js pomocí dvojitých složených závorek nebo syntaxe „Moustache“. Také jsme demonstrovali obousměrnou / reaktivní datovou vazbu ve Vue.js pomocí směrnice v-modelu. Po přečtení tohoto článku není datová vazba pro začátečníka, který právě začal s Vue, obtížný úkol.js. Pokračujte v učení konceptů Vue.js s linuxhint.com. Děkuju!