Vue.js

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

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

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

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

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

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

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

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

Пример приложений Vue

Любое приложение с Vue.js имеет (по крайней мере) один центральный экземпляр. Для каждого HTML-файла возможно любое количество экземпляров. Экземпляр привязывается к HTML-узлу с помощью свойства el (определяемого здесь с помощью CSS-селектора «body»).

Файл приложения сохраняется как *.js.

var vm = new Vue({
  el: "body",
  data: {
    message: "Привет Мир!",
    items: [
      "это",
      "и",
      "есть",
      "Array/Массив"
    ]
  }
});

 // Определение компонента и глобальная регистрация

Vue.component('my-component', {

  template: '<div><div> это новый компонент < / div>< / div>'

})

// Создание экземпляра Vue

new Vue({

  el: '#example '

})

<!-- HTML-Узел -->
<div id="example">
  <my-component></my-component>
</div>

<!--Использования c DOM-->
<div id="example">
  <div>Это новый компонент</div>
</div>

<ul>
 <li v-for="item in items">
    {{ item }} <!-- Вывод значения -->
    {{ item | lowercase }} <!-- Вывод значения строчными буквами -->
 </li>

</ul>

new Vue({
  mounted: function () {
//вызывается, когда компонент будет видно, например,через v-if vue или маршрутизатор.
    console.log('Этот компонент был интегрирован в DOM на'+Date.now());
    this.$next(() => console.log('Теперь компонент полностью готов.'))
  },
  destroyed: function() {
    //Вызывается*, когда компонент удаляется из DOM.
    removeListener(XY);
  }
})

Чтобы лучше адаптироваться к это полезно для больших проектов, где может потребоваться модуляризация, Vue может и сохраняется такие компоненты как отдельный файл с расширением .vue как определения «компонентов одного файла», вместо использования Vue.componentдля зарегистрированные компонентов. Внутри отдельные файловые компоненты HTML, CSS и JavaScript вставляются в блоки.[42]

Разработчики могут использовать инструменты сборки 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>

• 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 (англ.)
• React
• AngularJS
• Angular (фреймворк)
• Библиотека JavaScript
• Axios[1]
• Vuejs поддерживается для разработке в Visual Studio 2019 как веб-приложение.[2]
• vueify[3]—библиотека пользовательского интерфейса Vue с красиво созданными компонентами в виде Material Design.
• Next.js
• Nuxt.js The Intuitive Vue Framework
• Model-View-ViewModel
• Vue.js fwdays'20 Конференція присвячена Vue.js
• The ultimate learning resource for Vue developers

1. Using Axios to Consume APIs — Vue.js (англ.). vuejs.org. Дата обращения: 20 сентября 2020.
2. Mikejo5000. Краткое руководство. Создание первого приложения Vue.js - Visual Studio (рус.). docs.microsoft.com. Дата обращения: 19 сентября 2020.
3. vuejs/vueify. — 2020-08-02.