Руководство
Основы
- Установка
- Введение
- Экземпляр 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 не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.
Семантическое версионирование
Vue следует семантическому версионированию во всех своих официальных проектах для документирования возможностей и поведения. Для недокументированного поведения или описания внутренней логики, изменения описываются в информации о релизах.
Информация о релизах
Версия последнего релиза: 2.7.8
Подробная информация об изменениях в каждой версии доступна на GitHub.
Инструменты разработчика и Vue
При использовании Vue мы рекомендуем установить Vue Devtools в браузере, для большего удобства выполнения проверок и отладки ваших приложений Vue.
Подключение через <script>
Просто скачайте JS-файл и подключите его тегом <script>
на странице. Будет зарегистрирована глобальная переменная Vue
.
Не используйте минифицированную версию во время разработки, иначе вы не будете получать предупреждения о типичных ошибках!
Версия для разработкиС предупреждениями для удобства разработки и отладки
Версия для productionБез предупреждений, 37.32КБ min+gzip
CDN
Для создания прототипов или в целях обучения можно использовать последнюю версию:
|
Для production, мы рекомендуем указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий:
|
Если используете нативные ES-модули, также существует и совместимая с ES-модулями сборка:
|
Исходный код самого npm-пакета также доступен по ссылке cdn.jsdelivr.net/npm/vue.
Vue также доступен на unpkg и cdnjs (cdnjs синхронизируется с npm с некоторой задержкой, из-за чего последняя версия может быть не всегда доступна сразу).
Обязательно прочитайте про отличия в сборках Vue и используйте версию для production на своём опубликованном сайте, заменив vue.js
на vue.min.js
. Это сборка оптимизирована для скорости, а не для удобства разработки.
npm
Рекомендуем использовать npm при создании крупных приложений на Vue. Этот вариант прекрасно работает в паре с инструментами сборки, такими как Webpack и Browserify. Во Vue также есть совместимые с ними инструменты для использования однофайловых компонентов.
|
Инструменты командной строки (CLI)
Vue.js предоставляет официальный инструментарий для командной строки (CLI) для быстрого создания каркаса амбициозных одностраничных приложений. Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. Всего за несколько минут вы получите работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки. Подробнее вы можете изучить в документации Vue CLI.
CLI — это инструмент для тех, кто знаком с Node.js и соответствующими инструментами сборки. Если вы новичок во Vue или инструментах сборки фронтенда, рекомендуем сначала прочитать руководство, не требующее использования инструментов сборки, а уже потом разбираться с CLI.
Объяснение различных сборок
В папке dist/
npm-пакета можно найти много разных сборок Vue.js. Вот краткий обзор отличий между ними:
UMD | CommonJS | ES Module (для сборщиков) | ES Module (для браузеров) | |
---|---|---|---|---|
Полная | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
Полная (production) | vue.min.js | - | - | vue.esm.browser.min.js |
Runtime-only (production) | vue.runtime.min.js | - | - | - |
Термины
Полная: сборка, которая содержит runtime и компилятор шаблонов.
Компилятор: код, который отвечает за компиляцию строковых шаблонов в
render
-функции JavaScript.Runtime: код, который отвечает за создание экземпляров Vue, отрисовку и изменение виртуального DOM и т.д. По сути, это всё, кроме компилятора.
UMD: сборки UMD можно использовать сразу в браузере, подключая тегом
<script>
. По умолчанию в jsDelivr CDN из https://cdn.jsdelivr.net/npm/vue@2.7.8 будет UMD-сборка Runtime + Компилятор (vue.js
).CommonJS: сборки CommonJS предназначены для использования вместе со старыми инструментами сборки, такими как Browserify или Webpack 1. По умолчанию для них (
pkg.main
) будет сборка Runtime-only CommonJS (vue.runtime.common.js
).ES-модули: начиная с версии 2.6, Vue предоставляет две сборки ES-модулей (ESM):
ESM для сборщиков: предназначена для использования с современными системами сборки, такими как webpack 2 или Rollup. Формат ESM разработан для статического анализа, поэтому сборщики могут воспользоваться преимуществами «tree-shaking» и удалить неиспользуемый код из финальной сборки. Файл по умолчанию для этих сборщиков (
pkg.module
) — это Runtime-only сборка для ES-модулей (vue.runtime.esm.js
).ESM для браузеров (только 2.6.0+): предназначена для импорта в современных браузерах через
<script type="module">
.
Runtime + Компилятор vs. Runtime-only
Если нужно компилировать шаблоны на клиенте (например, передаёте строку в опцию template
или монтируете к элементу DOM, используя его HTML в качестве шаблона), вам потребуется компилятор, а значит, полная сборка:
|
При использовании vue-loader
или vueify
шаблоны внутри *.vue
файлов будут скомпилированы в JavaScript ещё на этапе сборки. Поэтому компилятор в итоговой сборке не потребуется и можно использовать сборки runtime-only.
Так как сборки runtime-only примерно на 30% легче, в сравнении с полными, вы должны использовать их всякий раз, когда это возможно. Если вы всё равно хотите использовать полную сборку, вам потребуется настроить псевдоним в сборщике:
Webpack
|
Rollup
|
Browserify
Добавьте в package.json
вашего проекта:
|
Parcel
Добавьте в package.json
вашего проекта:
|
Режим разработки vs. режим production
Режим разработки/production жёстко установлен в UMD-сборках: несжатые файлы для разработки и минифицированные файлы для production.
Сборки CommonJS и ES Module предназначены для инструментов сборки, поэтому мы не предоставляем минифицированных версий для них. Вы ответственны за минификацию итоговой сборки.
Сборки CommonJS и ES Module содержат проверки на process.env.NODE_ENV
для определения режима, в котором они должны выполняться. Вы должны использовать соответствующие возможности систем сборки для переопределения этих переменных окружения, чтобы контролировать режим, в котором Vue будет запускаться. Замена process.env.NODE_ENV
на строковый литерал позволяет минификаторам, таким как UglifyJS, удалять целые блоки кода, предназначенные только для разработки, уменьшая итоговый размер файла.
Webpack
С версии Webpack 4+ можно использовать опцию mode
:
|
Но в Webpack 3 и более ранних версиях необходимо использовать DefinePlugin:
|
Rollup
Используйте rollup-plugin-replace:
|
Browserify
Примените глобальную трансформацию envify для вашей сборки.
|
Подробнее в разделе развёртывания на production.
CSP-окружения
Некоторые окружения, такие как Google Chrome Apps, требуют соблюдения Content Security Policy (CSP), запрещающей использование конструкции new Function()
для исполнения выражений. Полная сборка использует подобные конструкции для компиляции шаблонов, и потому непригодна к использованию в таких окружениях.
С другой стороны, runtime-сборки полностью совместимы с CSP. Если использовать их с Webpack и vue-loader или Browserify и vueify, то шаблоны компилируются на этапе сборки в render
-функции, которые отлично работают в CSP-окружениях.
Сборка dev-версии
Важное замечание: файлы сборки в /dist
на GitHub обновляются только при релизах. Чтобы использовать версию из последних исходников с GitHub, соберите проект самостоятельно:
|
Bower
Только UMD-сборки доступны в Bower.
|
Загрузчики модулей AMD
Все UMD-сборки могут быть напрямую использованы как AMD-модули.