Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Работа с формами
Типичное использование
Можно использовать директиву v-model
для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента. Хотя v-model
и выглядит как нечто волшебное, в действительности это лишь синтаксический сахар для обновления данных в элементах ввода, с некоторыми поправками для исключительных случаев.
v-model
игнорирует начальное значение атрибутов value
, checked
или selected
на любых элементах форм. Данные экземпляра Vue всегда считаются источником истины. Начальное значение необходимо объявить на стороне JavaScript, внутри опции data
компонента.
Внутренне v-model
использует разные свойства и генерирует разные события для различных элементов ввода:
- элементы для ввода текста и многострочного текста используют свойство
value
и событиеinput
; - чекбоксы и радиокнопки используют свойство
checked
и событиеchange
; - выпадающие списки используют свойство
value
и событиеchange
.
В языках, требующих IME (китайский, японский, корейский и т.д.), можно заметить, что v-model
не обновляется по мере IME-композиции. Если вы хотите обрабатывать и эти обновления, используйте события input
.
Текст
|
Введённое сообщение: {{ message }}
Многострочный текст
|
{{ message }}
Интерполяция внутри textarea (<textarea>{{text}}</textarea>
) не будет работать. Используйте вместо неё директиву v-model
Чекбоксы
Один чекбокс, привязанный к булевому значению:
|
Список чекбоксов, привязанных к одному массиву:
|
|
Отмеченные имена: {{ checkedNames }}
Радиокнопки
|
Выбрано: {{ picked }}
Выпадающие списки
Выбор одного варианта из списка:
|
|
Если начальное значение выражения v-model
не соответствует ни одному из вариантов списка, элемент <select>
будет отображаться в «невыбранном» состоянии. В iOS это приведёт к тому, что пользователь не сможет выбрать первый элемент, потому что iOS не сгенерирует событие change
в этом случае. Поэтому рекомендуется предоставлять отключённый disabled
-вариант выбора с пустым значением value, как показано в примере выше.
Выбор нескольких вариантов из списка (с привязкой к массиву):
|
Выбрано: {{ selected }}
Динамическое отображение списка опций с помощью v-for
:
|
|
Связывание значений
Для радиокнопок и выпадающих списков в качестве v-model
обычно используются статические строки, а для чекбоксов — булевые значения:
|
Иногда необходимо связать значение с динамическим свойством экземпляра Vue. Для этого можно использовать v-bind
. Кроме того, использование v-bind
позволяет связывать поле ввода с нестроковыми значениями.
Чекбокс
|
|
Атрибуты true-value
и false-value
не влияют на атрибут value
тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.
Радиокнопки
|
|
Списки выбора
|
|
Модификаторы
.lazy
По умолчанию v-model
синхронизирует ввод с данными по событию input
(за исключением вышеупомянутых событий IME). Можно указать модификатор lazy
, чтобы использовать для синхронизации после события change
:
|
.number
Для автоматического приведения введённого пользователем к Number, добавьте модификатор number
:
|
Зачастую это полезно, потому что даже при указанном атрибуте type="number"
значением поля ввода всегда будет строка. Если значение не удаётся распарсить с помощью parseFloat()
, то возвращается оригинальное значение.
.trim
Если необходимо, чтобы автоматически обрезались пробелы в начале и в конце строки, используйте модификатор trim
для полей ввода, обрабатываемых через v-model
:
|
Использование v-model
с компонентами
Если вы ещё не знакомы с компонентами Vue, пока просто пропустите эту секцию
Встроенных в HTML элементов ввода не всегда достаточно. К счастью, компоненты Vue позволяют создавать собственные аналоги с полностью настраиваемым поведением. Эти элементы тоже могут работать с директивой v-model
!
Подробнее в разделе пользовательские элементы ввода.