Vue.js
Vue (или Vue.js) — это популярный JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов и веб-приложений. Его создал разработчик Эван Ю (Evan You) в 2014 году, объединив лучшие идеи из Angular и React, но сделав технологию более простой для изучения.
В отличие от React, Vue изначально позиционируется как прогрессивный фреймворк. Это значит, что его можно легко внедрить в существующий проект как небольшую библиотеку или масштабировать до полноценного инструмента для огромных приложений. Главные особенности:
- Низкий порог входа. Для старта достаточно знать базовый HTML, CSS и JavaScript.
- Однофайловые компоненты (.vue). Код разметки (HTML), логика (JS) и стили (CSS) одного элемента хранятся в одном файле. Это очень удобно для поддержки.
- Двустороннее связывание данных. Изменения в коде сразу отображаются на экране, и наоборот (например, при вводе текста в форму данные в коде обновляются автоматически).
- Virtual DOM. Как и React, Vue использует виртуальную копию страницы для быстрой и точечной перезаписи элементов.
React — это библиотека. К ней нужно самостоятельно подбирать инструменты для роутинга (перехода по страницам) и управления состоянием.
Vue — это полноценная экосистема. Все главные инструменты (Vue Router, Pinia/Vuex) созданы и поддерживаются самой командой фреймворка, что снижает проблемы с совместимостью.
Vue можно встроить в существующую страницу кусочком или развернуть в полноценное SPA: шаблоны в .vue-файлах, реактивные данные и официальный стек (Router, Pinia, Vite).
Материалы
| Шаг | Статья |
|---|---|
| 1 | Первая программа |
| 2 | Обзор Vue |
| 3 | Реактивность и Composition API |
| 4 | Router, Pinia и Vite |
| 5 | SSR, тесты, production |
| — | Справочник |
| — | Vue/Svelte — Lab |
Порядок
Первая программа на Vue.js → Vue — реактивность и Composition API → Vue — Router, Pinia и Vite. Обзор архитектуры — Vue.js. Fullstack — Fullstack на JavaScript — API и фронтенд.