Двостороннє зв’язування даних

Фото від freestocks на Unsplash

Попередні вимоги

• Переконайтесь, що ви встановили версію Node.js 18.3+
• Вам потрібно створити додаток Vue, слідуючи цьому посібнику.

Вступ

Для того, щоб легко отримувати та оновлювати значення поля введення, використовуйте двостороннє зв'язування даних. Це означає, що стан і поле введення залишаються синхронізованими:

1. Якщо ви змінюєте поле введення, стан оновлюється.
   2.

Якщо ви оновлюєте стан, поле введення змінюється автоматично.

Це забезпечує безперешкодну синхронізацію обох елементів.

Що таке одностороннє зв'язування даних?

Перед тим, як вивчити двостороннє зв'язування даних, вам потрібно зрозуміти, що таке одностороннє зв'язування даних.

JavaScript до HTML

Коли відбувається оновлення в JavaScript, HTML автоматично відображає зміну.

Одностороннє зв'язування даних

Подивіться на приклад нижче. Якщо стан greet змінюється, тег
оновиться автоматично.

{{ greet }}
... const greet = ref('Hello World') // Якщо greet зміниться,
буде змінюватися також Інший приклад. Якщо prettyMe зміниться, ім'я class тега
також оновиться автоматично.

Hello World
      ...

const prettyMe = ref('pretty-text') // Якщо **prettyMe** зміниться, **class** зміниться

HTML до JavaScript

Коли подія відбувається в HTML, JavaScript обробляє цю подію.

Одностороннє зв'язування даних

Наприклад, коли ви натискаєте кнопку Submit, викликається функція onSubmit.

Submit // якщо натискати, **onSubmit** буде викликано  

...

function onSubmit() {  
 console.log('submit')  
}

Усі наведені вище приклади є одностороннім зв'язуванням даних, що означає, що дані передаються тільки в одному напрямку.

Що таке двостороннє зв'язування даних?

Коротко кажучи, дані передаються в обох напрямках між HTML і JavaScript.

Двостороннє зв'язування даних

Наприклад, якщо ви хочете отримати дані з поля введення і відобразити текст в абзаці, ви можете зробити це таким чином.

Демонстрація двостороннього зв'язування даних

Нічого складного. Подивіться на скріншот: дані передаються від HTML до JavaScript і потім повертаються від JavaScript до HTML. Це називається двостороннім зв'язуванням даних.

v-model

Для такого сценарію Vue надає v-model для чистішого коду.

Ви можете переписати код так:

З використанням v-model

Ми прибрали функцію onTextChange() і замінили код на v-model.

Готово

Використовуючи v-model, ми можемо легко створити двостороннє зв'язування даних. Зазвичай, ми використовуємо v-model з елементами форми, такими як ,, ``, і інші.

Попереднє: Прослуховувач подій (Event Listener)

Наступне:

Перекладено з: Two-way data binding