Vue.js

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

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

Опрос разработчиков о JavaScript, проведенный в 2022 году, показал, что Vue удовлетворяет 77,4 % сообщества. Vue версии 2 имеет 204 тысячи звезд на GitHub, версия 3 — 38 тысяч. Является третьим по величине проектом в истории GitHub[*источник не указан 774 дня*].

## История

В 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 более простым в освоении, чем 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. Включает следующие инструменты：

* Автоматически применять CSS классы при переходах и анимации
* Вы можете работать со сторонними библиотеками анимации CSS, такими как Animate.css.
* Используйте JavaScript функции для перехвата перехода, чтобы напрямую управлять DOM

* Может использоваться в сочетании со сторонними библиотеками анимации JavaScript, такими как Velocity.js.

## Структура

Любое приложение с 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 для Компонента

```
<div id="example">
  <my-component></my-component>
</div>

<div id="example">
  <div>Это новый компонент</div>
</div>

```

### Double Curly Syntax/Двойные фигурные скобки

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

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

### Директивы/Directive.

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

```
<ul>
  <li v-for="item in items">
     {{ item }}
    {{ item | lowercase }}
 </li>

</ul>

```

### Жизненный цикл компонентов

Все экземпляры и компоненты проходят жизненный цикл, он состоит из нескольких этапов, которые можно использовать для вызова собственных функций. В частности, этап *mounted* используется очень часто, поскольку он вызывается сразу после того, как компонент был включен в DOM. Используя функцию Vue *$next*, можно определить код, который не вызывается до тех пор, пока компонент не будет готов.

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

```

### Модульность

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, как для однофайловых, так и для упаковки компонентов.

```
<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 — официальный маршрутизатор для Vue.js
* vuex — Централизованное управление состоянием на основе Flux для Vue.js
* vue-loader — загрузчик веб-пакетов, который позволяет писать компоненты Vue в формате, называемом однофайловыми компонентами (SFC/Vue Single-File Component).
* Vue Server Renderer — рендеринг на стороне сервера для Vue.js
* vue-cli — стандартный инструментарий для быстрой разработки на Vue.js

### Версии выпусков

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

Для версии разработки есть расширение для Google-Chrome и Mozilla Firefox, чтобы облегчить отладку приложения.

## Примечания

1. ↑ Разработка коммерческого программного обеспечения Vue