Vue.js Обвързване на данни

Vue.js е толкова лесна за научаване и достъпна библиотека. Така че, със знанието на HTML, CSS и Javascript, можем да започнем да изграждаме уеб приложения в Vue.js. Vue.js е изграден чрез комбиниране на най-добрите функции от вече съществуващите рамки Angular и response.

Обвързването на данни е една от най-елегантните функции на Vue.js, защото осигурява реактивно / двупосочно свързване на данни. Във Vue.js, не е нужно да пишем много редове, за да има двупосочно свързване на данни, за разлика от други рамки. Еднопосочното свързване на данни означава, че променливата е просто свързана с DOM. От друга страна, двупосочността означава, че променливата също е свързана от DOM. Когато DOM се промени, променливата също се променя. Така че, нека да разгледаме и двете обвързвания на данни и да видим правилната разлика.

Еднопосочно обвързване на данни

Ако искаме да свържем някоя променлива, можем просто да използваме Vue.js синтаксис на двойни къдрави скоби или синтаксис „Mustache“, за да обвърже всяка променлива от съответния екземпляр на компонента.

linuxhintText

Или, ако искаме да свържем някаква променлива вътре в HTML атрибут, можем да използваме v-обвързване директива.

Vue.js също предоставя стенографията за свързване на променливи в атрибут HTML. Вместо да пише v-bind: име на атрибут, можем да използваме само двоеточие „:“ и име на атрибут.

Но това са само обвързване на данни. За да демонстрираме двупосочното свързване на данни, можем да използваме v-модел директива, предоставена от Vue.js.

Двупосочно / реактивно свързване на данни

За да демонстрираме свързване на реактивни данни, можем да използваме v-модел директива в полето за формуляр за въвеждане. Той ще излъчи вътрешно събитие и ще промени променливата. Към което можем да се свържем някъде другаде в шаблона, използвайки двойни фигурни скоби или синтаксис „Мустаци“.

Пишете: linuxhintText

Сега, когато въведем символ в полето за въвеждане на формуляра, можем да видим, че променливата също се актуализира едновременно.

Обобщавайки

В тази статия научихме как да свързваме променливи във Vue.js, използвайки двойни фигурни скоби или синтаксис „Mustache“. Също така демонстрирахме двупосочното / реактивно свързване на данни във Vue.js, използвайки директивата v-model. След като прочетете тази статия, свързването на данни вече не е трудна задача за начинаещи, които току-що са започнали Vue.js. Така че, продължавайте да изучавате концепциите на Vue.js с linuxhint.com. Благодаря ти!