Как работает фреймворк Vue.js

Для чего нужен фреймворк

Код любого сайта, даже самого сложного, с различными интерактивными элементами, можно написать на HTML и JavaScript. Но писать код большого сайта на чистом JS долго и неудобно. Чтобы упростить жизнь разработчикам, создали различные фреймворки JavaScript. Они содержат распространённые функции, сценарии: разработчику достаточно написать одну строчку для вызова нужной ему функции — и она сделает то же, что в чистом JavaScript делает целая страница кода. Подробнее о том, что представляют собой фреймворки, читайте в нашей статье «Что такое фреймворк».

Самые распространённые фреймворки JavaScript — Vue, Angular, Spring, Meteor. Vue, как и Angular, живёт во фронтенде — то есть их используют для внешней части сайта или приложения: в отрисовке интерфейса, постраничной навигации. Можно грубо сказать, что на чистом JS сейчас уже никто ничего не пишет (как сегодня не строят здания без гвоздей).

Слово vue — французский аналог английского view. Создатель фреймворка хотел в названии подчеркнуть, что его продукт отвечает за внешний вид (view), а английское слово оказалось занято другим опенсорсным проектом. Vue.js можно постепенно встраивать в готовые проекты: например, сначала написать на нём чат с поддержкой, потом — корзину, административную панель и так далее.

Любой сайт можно написать с помощью любого фреймворка JavaScript — или вообще без них. Но у каждого инструмента есть своя ниша, где использовать его удобнее всего. Vue создавался для написания:

небольших веб-сайтов и приложений, где важна скорость отклика;
личных блогов;
сайтов с высокой нагрузкой, например интернет-магазинов;
одностраничных (SPA) приложений — социальных сетей, микроблогов-сервисов, CMS;
адаптивных интерфейсов;
функциональных блоков на готовых сайтах — личных кабинетов, интерфейсов авторизации, онлайн-чатов, форм заявки и так далее.

Создатель Vue.js — Эван Ю, бывший сотрудник Google. В IT-гиганте он столкнулся с тем, что не существует готовых решений для быстрого прототипирования сложных пользовательских интерфейсов. Он решил создать свой фреймворк, который был бы простым и пригодным не только для прототипирования, но и для полноценной разработки веб-приложений.

Первый публичный релиз фреймворка состоялся в феврале 2014 года. Вторая версия вышла в сентябре 2016, а третья — в сентябре 2020.

Vue используется в приложениях и сайтах Alibaba, Baidu, Xiaomi, Sina Weibo, Netflix, Grammary, UpWork, GitLab.

Основные преимущества Vue.js

Подробная документация. В отличие от других фреймворков, у Vue замечательная документация. По сути, её одной достаточно для изучения фреймворка с нуля. Основные разделы документации — в том числе детальное описание API Vue, рекомендации, примеры приложений — создают и развивают в сообществе разработчиков. Также есть «Книга рецептов», где можно найти ответы на часто задаваемые вопросы о Vue, описание инструментов и основных библиотек Vue — инструментов разработчика, Vue CLI, Vue Loader, Vue Router, Vuex, Vue Server Renderer.

Аккуратное внедрение. С Vue не требуется переписывать сразу весь сайт или веб-приложение. Можно написать на нём, например, только чат с поддержкой или интерфейс авторизации — и всё будет нативно работать в веб-приложении, которое создано на другом фреймворке.

Низкий порог входа. Если вы хорошо знаете JavaScript, CSS, HTML, то для погружения в Vue вам не потребуется много времени: здесь нет сложных базовых вещей, без изучения которых вы не сможете написать работающий код. Погружение в React, например, обычно требует больших усилий.

Небольшой вес фреймворка. Vue занимает всего 20 Кб, поэтому сделанные на нём сайты загружаются и ранжируются поисковиками быстрее. Это особенно важно в веб-сервисах, где сложные интерфейсы должны работать мгновенно, не смущая пользователя задержкой.

Основные концепции фреймворка

Компоненты. Это повторно используемые части вашего сайта или приложения. Они помогают расширить основные html-элементы и внедрить переиспользуемый код. В чистом JavaScript вам пришлось бы копировать повторяющийся код каждый раз, а в Vue достаточно один раз написать компонент и вызывать его в нужных местах.

Один из простых компонентов, которые можно использовать в Vue.js, — Button (кнопка).

Пример кода компонента Button:

1<template>
2  <button @click="handleClick" :disabled="disabled">{{ text }}</button>
3</template>
4
5<script>
6export default {
7  props: {
8    text: { type: String, default: 'Click Me' },
9    disabled: { type: Boolean, default: false }
10  },
11  methods: {
12    handleClick() {
13      console.log('Button clicked')
14    }
15  }
16}
17</script>

В этом примере мы создаём компонент кнопки с помощью тега <template>. В нём определены два свойства (props): text и disabled, которые устанавливаются по умолчанию на ’Click Me’ и false соответственно.

Кроме того, в компоненте определён метод handleClick, который будет вызываться при нажатии на кнопку и выводить сообщение Button clicked в консоль.

В компоненте используются директивы Vue.js, такие как @click и :disabled, для отслеживания клика по кнопке и управления её доступностью соответственно.

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

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

Директивы — специальные токены в разметке, сообщающие фреймворку, что нужно что-то сделать с элементом DOM (древовидной структуры страницы, состоящей из узлов). Вот некоторые встроенные директивы Vue:

v-show — обеспечивает видимость элемента в соответствии с переданным значением (True или False);
v-if — содержит условие для рендера элемента;
v-on — добавляет событие и его обработчики на элемент;
v-bind — динамически связывается с одним или несколькими атрибутами;
v-for — циклично проходит массив объектов;
v-once — рендерит элемент только в начале и больше не следит за ним;
v-pre — не компилирует элемент и его дочерние элементы.

Пример одной из таких директив:

1<template>
2    <div>
3        <h1 v-if="showTitle">My Title</h1>
4        <p v-for="item in items" :key="item.id">{{ item.name }}</p>
5    </div>
6</template>
7
8<script>
9export default {
10    data() {
11        return {
12            showTitle: true,
13            items: [
14                { id: 1, name: 'Item 1' },
15                { id: 2, name: 'Item 2' }
16            ]
17        }
18    }
19}
20</script>

В этом примере мы используем две директивы Vue.js — v-if и v-for:

v-if используется для условного рендеринга элементов — если свойство showTitle имеет значение true, рендерится заголовок h1, в противном случае заголовок не отображается;
v-for используется для отображения данных в списке — мы перебираем элементы массива items и отображаем их в списке параграфов.

Обе директивы привязывают свойства Vue-экземпляра к элементу DOM, делая возможным динамическое изменение содержимого страницы. Директивы предоставляют удобные средства для связывания данных и элементов внутри Vue-компонентов.

Как видно из примеров, директивы имеют префикс v-. В них передаётся значение состояния, а в качестве аргументов могут быть атрибуты html или события.

В Vue разработчик может не только использовать встроенные директивы, но и создавать собственные.

Переходы — это изменения на сайте или в приложении при определённых действиях, например наведении курсора или выборе элемента в списке. Основная цель перехода — продемонстрировать пользователю, что что-то изменилось. Переходы в Vue включают в себя следующие инструменты:

автоматическое применение классов для CSS-переходов и анимации;
подключение библиотек для CSS-анимации из сторонних источников, например Animate.css;
изменения DOM с помощью JavaScript;
подключение JS-библиотек из сторонних источников для анимации, например Velocity.js.

Код перехода при наведении курсора на меню с использованием фреймворка Vue может выглядеть следующим образом:

1html
2<template>
3  <div>
4    <nav>
5      <ul>
6        <li v-for="item in menuItems"
7          :key="item.id"
8          @mouseenter="toggleMenu(item.id, true)"
9          @mouseleave="toggleMenu(item.id, false)"
10          :class="{ active: item.active }"
11        >
12          <a href="#">{{ item.label }}</a>
13          <ul :class="{ open: item.active }">
14            <li v-for="(subItem, index) in item.subItems"
15              :key="index"
16            >
17              <a href="#">{{ subItem }}</a>
18            </li>
19          </ul>
20        </li>
21      </ul>
22    </nav>
23  </div>
24</template>
25
26<script>
27export default {
28  data() {
29    return {
30      menuItems: [
31        {
32          id: 1,
33          label: 'Home',
34          subItems: [],
35          active: false,
36        },
37        {
38          id: 2,
39          label: 'About',
40          subItems: ['Team', 'Company', 'History'],
41          active: false,
42        },
43        {
44          id: 3,
45          label: 'Blog',
46          subItems: ['News', 'Tutorials', 'Updates'],
47          active: false,
48        },
49        {
50          id: 4,
51          label: 'Contact',
52          subItems: [],
53          active: false,
54        },
55      ],
56    };
57  },
58  methods: {
59    toggleMenu(id, active) {
60      this.menuItems.forEach((item) => {
61        if (item.id === id) {
62          item.active = active;
63        } else {
64          item.active = false;
65        }
66      });
67    },
68  },
69};
70</script>
71
72<style>
73nav ul {
74  list-style: none;
75  margin: 0;
76  padding: 0;
77}
78
79nav ul li {
80  position: relative;
81}
82
83nav ul li > ul {
84  position: absolute;
85  top: 100%;
86  left: 0;
87  background-color: #fff;
88  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
89  display: none;
90}
91
92nav ul li.active > ul {
93  display: block;
94}
95</style>

Сначала мы создаём список меню menuItems. У каждого элемента есть уникальный идентификатор id, метка label и массив подэлементов subItems. Поле active указывает, активен ли элемент в настоящее время. Когда пользователь наводит курсор на элемент меню, мы вызываем метод toggleMenu и передаём ему идентификатор и флаг активности. Метод toggleMenu проходит по всем элементам меню и устанавливает флаг active для элемента с соответствующим идентификатором. Если флаг активности равен true, мы также меняем класс элемента на active, чтобы показать соответствующее подменю с помощью CSS.

Каждый элемент меню отображается с помощью цикла v-for, а класс active устанавливается с помощью директивы :class. Если элемент имеет подменю, мы отображаем его с помощью вложенного цикла v-for и задаём соответствующий класс open с помощью директивы :class. Мы также определяем стили для элементов меню в CSS. При наведении курсора на элемент меню мы меняем цвет фона и добавляем тень с помощью селектора :hover. Ещё мы используем псевдокласс :active, чтобы подчеркнуть выбранный элемент.

Какие инструменты нужны для работы в Vue.js

Простой способ использования Vue, который не требует установки никаких дополнительных инструментов, — подключение к html-странице скрипта Vue с помощью тега <script>. Кстати, этим методом пользуются не только в учебных целях, но и в реальной разработке. Правда, масштабировать проект в нём неудобно, так что для создания полноценных веб-приложений и сайтов лучше воспользоваться другими методами. Для подключения фреймворка в html-странице прямо над закрывающим тегом </body> нужно добавить следующее:

1<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
2<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3<script>
4
5</script>

Всё, теперь можно добавлять корневой элемент, к которому будет подключён экземпляр Vue, сам новый экземпляр Vue, переменные — и выводить всё на страницу в браузере.

Второй вариант — классический, он подходит для создания полноценных проектов с Vue.js. Это использование командной строки для создания приложения. Чтобы им воспользоваться, нужно сначала установить Node.js — это северная платформа для поддержки выполнения JavaScript-кода. Кстати, Node.js и всё остальное лучше устанавливать на ОС Linux. Далее следует установить Vue CLI. Скачайте пакет установки с сайта или отправьте команду в консоли:

1npm install -g @vue/cli

Далее создаёте приложение командой vue create. Потом открываете созданный файл, пишете код, запускаете его.

Третий вариант работы с Vue — использование инструмента Vue UI. Это программа с графическим интерфейсом, которая устанавливается на компьютер вместе с Vue CLI. Здесь тоже можно писать код и запускать его — всё как и в предыдущем варианте. Но так может быть удобнее для тех, кто не любит работать в консоли.