Vue.js

Vue.js(такжеVue;/vjuː/) —JavaScript-фреймворксоткрытым исходным кодомдля созданияпользовательских интерфейсов. Легко интегрируется в проекты с использованием другихJavaScript-библиотек. Может функционировать каквеб-фреймворкдля разработкиодностраничных приложенийвреактивномстиле.
На данный момент поддерживается создателем Эваном Ю и остальными активными членами основной команды из различных компаний, таких какNetlify,Netguru,Baidu,Livestorm.
Опрос разработчиков о JavaScript, проведенный в 2022 году, показал, что Vue удовлетворяет 77,4 % сообщества. Vue версии 2 имеет 207 тысяч звезд на GitHub, версия 3 — 43.9 тысяч. Является третьим по величине проектом в историиGitHub.
В 2013 году сотрудникGoogleЭван Ю (Evan You), работая над одним из проектов, пришёл к выводу, что не существует готовых решений для быстрогопрототипированиясложных пользовательских интерфейсов веб-приложений:Reactтогда был на ранней стадии разработки, основными инструментами были такие сложные фреймворки, какAngularJSили ориентированный наMVC-архитектуруBackbone.js, не отличавшиеся простотой и ориентированные на разработку больших приложений. Для преодоления этого пробела Ю начал разработку Vue.js, которая, сохраняя простоту, оказалась пригодна не только для прототипирования, но и для полноценной разработки.
В октябре 2015 года была выпущена версия 1.0 библиотеки, в сентябре 2016 года — версия 2.0.
Начиная с версии 2.0 он поддерживает также рендеринг на стороне сервера, он же SSR (Server-Side Rendering).
18 cентября 2020 года была выпущена версия Vue.js 3.0.0 «One Piece», по словам разработчиков «обеспечивает улучшенную производительность, меньший размер пакетов, лучшую интеграцию с TypeScript, новые API для решения крупномасштабных задач и прочную основу для будущих итераций фреймворка в долгосрочной перспективе».
Релиз 3.0 вобрал в себя более 2 лет усилий по разработке, включая более 30 RFC, более 2600 коммитов, 628 запросов от 99 разработчиков, плюс огромный объём работы над разработкой и документацией. Весь код был переписан на более эффективный TypeScript, что даёт преимущества в гибкой разработке.
Также представлен новый набор API Composition.
Разработчики называют Vue.js прогрессивным и постепенно адаптируемым по сравнению с другимивеб-фреймворками.
Это позволяет разработчику настроить структуру приложения в соответствии с собственными требованиями. Разработчики считают Vue.js более простым в освоении, чемAngularJS, посколькуAPIпостроен намного проще в освоении. В Vue.js можно использовать только знанияJavaScriptи HTML. Возможно применение Typescript. УVue.jsесть собственная официальная достаточно богатая документация на многих языках, выложенная на vuejs.org, которая может послужить примером в объяснении проектирования и разработки в браузере. В Vue.js реализуется шаблон MVVM, Vue.js предлагает возможность привязки данных на Javascript, так что вывод и ввод данных сопрягаются непосредственно с источником данных. Таким образом, режимручногоопределения данных (например, через jQuery) изHTML-DOMненужен. При этом нет необходимости в никаких дополнительных аннотациях, как вKnockout.js, объявленные в Vue-Element обычные переменные JavaScript включаются в качествереактивныхэлементов.
Реактивность означает, что представление в модели MVCизменяетсяпо мере изменения модели. В Vue разработчики просто привязывают представление к соответствующей модели, и Vue автоматически наблюдает за изменениями в модели и перерисовывает представление. Эта функция делает управление состоянием Vue довольно простым и интуитивно понятным.
Vue предоставляет различные способы применения эффектов перехода при вставке, обновлении или удалении DOM. Включает следующие инструменты：
Пример приложений Vue
Любое приложение с Vue.js имеет (по крайней мере) один центральный экземпляр. Для каждого HTML-файла возможно любое количество экземпляров. Экземплярпривязываетсяк HTML-узлу с помощью свойстваel(определяемого здесь с помощьюCSS-селектора «body»).
Файл приложения сохраняется как *.js.
Функциональность экземпляров может быть расширена с помощьюкомпонентов, хранятся в древовидном виде. Компоненты отличаются от экземпляров тем, что они не привязаны к узлам HTML, а содержат собственный шаблон HTML.
Шаблон HTML для Компонента
Используя двойныефигурные скобки(синтаксис double-curly), популярные вфреймворкахJavaScript, элементыJavaScriptмогут быть вставлены вHTML-DOM, при этом элемент связывается в источнике данных из экземпляра Vue.Связывание данных(eng. Databinding) возможен в обоих направлениях («Two way databinding»), что позволяет изменять данные пользователем. директиваmodelобеспечивает Databinding с элементами Input.
Директивыv-modelне более, чем синтаксический сахар.
HTML-атрибуты позволяют выполнять такие действия, какитерацияциклапомассиву, включениеHTML-узлов вDOMтолько по желанию(v-if), скрытиеHTML-узлов(v-show), перехват событий(v-on)или привязка атрибутов к переменным(v-bind). Директивы Vue.js узнаваемы попрефиксуv -. также можно применятьфильтрыдля изменения вывода элементовJavaScript. собственные директивы и фильтры могут быть определены в виде функций JavaScript.
Все экземпляры и компоненты проходят жизненный цикл, он состоит из нескольких этапов, которые можно использовать для вызова собственных функций. В частности, этапmountedиспользуется очень часто, поскольку он вызывается сразу после того, как компонент был включен вDOM. Используя функцию Vue$next, можно определить код, который не вызывается до тех пор, пока компонент не будет готов.
Vue.jsможетбыть дополнен расширениями, они могут содержать Mixins, директивы, фильтры, компоненты и объекты. В качестве официальных расширений предлагаются Vuex, менеджер состояний, подключенный кRedux,так и маршрутизатор Vue, компонентный маршрутизатор. В разделе awesome-Vueподдерживается текущая коллекция расширений. Например, существует расширение для выполненияHTTP-запросов. однако эта была создана как официальная библиотека из Vue.js-Portfolio.
Чтобы лучше адаптироваться к большим проектам, которые удобнее писать используямодульность, Vue допускает создание и сохранение компоненты в отдельных файлах с расширением.vue, называемых также sfc (Single File Component), вместо использованияVue.componentдля регистрации компонентов. Внутри таких модульных файлов отдельные компоненты HTML, CSS и JavaScript организуются в блоки.
Разработчики могут использовать инструменты сборки Webpack или Browserify, как для однофайловых, так и для упаковки компонентов.
Vue.js существует в виде развивающейся версии vue-nuxt, и промышленной (production) или стабильной версии.Версия для разработки позволяет выводить информацию и предупреждения, когда включен режим отладки. Версия, предназначенная для production использования, не поддерживает этот режим.
Для версии разработки есть расширение дляGoogle-ChromeиMozillaFirefox, чтобы облегчитьотладкуприложения.