Vue.js (обычно называемые Vue ; выраженно / v J ¯u / , как "вид" [4] ) является открытым исходным кодом Model-View-ViewModel переднего конца JavaScript рамкой для создания пользовательских интерфейсов и приложений с одним страниц . [11] Он был создан Эваном Ю и поддерживается им и остальными активными членами основной команды. [12]
Автор (ы) оригинала | Эван Ю |
---|---|
Первый выпуск | Февраль 2014 г . [1] |
Стабильный выпуск | 3.0.11 [2] / 1 апреля 2021 г . |
Репозиторий | |
Написано в | Машинопись |
Размер | 33,30 КБ мин + gzip |
Тип | Фреймворк JavaScript |
Лицензия | Лицензия MIT [3] |
Веб-сайт | vuejs |
Обзор
Vue.js имеет постепенно адаптируемую архитектуру, которая фокусируется на декларативном рендеринге и композиции компонентов. Основная библиотека ориентирована только на слой представления. [13] Расширенные функции, необходимые для сложных приложений, такие как маршрутизация , управление состоянием и инструменты сборки , предлагаются через официально поддерживаемые библиотеки и пакеты. [14]
Vue.js позволяет расширять HTML с помощью атрибутов HTML, называемых директивами. [15] Директивы предлагают функциональные возможности HTML- приложениям и могут быть либо встроенными, либо определяемыми пользователем.
История
Vue был создан Эван Ю после работы в Google с использованием AngularJS в ряде проектов. Позже он резюмировал свой мыслительный процесс: «Я подумал, что, если бы я мог просто извлечь ту часть, которая мне действительно нравится в Angular, и создать что-то действительно легкое». [16] Первая фиксация исходного кода проекта была датирована июлем 2013 года, а Vue был впервые выпущен в феврале 2014 года.
Версии
Версия | Дата выпуска | Заголовок |
---|---|---|
3.0 | 18 сентября 2020 г. | One Piece [17] |
2,6 | 4 февраля 2019 г., | Макросс [18] |
2,5 | 13 октября 2017 г. | Уровень E [19] |
2,4 | 13 июля 2017 г. | Kill la Kill [20] |
2.3 | 27 апреля 2017 г. | Причудливое приключение Джоджо [21] |
2.2 | 26 февраля 2017 г. | Начальный D [22] |
2.1 | 22 ноября 2016 г. | Хантер Х Хантер [23] |
2.0 | 30 сентября 2016 г. | Призрак в доспехах [24] |
1.0 | 27 октября 2015 г. | Евангелион [25] |
0,12 | 12 июня 2015 г. | Жемчуг дракона [26] |
0,11 | 7 ноября 2014 г. | Ковбой Бибоп [27] |
0,10 | 23 марта 2014 г. | Бегущий по лезвию [28] |
0,9 | 25 февраля 2014 г. | Аниматрикс [29] |
0,8 | 27 января 2014 г. | Не указано [30] |
0,7 | 24 декабря 2013 г. | Не указано [31] |
0,6 | 8 декабря 2013 г. | VueJS [32] |
Функции
Составные части
Компоненты Vue расширяют базовые элементы HTML для инкапсуляции кода многократного использования. На высоком уровне компоненты - это настраиваемые элементы, к которым компилятор Vue прикрепляет поведение. В Vue компонент по сути является экземпляром Vue с предопределенными параметрами. [33] Приведенный ниже фрагмент кода содержит пример компонента Vue. Компонент представляет кнопку и печатает количество нажатий на кнопку:
< template > < div id = "tuto" > < кнопка v-bind: initial-count = "0" > button-clicked > div > template >< скрипт > Vue . Компонент ( 'Кнопка щелкнул' , { реквизита : [ 'InitialCount' ], данные : () => ({ Количество : 0 , }), шаблон : «Кнопка Кликов {{ count}} раз ' на:>, вычислено : { countTimesTwo () { return this . count * 2 ; } }, watch : { count ( newValue , oldValue ) { console . log ( `Значение count изменено с $ { OldValue } до $ { новое_значение } .` ); } }, методы : { OnClick () { это . кол + = 1 ; } }, установлен () { это . кол = это . InitialCount ; } });новый Vue ({ el : '#tuto' , }); скрипт >
Шаблоны
Vue использует синтаксис шаблона на основе HTML, который позволяет привязать визуализированную DOM к данным базового экземпляра Vue. Все шаблоны Vue представляют собой действительный HTML-код, который может анализироваться браузерами, соответствующими спецификациям, и анализаторами HTML . Vue компилирует шаблоны в виртуальные функции рендеринга DOM . Виртуальная объектная модель документа (или «DOM») позволяет Vue отображать компоненты в своей памяти перед обновлением браузера. В сочетании с системой реактивности Vue может рассчитать минимальное количество компонентов для повторного рендеринга и применить минимальное количество манипуляций с DOM при изменении состояния приложения.
Пользователи Vue могут использовать синтаксис шаблона или напрямую писать функции рендеринга с использованием гиперсрипта либо через вызовы функций, либо через JSX . [34] Функции рендеринга позволяют создавать приложения из программных компонентов . [35]
Реактивность
Vue имеет систему реактивности, которая использует простые объекты JavaScript и оптимизированный повторный рендеринг. Каждый компонент отслеживает свои реактивные зависимости во время рендеринга, поэтому система точно знает, когда выполнять повторный рендеринг, а какие компоненты - повторно рендерить. [36]
Переходы
Vue предоставляет множество способов применения эффектов перехода, когда элементы вставляются, обновляются или удаляются из DOM . Сюда входят инструменты для:
- Автоматически применять классы для переходов и анимации CSS
- Интегрируйте сторонние библиотеки анимации CSS, такие как Animate.css
- Используйте JavaScript для непосредственного управления DOM во время перехватчиков перехода
- Интегрируйте сторонние библиотеки анимации JavaScript, такие как Velocity.js
Когда элемент, заключенный в компонент перехода, вставляется или удаляется, происходит следующее:
- Vue автоматически определит, применены ли к целевому элементу переходы CSS или анимация. Если это так, классы перехода CSS будут добавлены / удалены в соответствующее время.
- Если компонент перехода предоставил перехватчики JavaScript, эти перехватчики будут вызываться в соответствующее время.
- Если переходы / анимация CSS не обнаружены и не предусмотрены перехватчики JavaScript, операции DOM для вставки и / или удаления будут выполнены немедленно в следующем кадре. [37] [38]
Маршрутизация
Традиционным недостатком одностраничных приложений (СПА) является невозможность поделиться ссылками на точную «подстраницу» на определенной веб-странице. Поскольку SPA обслуживают своих пользователей только одним ответом на основе URL-адреса от сервера (обычно это index.html или index.vue), создание закладок для определенных экранов или совместное использование ссылок на определенные разделы обычно затруднено, если вообще возможно. Чтобы решить эту проблему, многие клиентские маршрутизаторы разграничивают свои динамические URL-адреса с помощью « хэш-кода » (#!), Например page.com/#!/ . Однако с HTML5 большинство современных браузеров поддерживают маршрутизацию без хэшбэга.
Vue предоставляет интерфейс для изменения того, что отображается на странице, на основе текущего пути URL - независимо от того, как он был изменен (будь то ссылка по электронной почте, обновление или ссылки на странице). Кроме того, использование интерфейсного маршрутизатора позволяет преднамеренно изменять путь браузера, когда определенные события браузера (т. Е. Щелчки) происходят на кнопках или ссылках. Сам Vue не имеет внешней хэшированной маршрутизации. Но пакет «vue-router» с открытым исходным кодом предоставляет API для обновления URL-адреса приложения, поддерживает кнопку «Назад» (переход по истории) и сброс пароля электронной почты или ссылки для проверки электронной почты с параметрами URL-адреса аутентификации. Он поддерживает сопоставление вложенных маршрутов с вложенными компонентами и предлагает детальный контроль перехода. С помощью Vue разработчики уже составляют приложения из небольших строительных блоков, составляющих более крупные компоненты. При добавлении vue-router в микс компоненты должны быть просто сопоставлены с маршрутами, к которым они принадлежат, а родительские / корневые маршруты должны указывать, где должны отображаться дочерние элементы. [39]
< div id = "app" > < router-view > router-view > div >...< script > ... const User = { template : ' User {{$ route.params.id}} ' };const router = new VueRouter ({ маршруты : [ { путь : '/ пользователь /: идентификатор' , компонент : пользователь } ] }); ... script >
Код выше:
- Устанавливает внешний маршрут в
websitename.com/user/
. - Что будет отображаться в компоненте User, определенном в (const User ...)
- Позволяет компонент пользователя передать в определенный идентификатор пользователя , который набирался в URL с помощью клавиши Params в $ для маршрута объекта:
$route.params.id
. - Этот шаблон (который зависит от параметров, переданных в маршрутизатор) будет отображаться
внутри приложения DOM div #. - Окончательно сгенерированный HTML-код для вводящего:
websitename.com/user/1
будет:
< div id = "app" > < div > < div > Пользователь 1 div > div > div >
[40]
Экосистема
Основная библиотека поставляется с инструментами и библиотеками, разработанными как основной командой, так и участниками.
Официальный инструментарий
- Devtools - расширение Browser devtools для отладки приложений Vue.js
- Vue CLI - стандартный инструментарий для быстрой разработки на Vue.js
- Vue Loader - загрузчик веб-пакетов, который позволяет писать компоненты Vue в формате, называемом однофайловыми компонентами (SFC).
Официальные библиотеки
- Vue Router - официальный маршрутизатор для Vue.js
- Vuex - Централизованное управление состоянием на основе Flux для Vue.js
- Vue Server Renderer - рендеринг на стороне сервера для Vue.js
Смотрите также
- Сравнение фреймворков JavaScript
- Реагировать
- AngularJS
- Угловой
- Квазар Фреймворк
- Фреймворк JavaScript
- Библиотека JavaScript
- Модель – представление – ViewModel
- Nuxt.js
Источники
Эта статья включает текст из бесплатного контента . Под лицензией MIT License License / разрешения на Wikimedia Commons . Текст взят из Vue.js Guide , Vue.js.
Рекомендации
- ^ «Первая неделя запуска Vue.js» . Evan Вы .
- ^ «Выпуск v3.0.11» .
- ^ "vue / ЛИЦЕНЗИЯ" . GitHub . Проверено 17 апреля 2017 года .
- ^ "Руководство: что такое Vue.js?" . Vue.js . Проверено 3 января 2020 года .
- ^ Макрэ, Каллум (2018). Vue.js: Готово: создание доступных и эффективных веб-приложений . O'Reilly Media . ISBN 9781491997215.
- ^ Нельсон, Бретт (2018). Знакомство с Vue.js: научитесь создавать одностраничные приложения в Vue с нуля . Апресс . ISBN 9781484237816.
- ^ Йербург, Эдд (2019). Тестирование Vue.js приложений . Публикации Мэннинга . ISBN 9781617295249.
- ^ Фриман, Адам (2018). Pro Vue.js 2 . Апресс . ISBN 9781484238059.
- ^ Франклин, Джек; Wanyoike, Майкл; Бушефра, Ахмед; Сайлас, Кингсли; Кэмпбелл, Чад А .; Жак, Нильсон; Омоле, Олаинка; Малдерс, Майкл (2019). Работа с Vue.js . SitePoint . ISBN 9781492071440.
- ^ «Введение - Vue.js» . Проверено 11 марта 2017 года .
- ^ [5] [6] [7] [8] [9] [10]
- ^ «Познакомьтесь с командой - Vue.js» . vuejs.org . Проверено 23 сентября 2019 года .
- ^ «Введение - Vue.js» . vuejs.org . Проверено 27 мая 2020 года .
- ^ «Эван создает Vue.js | Patreon» . Патреон . Проверено 11 марта 2017 года .
- ^ «Что такое Vue.js» . www.w3schools.com . Проверено 21 января 2020 года .
- ^ "Между проводами | Эван Ю" . Между проводами . 3 ноября 2016 года в архив с оригинала на 3 июня 2017 года . Проверено 26 августа 2017 года .
- ^ «v3.0.0 One Piece» . GitHub. 18 сентября 2020 . Проверено 23 сентября 2020 года .
- ^ «v2.6.0 Macross» . GitHub. 4 февраля 2019 . Проверено 23 сентября 2020 года .
- ^ «v2.5.0 уровень E» . GitHub. 13 октября 2017 . Проверено 23 сентября 2020 года .
- ^ «v2.4.0 Kill la Kill» . GitHub. 13 июля 2017 года . Проверено 23 сентября 2020 года .
- ^ «v2.3.0 Причудливые приключения Джоджо» . GitHub. 27 апреля 2017 года . Проверено 23 сентября 2020 года .
- ^ "v2.2.0 Начальный D" . GitHub. 26 февраля 2017 года . Проверено 23 сентября 2020 года .
- ^ «v2.1.0 Hunter X Hunter» . GitHub. 22 ноября 2016 . Проверено 23 сентября 2020 года .
- ^ «v2.0.0 Призрак в доспехах» . GitHub. 30 сентября 2016 . Проверено 23 сентября 2020 года .
- ^ «1.0.0 Евангелион» . GitHub. 27 октября 2015 года . Проверено 23 сентября 2020 года .
- ^ «0.12.0: Жемчуг дракона» . GitHub. 12 июня 2015 . Проверено 23 сентября 2020 года .
- ^ «v0.11.0: Ковбой Бибоп» . GitHub. 7 ноября 2014 . Проверено 23 сентября 2020 года .
- ^ «v0.10.0: Бегущий по лезвию» . GitHub. 23 марта 2014 . Проверено 23 сентября 2020 года .
- ^ «v0.9.0: Animatrix» . GitHub. 25 февраля 2014 . Проверено 23 сентября 2020 года .
- ^ «v0.8.0» . GitHub. 27 января 2014 . Проверено 23 сентября 2020 года .
- ^ «v0.7.0» . GitHub. 24 декабря 2013 . Проверено 23 сентября 2020 года .
- ^ «0.6.0: VueJS» . GitHub. 8 декабря 2013 . Проверено 23 сентября 2020 года .
- ^ «Компоненты - Vue.js» . Проверено 11 марта 2017 года .
- ^ «Синтаксис шаблона - Vue.js» . Проверено 11 марта 2017 года .
- ^ "Vue 2.0 уже здесь!" . Vue Point . 30 сентября 2016 . Проверено 11 марта 2017 года .
- ^ «Глубокая реактивность - Vue.js» . Проверено 11 марта 2017 года .
- ^ «Эффекты перехода - Vue.js» . Проверено 11 марта 2017 года .
- ^ «Переходное состояние - Vue.js» . Проверено 11 марта 2017 года .
- ^ «Маршрутизация - Vue.js» . Проверено 11 марта 2017 года .
- ^ Ты, Эван. «Вложенная маршрутизация Vue (2)» . Домашняя страница Vue (подстраница) . Проверено 10 мая 2017 года .
Внешние ссылки
- Официальный веб-сайт