Руководство
Основы
- Установка
- Введение
- Экземпляр 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, документация на русском здесь.
Однофайловые компоненты
Введение
Во многих проектах, глобальные компоненты определяются посредством Vue.component
, с последующим new Vue({ el: '#container' })
для указания элемента-контейнера в теле каждой страницы.
Для проектов малого и среднего размера, в которых JavaScript используется лишь для некоторых страниц, этот подход может прекрасно работать. В более же сложных проектах или в случаях, когда весь ваш фронтенд управляется JavaScript, явными становятся следующие недостатки:
- Глобальное определение заставляет давать уникальное имя каждому компоненту
- Строковым шаблонам не хватает подсветки синтаксиса. Кроме того, приходится использовать уродливые слэши для многострочного HTML.
- Нет модульной поддержки CSS — в то время как HTML и JavaScript разбиваются на модули-компоненты, CSS оказывается за бортом.
- Отсутствие шага сборки ограничивает нас только HTML и ES5 JavaScript, не позволяя использовать препроцессоры вроде Pug (бывший Jade) и Babel
Все эти недостатки решаются однофайловыми компонентами с расширением .vue
, использование которых позволяют такие инструменты как Webpack и Browserify.
Вот простой пример файла, который мы назовём Hello.vue
:
Мы получили:
Как и обещалось, мы также можем использовать препроцессоры, такие как Pug, Babel (с модулями ES2015) и Stylus для создания более ясных и функциональных компонентов.
Перечисленные языки даны только для примера. С тем же успехом можно использовать Buble, TypeScript, SCSS, PostCSS — или любые другие пре- или постпроцессоры по вкусу. При использовании Webpack вместе с vue-loader
, вы также получаете прекрасную поддержку CSS-модулей.
Что насчёт разделения ответственности?
Одна важная вещь, что следует отметить — разделение ответственности это не то же самое, что разделение на файлы по типу. В современной разработке UI мы обнаружили, что вместо разделения кодовой базы на три огромных слоя, что тесно переплетаются друг с другом, имеет больше смысла делить их на слабо связанные компоненты и компоновать уже их. Внутри компонента, его шаблон, логика и стили неразрывно связаны между собой, что позволяет сделать компонент более сплочённым и удобным в поддержке.
Если вам не нравится идея однофайловых компонентов, вы также можете пользоваться возможностями горячей замены модулей и прекомпиляцией, выделив JavaScript и CSS в отдельные файлы:
|
Начало работы
Песочница с примером
Если вы хотите прямо сейчас поиграть с однофайловыми компонентами — начните с этого простого todo приложения на CodeSandbox.
Для новичков в модульных системах сборки JavaScript
С .vue
-компонентами, мы входим во вселенную продвинутых JavaScript-приложений. Это значит, что если вы этого ещё не сделали, нужно будет освоить некоторые дополнительные инструменты:
Node Package Manager (npm): Прочитайте руководство по началу работы о том как устанавливать пакеты.
Современный JavaScript стандартов ES2015/16: Прочитайте руководство по ES2015 от Babel. Нет необходимости запоминать все новые возможности, но держите эту страничку под рукой в качестве справочника.
После того как вы уделили время этим ресурсам, мы советуем вам посмотреть на Vue CLI 3. Следуйте инструкциям, и очень скоро у вас будет рабочий проект с .vue
-компонентами, ES2015, Webpack и горячей перезагрузкой модулей.
Для продвинутых пользователей
CLI позаботится о большинстве настроек конфигурации сборки для вас, но при необходимости позволяет настроить любые детали через опции конфигурации.
Если вы предпочитаете создавать конфигурацию сборки с нуля, то необходимо вручную настроить webpack для работы с vue-loader. Чтобы узнать больше о webpack, обратитесь к его официальной документации и Webpack Academy.