Phenquestions
Vue.js - така проста у вивченні та доступна бібліотека. Отже, знаючи HTML, CSS та Javascript, ми можемо розпочати створення веб-додатків у Vue.js. Vue.js побудований на основі поєднання найкращих функцій з уже існуючих Angular and response Framework.
Прив'язка даних - одна з найелегантніших особливостей 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 із використанням подвійних фігурних дужок або синтаксису “Вуса”. Ми також продемонстрували двостороннє / реактивне зв'язування даних у Vue.js, використовуючи директиву v-model. Прочитавши цю статтю, прив’язка даних вже не є складним завданням для початківця, який щойно розпочав роботу з Vue.js. Отже, продовжуйте вивчати поняття Vue.js з linuxhint.ком. Дякую!
