В предыдущем блоге/статье мы узнали, как создавать, импортировать и использовать компоненты. На этот раз мы рассмотрим привязку данных в компонентах.

Использование данных внутри компонентов

Определение данных в компоненте
Данные определяются в функции data() и возвращаются в виде объекта.
Вот пример:

data() {
  return {
    message: 'Hello World!'
  };
}

Связывание с директивами

v-bind: привязка атрибутов HTML к данным.

v-model: директива v-model используется для двусторонней привязки данных при вводе формы. Он синхронизирует входное значение с данными экземпляра Vue. По сути, v-модель сочетает в себе @input (который прослушивает изменения) и :value (который устанавливает входное значение). Например:

Это эквивалентно:

Вот как вы можете использовать :value и @input отдельно:

Директива v-if условно отображает элементы на основе логического значения. Если условие истинно, элемент будет отображен; если ложь, то нет. Например:

This is visible!

Директива v-for используется для циклического перемещения по массиву или объекту для визуализации элементов. Каждому элементу может быть присвоен уникальный ключ для повышения производительности. Например:

• {{ item.name }}

в-он
Директива v-on используется для прослушивания событий на элементах. Для удобства вы можете использовать сокращение @. Например:

Click me!

Это можно сократить до:

Click me!