Руководство
Основы
- Установка
- Введение
- Экземпляр 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, документация на русском здесь.
Работа с классами и стилями
Часто возникает необходимость динамически изменять CSS-классы и inline-стили элементов в зависимости от состояния приложения. Поскольку и то и другое атрибуты, мы можем использовать v-bind
: необходимо лишь вычислить итоговую строку при помощи выражения. Впрочем, заниматься конкатенацией строк неудобно, это может привести к ошибкам. К счастью, Vue предоставляет дополнительные возможности директивы v-bind
для работы с class
и style
. Эти атрибуты кроме строковых значений могут принимать массивы или объекты.
Связывание CSS-классов
Использование объектов
Для динамической установки или удаления CSS-классов можно передавать объект в директиву v-bind:class
:
|
Запись выше означает, что наличие класса active
будет определяться истинностью параметра isActive
.
Таким образом можно управлять несколькими классами, добавляя в объект другие поля. Кроме того, v-bind:class
можно использовать совместно с обычным атрибутом class
:
|
При использовании таких данных:
|
В результате получится:
|
Список классов элемента обновится при изменении isActive
или hasError
. Например, если hasError
станет true
, то значением атрибута class
будет "static active text-danger"
.
Используемый объект необязательно указывать прямо в шаблоне:
|
|
Результат будет таким же. Можно также использовать и вычисляемые свойства, которые возвращают объект — это очень распространённый и мощный приём:
|
|
Использование массивов
В v-bind:class
можно передать и массив:
|
|
В результате получим:
|
Для переключения классов в массиве, в зависимости от некоторого условия, можно использовать условный оператор в тернарной форме:
|
В этом случае errorClass
будет применён к элементу всегда, а activeClass
— только в случае истинности isActive
.
Однако, такая запись становится слегка громоздкой, особенно если есть несколько классов, задаваемых по условию. Но можно использовать и смешанный синтаксис:
|
Использование с компонентами
Эта секция предполагает знакомство с компонентами Vue. Вы можете спокойно пропустить её сейчас и вернуться позднее.
При использовании атрибута class
на пользовательском компоненте, классы будут добавлены к его корневому элементу. Собственные классы элемента при этом не будут потеряны.
Возьмём, к примеру, такой компонент:
|
Если указать дополнительные классы на компоненте:
|
В результате отрисовки получим:
|
То же самое справедливо для связывания классов с данными:
|
Если isActive
истинно, результирующий HTML будет:
|
Связывание inline-стилей
Использование объектов
Объектная запись для v-bind:style
выглядит почти как CSS, хотя, на самом деле, это объект JavaScript. Для указания свойств CSS можно применять как camelCase, так и kebab-case (не забывайте про кавычки при использовании kebab-case):
|
|
Можно выносить объект стилей из шаблона, чтобы сделать код чище:
|
|
Можно использовать и вычисляемые свойства, возвращающие объекты стилей.
Использование массивов
Запись v-bind:style
с массивом позволяет применить несколько объектов стилей к одному и тому же элементу:
|
Автоматические префиксы
При использовании в v-bind:style
свойств CSS, требующих указания вендорных префиксов, Vue автоматически определит это и добавит подходящие префиксы к применяемым стилям.
Множественные значения
Добавлено в версии 2.3.0+
Начиная с версии 2.3.0+ можно предоставить массив из нескольких (префиксных) значений для свойства style, например:
|
Это приведёт к отображению последнего значения в массиве, поддерживаемого браузером. В этом примере он будет отображать display: flex
для браузеров, которые поддерживают flexbox без префиксов.