Vue.js

Vue.js

Оригинальный автор(ы)	Эван Ю
Разработчик(и)	Эван Ю и основная команда
Первоначальный выпуск	февраль 2014 г ( 2014-02 )
Стабильная версия	3.4.31 / 28 июня 2024 г ( 28.06.2024 )
Репозиторий	github .с /vuejs /основной
Написано в	Машинопись
Платформа	Веб-платформа
Размер	33,9 КБ Минимум + gzip
Тип	библиотека JavaScript
Лицензия	МОЯ лицензия
Веб-сайт	вуэйс .org

Vue.js (обычно называемый Vue ; произносится как «представление»). ) — это интерфейсная модель-представление-модель представления с открытым исходным кодом среда JavaScript для создания пользовательских интерфейсов и одностраничных приложений . Он был создан Эваном Ю и поддерживается им и остальными активными членами основной команды.

Обзор

Vue.js имеет постепенно адаптируемую архитектуру, ориентированную на декларативный рендеринг и композицию компонентов. Основная библиотека ориентирована только на уровень представления. Расширенные функции, необходимые для сложных приложений, такие как маршрутизация , управление состоянием и инструменты сборки, предлагаются через официально поддерживаемые вспомогательные библиотеки и пакеты.

Vue.js позволяет расширять HTML атрибутами HTML, называемыми директивами. Директивы предоставляют функциональные возможности HTML- приложениям и могут быть встроенными или определяемыми пользователем.

История

Vue был создан Эваном Ю после работы в Google с использованием AngularJS в нескольких проектах. Позже он подытожил свой мыслительный процесс: «Я подумал, а что, если бы я мог просто выделить ту часть Angular, которая мне действительно понравилась, и создать что-то действительно легкое». Первая передача исходного кода проекта была датирована июлем 2013 года, а Vue впервые был публично анонсирован в феврале следующего года, в 2014 году.

Названия версий часто происходят от манги и аниме .

Версии

Версия	Дата выпуска	Заголовок	Конец ЛТС	Конец жизни
3.4	28 декабря 2023 г.	Слэм Данк
3.3	11 мая 2023 г.	Руруни Кеншин
3.2	5 августа 2021 г.	Квинтэссенция квинтуплетов
3.1	7 июня 2021 г.	Плутон
3.0	18 сентября 2020 г.	Один кусочек
2.7	1 июля 2022 г.	Наруто	31 декабря 2023 г.	31 декабря 2023 г.
2.6	4 февраля 2019 г.	Макросс	18 марта 2022 г.	18 сентября 2023 г.
2.5	13 октября 2017 г.	Уровень Е
2.4	13 июля 2017 г.	Килл-ла-Килл
2.3	27 апреля 2017 г.	Необычное приключение ДжоДжо
2.2	26 февраля 2017 г.	Начальная буква Д
2.1	22 ноября 2016 г.	Охотник х Охотник
2.0	30 сентября 2016 г.	Призрак в доспехах
1.0	27 октября 2015 г.	Евангелион
0.12	12 июня 2015 г.	Жемчуг Дракона
0.11	7 ноября 2014 г.	Ковбой Бибоп
0.10	23 марта 2014 г.	Бегущий по лезвию
0.9	25 февраля 2014 г.	Аниматрикс
0.8	27 января 2014 г.	—	первая версия публично анонсирована
0.7	24 декабря 2013 г.	—
0.6	8 декабря 2013 г.	VueJS

Когда будет выпущен новый основной выпуск, например v3.yz, последний дополнительный выпуск, например 2.xy, станет выпуском LTS на 18 месяцев (исправления ошибок и исправления безопасности), а в течение следующих 18 месяцев будет находиться в режиме обслуживания (только исправления безопасности).

Функции

Компоненты

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

<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Шаблоны

Vue использует синтаксис шаблонов на основе HTML , который позволяет привязывать отображаемый DOM к данным базового экземпляра Vue. Все шаблоны Vue представляют собой действительный HTML-код, который можно анализировать браузерами, соответствующими спецификациям, и анализаторами HTML . Vue компилирует шаблоны в виртуальные функции рендеринга DOM. Виртуальная объектная модель документа (или «DOM») позволяет Vue отображать компоненты в своей памяти перед обновлением браузера. В сочетании с системой реактивности Vue может рассчитать минимальное количество компонентов для повторной визуализации и применить минимальное количество манипуляций с DOM при изменении состояния приложения. Пользователи Vue могут использовать синтаксис шаблона или напрямую писать функции рендеринга с использованием гиперскрипта либо через вызовы функций, либо через JSX . Функции рендеринга позволяют создавать приложения из программных компонентов .

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

Vue имеет систему реактивности, которая использует простые объекты JavaScript и оптимизированный повторный рендеринг. Каждый компонент отслеживает свои реактивные зависимости во время рендеринга, поэтому система точно знает, когда и какие компоненты следует повторно визуализировать.

Переходы

Vue предоставляет множество способов применения эффектов перехода при вставке, обновлении или удалении элементов из DOM . Сюда входят инструменты для:

• Автоматически применять классы для CSS- переходов и анимации.
• Интегрируйте сторонние библиотеки анимации CSS, такие как Animate.css.
• Используйте JavaScript для непосредственного управления DOM во время перехватов перехода.
• Интегрируйте сторонние библиотеки анимации JavaScript, такие как Velocity.js.

Когда элемент, завернутый в компонент перехода, вставляется или удаляется, происходит следующее:

1. Vue автоматически определит, применены ли к целевому элементу CSS-переходы или анимация. Если это так, классы перехода CSS будут добавляться/удаляться в соответствующее время.
2. Если компонент перехода предоставил перехватчики JavaScript, эти перехватчики будут вызываться в соответствующие моменты времени.
3. Если переходы/анимации CSS не обнаружены и не предоставлены перехватчики JavaScript, операции DOM для вставки и/или удаления будут выполнены немедленно в следующем кадре.

Маршрутизация

Традиционным недостатком одностраничных приложений (SPA) является невозможность совместного использования ссылок на конкретную «подстраницу» внутри конкретной веб-страницы. Поскольку SPA предоставляют своим пользователям только один ответ на основе URL-адреса от сервера (обычно он обслуживает index.html или index.vue), добавление определенных экранов в закладки или обмен ссылками на определенные разделы обычно затруднено, если не невозможно. Чтобы решить эту проблему, многие клиентские маршрутизаторы разделяют свои динамические URL-адреса « хэшбэнгом » (#!), например page.com/#!/ . Однако большинство современных браузеров поддерживают HTML5 маршрутизацию без хэшбэнгов.

Vue предоставляет интерфейс для изменения того, что отображается на странице, на основе текущего URL-пути — независимо от того, как он был изменен (с помощью ссылки по электронной почте, обновления или внутристраничных ссылок). Кроме того, использование внешнего маршрутизатора позволяет намеренно изменять путь браузера, когда определенные события браузера (например, щелчки) происходят на кнопках или ссылках. Сам Vue не поддерживает интерфейсную хешированную маршрутизацию. Но пакет «vue-router» с открытым исходным кодом предоставляет API для обновления URL-адреса приложения, поддерживает кнопку «Назад» (навигация по истории), а также сброс пароля электронной почты или ссылки для проверки электронной почты с параметрами URL-адреса аутентификации. Он поддерживает сопоставление вложенных маршрутов с вложенными компонентами и предлагает детальный контроль переходов. С помощью Vue разработчики уже создают приложения из небольших строительных блоков, создавая более крупные компоненты. При добавлении vue-router компоненты должны быть просто сопоставлены с маршрутами, которым они принадлежат, а родительские/корневые маршруты должны указывать, где должны отображаться дочерние элементы.

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...
</script>

Код выше:

1. Устанавливает внешний маршрут в websitename.com/user/<id>.
2. Который будет отображаться в компоненте User, определенном в (const User...)
3. Позволяет компоненту User передавать конкретный идентификатор пользователя, который был введен в URL-адрес с использованием ключа параметров объекта $route: $route.params.id.
4. Этот шаблон (в зависимости от параметров, переданных в маршрутизатор) будет преобразован в <router-view></router-view> внутри div#app DOM.
5. Окончательно сгенерированный HTML для ввода: websitename.com/user/1 будет:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Экосистема

Основная библиотека включает в себя инструменты и библиотеки, разработанные основной командой и участниками.

Официальный инструментарий

• Devtools — расширение инструментов разработчика браузера для отладки приложений Vue.js.
• Vite — стандартный инструментарий для быстрой разработки Vue.js.
• Vue Loader — загрузчик веб-пакетов, который позволяет писать компоненты Vue в формате, называемом однофайловыми компонентами (SFC).

Официальные библиотеки

• Vue Router – Официальный маршрутизатор
• Vuex — централизованное управление состоянием на основе Flux.
• Vue Server Renderer — рендеринг на стороне сервера
• Пиния – Новое простое управление состоянием

См. также

• Сравнение веб-фреймворков на основе JavaScript
• Реагировать
• AngularJS
• Угловой
• Квазар Фреймворк
• Веб-фреймворк
• библиотека JavaScript
• Модель–представление–ViewModel
• Nuxt.js

Источники

В эту статью включен текст из бесплатного контента . Лицензия MIT License ( заявление о лицензии/разрешение ). Текст взят из Vue.js Guide , Vue.js, .

Внешние ссылки

• Официальный сайт