Vue.js

Vue.js (также Vue; /vjuː/) — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов^[7]. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.

На данный момент поддерживается создателем Эваном Ю и остальными активными членами основной команды из различных компаний, таких как Netlify, Netguru, Baidu, Livestorm^[8].

Опрос разработчиков о JavaScript, проведенный в 2022 году, показал, что Vue удовлетворяет 77,4 % сообщества^[9]. Vue версии 2 имеет 207 тысяч звезд на GitHub, версия 3 — 43.9 тысяч^[10]. Является третьим по величине проектом в истории GitHub^{[источник не указан 1811 дней]}.

В 2013 году сотрудник Google Эван Ю (Evan You), работая над одним из проектов, пришёл к выводу, что не существует готовых решений для быстрого прототипирования сложных пользовательских интерфейсов веб-приложений: React тогда был на ранней стадии разработки, основными инструментами были такие сложные фреймворки, как AngularJS или ориентированный на MVC-архитектуру Backbone.js, не отличавшиеся простотой и ориентированные на разработку больших приложений. Для преодоления этого пробела Ю начал разработку Vue.js, которая, сохраняя простоту, оказалась пригодна не только для прототипирования, но и для полноценной разработки^[11].

В октябре 2015 года была выпущена версия 1.0 библиотеки, в сентябре 2016 года — версия 2.0.

Начиная с версии 2.0 он поддерживает также рендеринг на стороне сервера, он же SSR (Server-Side Rendering)^[12].

18 сентября 2020 года была выпущена версия Vue.js 3.0.0 «One Piece», по словам разработчиков «обеспечивает улучшенную производительность, меньший размер пакетов, лучшую интеграцию с TypeScript, новые API для решения крупномасштабных задач и прочную основу для будущих итераций фреймворка в долгосрочной перспективе»^[13].

Релиз 3.0 вобрал в себя более 2 лет усилий по разработке, включая более 30 RFC, более 2600 коммитов, 628 запросов от 99 разработчиков, плюс огромный объём работы над разработкой и документацией. Весь код был переписан на более эффективный TypeScript, что даёт преимущества в гибкой разработке.

Также представлен новый набор API Composition^[14].

Разработчики называют Vue.js прогрессивным и постепенно адаптируемым по сравнению с другими веб-фреймворками.

Это позволяет разработчику настроить структуру приложения в соответствии с собственными требованиями. Разработчики считают Vue.js более простым в освоении, чем AngularJS, поскольку API построен намного проще в освоении. В Vue.js можно использовать только знания JavaScript и HTML. Возможно применение Typescript. У Vue.js есть собственная официальная достаточно богатая документация на многих языках, выложенная на vuejs.org^[34], которая может послужить примером в объяснении проектирования и разработки в браузере. В Vue.js реализуется шаблон MVVM, Vue.js предлагает возможность привязки данных на Javascript, так что вывод и ввод данных сопрягаются непосредственно с источником данных. Таким образом, режим ручного определения данных (например, через jQuery) из HTML-DOMне нужен. При этом нет необходимости в никаких дополнительных аннотациях, как в Knockout.js, объявленные в Vue-Element обычные переменные JavaScript включаются в качестве реактивных элементов.

Реактивность означает, что представление в модели MVC изменяется по мере изменения модели. В Vue разработчики просто привязывают представление к соответствующей модели, и Vue автоматически наблюдает за изменениями в модели и перерисовывает представление. Эта функция делает управление состоянием Vue довольно простым и интуитивно понятным.^[35]

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/Массив"    ]  }});

Функциональность экземпляров может быть расширена с помощью компонентов, хранятся в древовидном виде. Компоненты отличаются от экземпляров тем, что они не привязаны к узлам HTML, а содержат собственный шаблон HTML.

 // Определение компонента и глобальная регистрацияVue.component('my-component', {  template: '
 это новый компонент < / div>< / div>'})// Создание экземпляра Vuenew Vue({  el: '#example '})

Шаблон HTML для Компонента

<divid="example"><my-component>my-component>div><divid="example"><div>Это новый компонентdiv>div>

Используя двойные фигурные скобки(синтаксис double-curly), популярные в фреймворкахJavaScript, элементы JavaScript могут быть вставлены в HTML-DOM^[36], при этом элемент связывается в источнике данных из экземпляра Vue. Связывание данных (eng. Databinding) возможен в обоих направлениях («Two way databinding»)^[37], что позволяет изменять данные пользователем. директива model обеспечивает Databinding с элементами Input.

Директивы v-modelне более, чем синтаксический сахар.

HTML-атрибуты позволяют выполнять такие действия, как итерацияцикла по массиву, включение HTML-узлов в DOM только по желанию (v-if), скрытие HTML-узлов (v-show), перехват событий (v-on) или привязка атрибутов к переменным (v-bind). Директивы Vue.js узнаваемы по префиксуv -^[38]. также можно применять фильтры для изменения вывода элементов JavaScript^[39]. собственные директивы и фильтры могут быть определены в виде функций JavaScript.

<ul><liv-for="item in items">    {{ item }}     {{ item | lowercase }} li>ul>

Все экземпляры и компоненты проходят жизненный цикл^[40], он состоит из нескольких этапов, которые можно использовать для вызова собственных функций. В частности, этап 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^[41], директивы, фильтры, компоненты и объекты. В качестве официальных расширений предлагаются Vuex^[42], менеджер состояний, подключенный к Redux,^[43] так и маршрутизатор Vue^[44], компонентный маршрутизатор. В разделе awesome-Vue^[45] поддерживается текущая коллекция расширений. Например, существует расширение для выполнения HTTP-запросов. однако эта была создана как официальная библиотека из Vue.js-Portfolio^[46].

Чтобы лучше адаптироваться к большим проектам, которые удобнее писать используя модульность, Vue допускает создание и сохранение компоненты в отдельных файлах с расширением .vue, называемых также sfc (Single File Component), вместо использования Vue.component для регистрации компонентов. Внутри таких модульных файлов отдельные компоненты HTML, CSS и JavaScript организуются в блоки.^[47]

Разработчики могут использовать инструменты сборки Webpack или Browserify, как для однофайловых, так и для упаковки компонентов.

<template><p>{{ greeting }} Мир!p>template><script>    module.exports = {        data: function () {            return {                greeting: 'Привет'            }        }    }script><stylescoped>    p {        font-size: 2em;        text-align: center;    }style>

• vue-router^[48] — официальный маршрутизатор для Vue.js
• vuex^[42] — Централизованное управление состоянием на основе Flux для Vue.js
• vue-loader^[49] — загрузчик веб-пакетов, который позволяет писать компоненты Vue в формате, называемом однофайловыми компонентами (SFC/Vue Single-File Component).
• Vue Server Renderer^[50] — рендеринг на стороне сервера для Vue.js
• vue-cli^[51] — стандартный инструментарий для быстрой разработки на Vue.js

Vue.js существует в виде развивающейся версии vue-nuxt, и промышленной (production) или стабильной версии.^[52] Версия для разработки позволяет выводить информацию и предупреждения, когда включен режим отладки. Версия, предназначенная для production использования, не поддерживает этот режим.^[53]

Для версии разработки есть расширение для Google-Chrome^[54] и MozillaFirefox^[55], чтобы облегчить отладку приложения.^[56]

• React
• AngularJS
• Next.js

• 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 августа. — ISSN1059-1028.

• vuejs.org — официальный сайт Vue.js
• Getting Started With Vue.jsSitePoint^[англ.] (англ.)
• Vuestic UI - современный Open Source Vue 3 фреймворк, 50+ настраиваемых компонентов.
• Nuxt.js The Intuitive Vue Framework