1. Введение и установка Vue.js
2. Создание приложения
3. Синтаксис шаблонов
4. Основы реактивности
5. Вычисляемые свойства
6. Привязка классов и стилей
7. Условное отображение
8. Отображение списков
9. Обработка событий
10. Привязка полей формы
11. TODO

v-model

Директива v-model помогает связать значение из формы и содержимое другого элемента. Она может быть использована на инпутах разных типов, также на textarea и select. Это значит, что значение v-model будет привязано к разным атрибутам и событиям в зависимости от типа поля ввода

• <input> с типом текст и <textarea> работают со значением value и событием input
• <input> с типом checkbox и radio используют свойство checked и событие change
• <select> использует value и событие change

Основы использования

Текст

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

Текст из нескольких  строк

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

Также стоит заметить, что интерполяция строк в textarea работать не будет. В этом случае нужно использовать v-model

Использование чекбокса

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

Мы можем привязать несколько чекбоксов к массиву ref()

const checkedNames = ref([])
<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

Радио кнопки

<div>Picked: {{ picked }}</div>
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

Селект

<div>Selected: {{ selected }}</div>
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Селект с множественным выбором

<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Селект может быть динамически задан через свойства ref и директиву v-for

const selected = ref('A')
const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])
<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>
<div>Selected: {{ selected }}</div>

Привязки значений

Для радиокнопок, чекбоксов и селектов обычно в качестве значений используются статические строки или булевы значения. Но иногда нам необходимо прикрепить в качестве значения динамическое свойство. Для этого используется директива v-bind. Вдобавок использование v-bind позволяет привязать к инпуту значение отличное от строки.

Чекбоксы

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value и false-value это специальные Vue атрибуты, которые работают только с директивой v-model

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

Радиокнопки

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

Селект

<select v-model="selected">
  <!-- inline object literal -->
  <option :value="{ number: 123 }">123</option>
</select>

Модификаторы

.lazy

По умолчанию, данные синхронизируются с инпутом после каждого наступления события input. Можно добавить к v-model через точку мрдмфикатор .lazy, чтобы данные синхронизировались по событию change.

.number

Чтобы указать для поля, что его значения должны быть числовыми используется модификатор .number. Если значение не сможет быть обработано parseFloat(), тогда значение будет передано как есть.

.trim

Если нужно обрезать пробелы у значений инпутов, то можно применять модификатор .trim