Vue.js
Vue.js | |
---|---|
![]() | |
Тип | библиотека функций, JavaScript-фреймворк, веб-фреймворк и библиотека JavaScript |
Автор | Эван Ю |
Написана на | JavaScript[3] и TypeScript |
Операционная система | кроссплатформенность |
Первый выпуск | февраль 2014[1] |
Последняя версия | |
Репозиторий | github.com/vuejs/core |
Лицензия | лицензия MIT[4] |
Сайт | vuejs.org (англ.) |
![]() |
Vue.js (также Vue; /vjuː/) — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов[5]. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.
На данный момент поддерживается создателем Эваном Ю и остальными активными членами основной команды из различных компаний, таких как Netlify, Netguru, Baidu, Livestorm[6].
Опрос разработчиков о JavaScript, проведенный в 2022 году, показал, что Vue удовлетворяет 77,4 % сообщества[7]. Vue версии 2 имеет 207 тысяч звезд на GitHub, версия 3 — 43.9 тысяч[8]. Является третьим по величине проектом в истории GitHub[источник не указан 1199 дней].
История
В 2013 году сотрудник Google Эван Ю (Evan You), работая над одним из проектов, пришёл к выводу, что не существует готовых решений для быстрого прототипирования сложных пользовательских интерфейсов веб-приложений: React тогда был на ранней стадии разработки, основными инструментами были такие сложные фреймворки, как AngularJS или ориентированный на MVC-архитектуру Backbone.js, не отличавшиеся простотой и ориентированные на разработку больших приложений. Для преодоления этого пробела Ю начал разработку Vue.js, которая, сохраняя простоту, оказалась пригодна не только для прототипирования, но и для полноценной разработки[9].
В октябре 2015 года была выпущена версия 1.0 библиотеки, в сентябре 2016 года — версия 2.0.
Начиная с версии 2.0 он поддерживает также рендеринг на стороне сервера, он же SSR (Server-Side Rendering)[10].
18 cентября 2020 года была выпущена версия Vue.js 3.0.0 «One Piece», по словам разработчиков «обеспечивает улучшенную производительность, меньший размер пакетов, лучшую интеграцию с TypeScript, новые API для решения крупномасштабных задач и прочную основу для будущих итераций фреймворка в долгосрочной перспективе»[11].
Релиз 3.0 вобрал в себя более 2 лет усилий по разработке, включая более 30 RFC, более 2600 коммитов, 628 запросов от 99 разработчиков, плюс огромный объём работы над разработкой и документацией. Весь код был переписан на более эффективный TypeScript, что даёт преимущества в гибкой разработке.
Также представлен новый набор API Composition[12].
Версии
Version | Release date | Title |
---|---|---|
3.2 | 5 августа 2021 | The Quintessential Quintuplets[13] |
3.1 | 7 июня 2021 | Pluto[14] |
3.0 | 18 сентября 2020 | One Piece[15] |
2.7 | 1 июля 2022 | Naruto[16] |
2.6 | 4 февраля 2019 | Macross[17] |
2.5 | 13 октября 2017 | Level E[18] |
2.4 | 13 июля 2017 | Kill la Kill[19] |
2.3 | 27 апреля 2017 | JoJo's Bizarre Adventure[20] |
2.2 | 26 февраля 2017 | Initial D[21] |
2.1 | 22 ноября 2016 | Hunter X Hunter[22] |
2.0 | 30 сентября 2016 | Ghost in the Shell[23] |
1.0 | 27 октября 2015 | Evangelion[24] |
0.12 | 12 июня 2015 | Dragon Ball[25] |
0.11 | 7 ноября 2014 | Cowboy Bebop[26] |
0.10 | 23 марта 2014 | Blade Runner[27] |
0.9 | 25 февраля 2014 | Animatrix[28] |
0.8 | 27 января 2014 | н/д[29] |
0.7 | 24 декабря 2013 | н/д[30] |
0.6 | 8 декабря 2013 | VueJS[31] |
Концепция
Разработчики называют Vue.js прогрессивным и постепенно адаптируемым по сравнению с другими веб-фреймворками.
Это позволяет разработчику настроить структуру приложения в соответствии с собственными требованиями. Разработчики считают Vue.js более простым в освоении, чем AngularJS, поскольку API построен намного проще в освоении. В Vue.js можно использовать только знания JavaScript и HTML. Возможно применение Typescript. У Vue.js есть собственная официальная достаточно богатая документация на многих языках, выложенная на vuejs.org[32], которая может послужить примером в объяснении проектирования и разработки в браузере. В Vue.js реализуется шаблон MVVM, Vue.js предлагает возможность привязки данных на Javascript, так что вывод и ввод данных сопрягаются непосредственно с источником данных. Таким образом, режим ручного определения данных (например, через jQuery) из HTML-DOM не нужен. При этом нет необходимости в никаких дополнительных аннотациях, как в Knockout.js, объявленные в Vue-Element обычные переменные JavaScript включаются в качестве реактивных элементов.
Реактивность
Реактивность означает, что представление в модели MVC изменяется по мере изменения модели. В Vue разработчики просто привязывают представление к соответствующей модели, и Vue автоматически наблюдает за изменениями в модели и перерисовывает представление. Эта функция делает управление состоянием Vue довольно простым и интуитивно понятным.[33]
Эффекты перехода
Vue предоставляет различные способы применения эффектов перехода при вставке, обновлении или удалении DOM. Включает следующие инструменты:
- Автоматически применять CSS классы при переходах и анимации
- Вы можете работать со сторонними библиотеками анимации CSS, такими как Animate.css.
- Используйте JavaScript функции для перехвата перехода, чтобы напрямую управлять DOM
- Может использоваться в сочетании со сторонними библиотеками анимации JavaScript, такими как Velocity.js.
Структура
Пример приложений Vue
Любое приложение с Vue.js имеет (по крайней мере) один центральный экземпляр. Для каждого HTML-файла возможно любое количество экземпляров. Экземпляр привязывается к HTML-узлу с помощью свойства el (определяемого здесь с помощью CSS-селектора «body»).
Файл приложения сохраняется как *.js.
var vm = new Vue({ el: "body", data: { message: "Привет Мир!", items: [ "это", "и", "есть", "Array/Массив" ] } });
Компоненты/Components
Функциональность экземпляров может быть расширена с помощью компонентов, хранятся в древовидном виде. Компоненты отличаются от экземпляров тем, что они не привязаны к узлам HTML, а содержат собственный шаблон HTML.
// Определение компонента и глобальная регистрация Vue.component('my-component', { template: '<div><div> это новый компонент < / div>< / div>' }) // Создание экземпляра Vue new Vue({ el: '#example ' })
Шаблон HTML для Компонента
<!-- HTML-Узел --> <div id="example"> <my-component></my-component> </div> <!--Использования c DOM--> <div id="example"> <div>Это новый компонент</div> </div>
Double Curly Syntax/Двойные фигурные скобки
Используя двойные фигурные скобки (синтаксис double-curly), популярные в фреймворках JavaScript, элементы JavaScript могут быть вставлены в HTML-DOM[34], при этом элемент связывается в источнике данных из экземпляра Vue. Связывание данных (eng. Databinding) возможен в обоих направлениях («Two way databinding»)[35], что позволяет изменять данные пользователем. директива model обеспечивает Databinding с элементами Input.
Директивы v-model
не более, чем синтаксический сахар.
Директивы/Directive.
HTML-атрибуты позволяют выполнять такие действия, как итерация цикла по массиву, включение HTML-узлов в DOM только по желанию (v-if), скрытие HTML-узлов (v-show), перехват событий (v-on) или привязка атрибутов к переменным (v-bind). Директивы Vue.js узнаваемы по префиксу v -[36]. также можно применять фильтры для изменения вывода элементов JavaScript[37]. собственные директивы и фильтры могут быть определены в виде функций JavaScript.
<ul> <li v-for="item in items"> {{ item }} <!-- Вывод значения --> {{ item | lowercase }} <!-- Вывод значения строчными буквами --> </li> </ul>
Жизненный цикл компонентов
Все экземпляры и компоненты проходят жизненный цикл[38], он состоит из нескольких этапов, которые можно использовать для вызова собственных функций. В частности, этап mounted используется очень часто, поскольку он вызывается сразу после того, как компонент был включен в DOM. Используя функцию Vue $next, можно определить код, который не вызывается до тех пор, пока компонент не будет готов.
new Vue({ created: function() { } mounted: function () { //вызывается, когда компонент будет видно, например,через v-if vue или маршрутизатор. console.log('Этот компонент был интегрирован в DOM на'+Date.now()); this.$next(() => console.log('Теперь компонент полностью готов.')) }, unmounted: function() { //Вызывается*, когда компонент удаляется из DOM. removeListener(XY); } })
Модульность
Vue.js может быть дополнен расширениями, они могут содержать Mixins[39], директивы, фильтры, компоненты и объекты. В качестве официальных расширений предлагаются Vuex[40], менеджер состояний, подключенный к Redux,[41] так и маршрутизатор Vue[42], компонентный маршрутизатор. В разделе awesome-Vue[43] поддерживается текущая коллекция расширений. Например, существует расширение для выполнения HTTP-запросов. однако эта была создана как официальная библиотека из Vue.js-Portfolio[44].
Однофайловые компоненты
Чтобы лучше адаптироваться к большим проектам, которые удобнее писать используя модульность, Vue допускает создание и сохранение компоненты в отдельных файлах с расширением .vue, называемых также sfc (Single File Component), вместо использования Vue.component
для регистрации компонентов. Внутри таких модульных файлов отдельные компоненты HTML, CSS и JavaScript организуются в блоки.[45]
Разработчики могут использовать инструменты сборки Webpack или Browserify, как для однофайловых, так и для упаковки компонентов.
<template> <p>{{ greeting }} Мир!</p> </template> <script> module.exports = { data: function () { return { greeting: 'Привет' } } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style>
Основные библиотеки и инструменты
- vue-router[46] — официальный маршрутизатор для Vue.js
- vuex[40] — Централизованное управление состоянием на основе Flux для Vue.js
- vue-loader[47] — загрузчик веб-пакетов, который позволяет писать компоненты Vue в формате, называемом однофайловыми компонентами (SFC/Vue Single-File Component).
- Vue Server Renderer[48] — рендеринг на стороне сервера для Vue.js
- vue-cli[49] — стандартный инструментарий для быстрой разработки на Vue.js
Версии выпусков
Vue.js существует в виде развивающейся версии vue-nuxt, и промышленной (production) или стабильной версии.[50] Версия для разработки позволяет выводить информацию и предупреждения, когда включен режим отладки. Версия, предназначенная для production использования, не поддерживает этот режим.[51]
Для версии разработки есть расширение для Google-Chrome[52] и Mozilla Firefox[53], чтобы облегчить отладку приложения.[54]
См. также
Примечания
- ↑ https://egghead.io/podcasts/evan-you-creator-of-vue-js
- ↑ Release 3.4.34 — 2024.
- ↑ The vue-js Open Source Project on Open Hub: Languages Page — 2006.
- ↑ https://github.com/vuejs/vue/blob/v2.5.17/LICENSE
- ↑ VueJS (неопр.). Simplified JavaScript Jargon. Дата обращения: 10 февраля 2017. Архивировано 11 февраля 2017 года.
- ↑ Meet the Team — Vue.js (англ.). vuejs.org. Дата обращения: 20 сентября 2020. Архивировано 15 января 2022 года.
- ↑ State of JavaScript 2022: Front-end Frameworks (неопр.). web.archive.org. Дата обращения: 14 июня 2023. Архивировано 9 июня 2023 года.
- ↑ Best of JS (англ.). bestofjs.org. Дата обращения: 14 июня 2023. Архивировано 13 июня 2022 года.
- ↑ Filipova, 2016, Vue.js history, p. 10.
- ↑ vuejs/v2.vuejs.org. Documentation for Vue 2 (англ.). GitHub. Дата обращения: 5 марта 2022. Архивировано 17 апреля 2021 года.
- ↑ "186Friday, September 18, 2020". Vue.js News (англ.). 2020-09-18. Архивировано 24 июля 2021. Дата обращения: 5 марта 2022.
- ↑ Composition API FAQ (англ.). v3.Vue.js.org. Дата обращения: 5 марта 2022. Архивировано 9 февраля 2022 года.
- ↑ v3.2.0 Quintessential Quintuplets (англ.). GitHub (5 августа 2021). Дата обращения: 10 августа 2021. Архивировано 10 августа 2021 года.
- ↑ v3.1.0 Pluto (англ.). GitHub (7 июня 2021). Дата обращения: 18 июля 2021. Архивировано 18 июля 2021 года.
- ↑ v3.0.0 One Piece (англ.). GitHub (18 сентября 2020). Дата обращения: 23 сентября 2020. Архивировано 19 сентября 2020 года.
- ↑ v2.7.0 Naruto (англ.). GitHub (1 июля 2022). Дата обращения: 5 января 2023. Архивировано 1 июля 2022 года.
- ↑ v2.6.0 Macross (англ.). GitHub (4 февраля 2019). Дата обращения: 23 сентября 2020. Архивировано 11 ноября 2020 года.
- ↑ v2.5.0 Level E (англ.). GitHub (13 октября 2017). Дата обращения: 23 сентября 2020. Архивировано 18 сентября 2020 года.
- ↑ v2.4.0 Kill la Kill (англ.). GitHub (13 июля 2017). Дата обращения: 23 сентября 2020. Архивировано 9 ноября 2020 года.
- ↑ v2.3.0 JoJo's Bizarre Adventure (англ.). GitHub (27 апреля 2017). Дата обращения: 23 сентября 2020. Архивировано 11 ноября 2020 года.
- ↑ v2.2.0 Initial D (англ.). GitHub (26 февраля 2017). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ v2.1.0 Hunter X Hunter (англ.). GitHub (22 ноября 2016). Дата обращения: 23 сентября 2020. Архивировано 8 ноября 2020 года.
- ↑ v2.0.0 Ghost in the Shell (англ.). GitHub (30 сентября 2016). Дата обращения: 23 сентября 2020. Архивировано 27 октября 2020 года.
- ↑ 1.0.0 Evangelion (англ.). GitHub (27 октября 2015). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ 0.12.0: Dragon Ball (англ.). GitHub (12 июня 2015). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ v0.11.0: Cowboy Bebop (англ.). GitHub (7 ноября 2014). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ v0.10.0: Blade Runner (англ.). GitHub (23 марта 2014). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ v0.9.0: Animatrix (англ.). GitHub (25 февраля 2014). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ v0.8.0 (англ.). GitHub (27 января 2014). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ v0.7.0 (англ.). GitHub (24 декабря 2013). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ 0.6.0: VueJS (англ.). GitHub (8 декабря 2013). Дата обращения: 23 сентября 2020. Архивировано 13 апреля 2021 года.
- ↑ Introduction: What is Vue.js? /Введение: что такое Vue.js (неопр.). Дата обращения: 19 сентября 2020. Архивировано 9 марта 2019 года.
- ↑ Reactivity in Depth — Vue.js (англ.). vuejs.org (19 сентября 2017). Дата обращения: 19 сентября 2020. Архивировано 6 мая 2021 года.
- ↑ Template Syntax — Vue.js (англ.). vuejs.org. Дата обращения: 19 сентября 2020. Архивировано 4 ноября 2021 года.
- ↑ Form Input Bindings — Vue.js (англ.). vuejs.org. Дата обращения: 19 сентября 2020. Архивировано 6 октября 2020 года.
- ↑ атрибуты (неопр.) (2016). Дата обращения: 19 сентября 2020. Архивировано 13 августа 2020 года.
- ↑ фильтры Filters (неопр.) (2016). Дата обращения: 19 сентября 2020. Архивировано 16 сентября 2020 года.
- ↑ Жизненный цикл (неопр.) (июнь 2016). Дата обращения: 19 сентября 2020. Архивировано 19 сентября 2020 года.
- ↑ Mixins — Vue.js (англ.). vuejs.org. Дата обращения: 19 сентября 2020. Архивировано 19 сентября 2020 года.
- ↑ 1 2 vuejs/vuex. — 2018. Архивировано 16 сентября 2020 года.
- ↑ Redux - A predictable state container for JavaScript apps. | Redux (англ.). redux.js.org. Дата обращения: 19 сентября 2020. Архивировано 20 сентября 2020 года.
- ↑ Vue Router-Маршрутизатор.. — 2020-09-19. Архивировано 18 сентября 2020 года.
- ↑ vuejs/Awesome-vue. Архивировано 19 сентября 2020 года.
- ↑ Evan You. Retiring vue-resource – The Vue Point. (англ.). Medium (ноябрь 2016). Дата обращения: 19 сентября 2020. Архивировано 8 ноября 2020 года.
- ↑ Однофайловые компоненты — Vue.js (рус.). ru.vuejs.org. Дата обращения: 20 сентября 2020. (недоступная ссылка)
- ↑ Introduction | Vue Router (англ.). router.vuejs.org. Дата обращения: 20 сентября 2020. Архивировано 18 сентября 2020 года.
- ↑ Introduction | Vue Loader (англ.). vue-loader.vuejs.org. Дата обращения: 19 сентября 2020. Архивировано 16 сентября 2020 года.
- ↑ Руководство по рендерингу на стороне сервера Vue.js|Руководство по Vue SSR (неопр.). ssr.vuejs.org. Дата обращения: 20 сентября 2020. Архивировано 18 сентября 2020 года.
- ↑ vuejs/vue-cli. — 2020-09-19. Архивировано 16 сентября 2020 года.
- ↑ Installation — Vue.js (англ.). vuejs.org. Дата обращения: 19 сентября 2020. Архивировано 20 сентября 2020 года.
- ↑ API — Vue.js (англ.). vuejs.org. Дата обращения: 19 сентября 2020. Архивировано 19 сентября 2020 года.
- ↑ Vue.js devtools (рус.). chrome.google.com. Дата обращения: 19 сентября 2020. Архивировано 18 сентября 2020 года.
- ↑ Vue.js devtools –Extension for Firefox 🦊 Firefox (амер. англ.). addons.mozilla.org. Дата обращения: 19 сентября 2020. Архивировано 12 сентября 2020 года.
- ↑ Extension extension расширение Browser devtools для отладки Vue.приложения vuejs/vue-devtools (англ.). Архивировано 19 сентября 2020 года.
Литература
- Callum Macrae. Vue.js: Up and Running. — O’Reilly, 2017. — 219 с. — ISBN 9781491997246.
- Olga Filipova. Learning Vue.js 2 Learn how to build amazing and complex reactive web applications easily with Vue.js. — Packt Publishing Ltd, 2016. — 334 с. — ISBN 9781786461131.
- Alex Kyriakidis, Kostas Maniatis. The Majesty of Vue.js. — Packt Publishing Ltd, 2016. — 230 с. — ISBN 9781787125209.
- Klint Finley. The Solo JavaScript Developer Challenging Google and Facebook // Wired. — 2018. — 23 августа. — ISSN 1059-1028.
Ссылки
- vuejs.org — официальный сайт Vue.js
- Getting Started With Vue.js SitePoint[англ.] (англ.)
- Vuestic UI - современный Open Source Vue 3 фреймворк, 50+ настраиваемых компонентов.
- Nuxt.js The Intuitive Vue Framework