Vue.Wiązanie danych JS

Vue.JS jest tak łatwą do nauczenia się i przystępnej biblioteki. Z wiedzy o HTML, CSS i JavaScript możemy zacząć budować aplikacje internetowe w Vue.JS. Vue.JS jest zbudowany przez połączenie najlepszych funkcji z już istniejących ram kątowych i react.

Wiązanie danych jest jedną z najbardziej eleganckich cech Vue.JS, ponieważ zapewnia reaktywne/dwukierunkowe wiązanie danych. W Vue.JS, nie musimy pisać wielu linii, aby mieć dwukierunkowe wiązanie danych, w przeciwieństwie do innych frameworków. Wiązanie danych jednokierunkowych oznacza, że ​​zmienna jest po prostu związana z DOM. Z drugiej strony dwukierunkowa oznacza, że ​​zmienna jest również związana z DOM. Kiedy DOM zostanie zmieniony, zmienna również się zmienia. Rzućmy więc oba powiązania danych i zobaczmy odpowiednią różnicę.

Wiązanie danych jednokierunkowych

Jeśli chcemy powiązać jakąkolwiek zmienną, możemy po prostu użyć vue.Składnia podwójnych klamrowych JS lub składnia „wąsów”, aby powiązać dowolną zmienną z instancji komponentu względnego.

LinuxhintText

Lub, jeśli chcemy powiązać dowolną zmienną w atrybucie HTML, możemy użyć V-bind dyrektywa.

Vue.JS zapewnia również skrót do zmiennych wiązania w atrybucie HTML. Zamiast pisać V-Bind: atrybut-name, Możemy użyć tylko okrężnicy „:” i nazwy atrybutu.

Ale to tylko powiązania danych. Aby zademonstrować wiązanie danych dwukierunkowych, możemy użyć Model V dyrektywa dostarczona przez vue.JS.

Dwukierunkowe/reaktywne wiązanie danych

Aby wykazać wiązanie danych reaktywnych, możemy użyć Model V dyrektywa w polu formularza wejściowego. Wewnętrznie emituje zdarzenie i zmieni zmienną. Do którego możemy powiązać gdzie indziej w szablonie za pomocą podwójnych klamrów kręconych lub składni „wąsów”.

Piszesz: LinuxhintText

Teraz, ilekroć wprowadzamy znak w polu formularza wejściowego, widzimy, że zmienna również aktualizuje się jednocześnie.

Owinięcie

W tym artykule nauczyliśmy się wiązania zmiennych w Vue.JS za pomocą podwójnych klamrów lub składni „wąsów”. Wykazaliśmy również wiązanie danych dwukierunkowych/reaktywnych w Vue.JS za pomocą dyrektywy w modelu V. Po przeczytaniu tego artykułu powiązanie danych nie jest już trudnym zadaniem dla początkującego, który właśnie zaczął od Vue.JS. Więc naucz się koncepcji Vue.JS z Linuxhint.com. Dziękuję!