Русская Википедия:Vue.js

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

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

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

История

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

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

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

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

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

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

Версии

Version	Release date	Title
3.2	Шаблон:Dts	The Quintessential Quintuplets^[8]
3.1	Шаблон:Dts	Pluto^[9]
3.0	Шаблон:Dts	One Piece^[10]
2.7	1 июля 2022	Naruto^[11]
2.6	Шаблон:Dts	Macross^[12]
2.5	Шаблон:Dts	Level E^[13]
2.4	Шаблон:Dts	Kill la Kill^[14]
2.3	Шаблон:Dts	JoJo's Bizarre Adventure^[15]
2.2	Шаблон:Dts	Initial D^[16]
2.1	Шаблон:Dts	Hunter X Hunter^[17]
2.0	Шаблон:Dts	Ghost in the Shell^[18]
1.0	Шаблон:Dts	Evangelion^[19]
0.12	Шаблон:Dts	Dragon Ball^[20]
0.11	Шаблон:Dts	Cowboy Bebop^[21]
0.10	Шаблон:Dts	Blade Runner^[22]
0.9	Шаблон:Dts	Animatrix^[23]
0.8	Шаблон:Dts	Шаблон:N/a ^[24]
0.7	Шаблон:Dts	Шаблон:N/a ^[25]
0.6	Шаблон:Dts	VueJS ^[26]

Концепция

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

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

Реактивность

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

Эффекты перехода

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^[29], при этом элемент связывается в источнике данных из экземпляра Vue. Связывание данных (eng. Databinding) возможен в обоих направлениях («Two way databinding»)^[30], что позволяет изменять данные пользователем. директива model обеспечивает Databinding с элементами Input.

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

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

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

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

</ul>

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

Все экземпляры и компоненты проходят жизненный цикл^[33], он состоит из нескольких этапов, которые можно использовать для вызова собственных функций. В частности, этап 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^[34], директивы, фильтры, компоненты и объекты. В качестве официальных расширений предлагаются Vuex^[35], менеджер состояний, подключенный к Redux,^[36] так и маршрутизатор Vue^[37], компонентный маршрутизатор. В разделе awesome-Vue^[38] поддерживается текущая коллекция расширений. Например, существует расширение для выполнения HTTP-запросов. однако эта была создана как официальная библиотека из Vue.js-Portfolio^[39].

Однофайловые компоненты

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

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

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

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

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

Примечания

Шаблон:Примечания

Литература

Ссылки

Шаблон:Official
Getting Started With Vue.js Шаблон:Iw Шаблон:Ref-en
React
AngularJS
Angular (фреймворк)
Библиотека JavaScript
Axios^[50]
Vuejs поддерживается для разработке в Visual Studio 2019 как веб-приложение.^[51]
Vuestic UI- современный Open Source Vue 3 фреймворк, 50+ настраиваемых компонентов.
Vuestic Admin - бесплатный набор компонентов для создания удобной админки на Vue.js.
vueify^[52]—библиотека пользовательского интерфейса 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

Шаблон:JavaScript Шаблон:ECMAScript

[1] Шаблон:Cite web

[2] Шаблон:Cite web

[3] Шаблон:Cite web

[4] Шаблон:Cite web

[5] Шаблон:Cite web

[6] Шаблон:Cite news

[7] Шаблон:Cite web

[8] Шаблон:Cite web

[9] Шаблон:Cite web

[10] Шаблон:Cite web

[11] Шаблон:Cite web

[12] Шаблон:Cite web

[13] Шаблон:Cite web

[14] Шаблон:Cite web

[15] Шаблон:Cite web

[16] Шаблон:Cite web

[17] Шаблон:Cite web

[18] Шаблон:Cite web

[19] Шаблон:Cite web

[20] Шаблон:Cite web

[21] Шаблон:Cite web

[22] Шаблон:Cite web

[23] Шаблон:Cite web

[24] Шаблон:Cite web

[25] Шаблон:Cite web

[26] Шаблон:Cite web

[27] Шаблон:Cite web

[28] Шаблон:Cite web

[29] Шаблон:Cite web

[30] Шаблон:Cite web

[31] Шаблон:Cite web

[32] Шаблон:Cite web

[33] Шаблон:Cite web

[34] Шаблон:Cite web

[:0-35] 35,0 ^35,1 Шаблон:Статья

[36] Шаблон:Cite web

[37] Шаблон:Статья

[38] Шаблон:Статья

[39] Шаблон:Cite web

[40] Шаблон:Cite web Шаблон:Недоступная ссылка

[41] Шаблон:Cite web

[42] Шаблон:Cite web

[43] Шаблон:Cite web

[44] Шаблон:Статья

[45] Шаблон:Cite web

[46] Шаблон:Cite web

[47] Шаблон:Cite web

[48] Шаблон:Cite web

[49] Шаблон:Статья

[50] Шаблон:Cite web

[51] Шаблон:Cite web

[52] Шаблон:Статья

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

[40]

[41]

[42]

[43]

[44]

[45]

[46]

[47]

[48]

[49]

[50]

[51]

[52]

Партнерские ресурсы
Криптовалюты	Обмен криптовалют - www.bestchange.ru Криптовалютная биржа CoinEx Криптовалютная биржа Binance HIVE OS - операционная система для майнинга e4pool - Мультивалютный пул для майнинга.
Магазины	AliExpress — глобальная виртуальная (в Интернете) торговая площадка, предоставляющая возможность покупать товары производителей из КНР; computeruniverse.net - Интернет-магазин компьютеров(Промо код 5 Евро на первую покупку:FWWC3ZKQ);
Хостинг	DigitalOcean - американский провайдер облачных инфраструктур, с главным офисом в Нью-Йорке и с центрами обработки данных по всему миру;
Разное	Викиум - Онлайн-тренажер для мозга Like Центр - Центр поддержки и развития предпринимательства. Gamersbay - лучший магазин по бустингу для World of Warcraft. Ноотропы OmniMind N°1 - Усиливает мозговую активность. Повышает мотивацию. Улучшает память. Санкт-Петербургская школа телевидения - это федеральная сеть образовательных центров, которая имеет филиалы в 37 городах России. Lingualeo.com — интерактивный онлайн-сервис для изучения и практики английского языка в увлекательной игровой форме. Junyschool (Джунискул) – международная школа программирования и дизайна для детей и подростков от 5 до 17 лет, где ученики осваивают компьютерную грамотность, развивают алгоритмическое и креативное мышление, изучают основы программирования и компьютерной графики, создают собственные проекты: игры, сайты, программы, приложения, анимации, 3D-модели, монтируют видео. Умназия - Интерактивные онлайн-курсы и тренажеры для развития мышления детей 6-13 лет SkillBox - это один из лидеров российского рынка онлайн-образования. Среди партнеров Skillbox ведущий разработчик сервисного дизайна AIC, медиа-компания Yoola, первое и самое крупное русскоязычное аналитическое агентство Tagline, онлайн-школа дизайна и иллюстрации Bang! Bang! Education, оператор PR-рынка PACO, студия рисования Draw&Go, агентство performance-маркетинга Ingate, scrum-студия Sibirix, имидж-лаборатория Персона. «Нетология» — это университет по подготовке и дополнительному обучению специалистов в области интернет-маркетинга, управления проектами и продуктами, дизайна, Data Science и разработки. В рамках Нетологии студенты получают ценные теоретические знания от лучших экспертов Рунета, выполняют практические задания на отработку полученных навыков, общаются с экспертами и единомышленниками. Познакомиться со всеми продуктами подробнее можно на сайте https://netology.ru, линейка курсов и профессий постоянно обновляется. StudyBay Brazil – это онлайн биржа для португалоговорящих студентов и авторов! Студент получает уникальную работу любого уровня сложности и больше свободного времени, в то время как у автора появляется дополнительный заработок и бесценный опыт. Автор24 — самая большая в России площадка по написанию учебных работ: контрольные и курсовые работы, дипломы, рефераты, решение задач, отчеты по практике, а так же любой другой вид работы. Сервис сотрудничает с более 70 000 авторов. Более 1 000 000 работ уже выполнено. StudyBay – это онлайн биржа для англоязычных студентов и авторов! Студент получает уникальную работу любого уровня сложности и больше свободного времени, в то время как у автора появляется дополнительный заработок и бесценный опыт.