Как работает фреймворк 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.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:

<template>
  <button @click="handleClick" :disabled="disabled">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: { type: String, default: 'Click Me' },
    disabled: { type: Boolean, default: false }
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</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 — не компилирует элемент и его дочерние элементы.

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

<template>
    <div>
        <h1 v-if="showTitle">My Title</h1>
        <p v-for="item in items" :key="item.id">{{ item.name }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showTitle: true,
            items: [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' }
            ]
        }
    }
}
</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 может выглядеть следующим образом:

html
<template>
  <div>
    <nav>
      <ul>
        <li v-for="item in menuItems"
          :key="item.id"
          @mouseenter="toggleMenu(item.id, true)"
          @mouseleave="toggleMenu(item.id, false)"
          :class="{ active: item.active }"
        >
          <a href="#">{{ item.label }}</a>
          <ul :class="{ open: item.active }">
            <li v-for="(subItem, index) in item.subItems"
              :key="index"
            >
              <a href="#">{{ subItem }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          label: 'Home',
          subItems: [],
          active: false,
        },
        {
          id: 2,
          label: 'About',
          subItems: ['Team', 'Company', 'History'],
          active: false,
        },
        {
          id: 3,
          label: 'Blog',
          subItems: ['News', 'Tutorials', 'Updates'],
          active: false,
        },
        {
          id: 4,
          label: 'Contact',
          subItems: [],
          active: false,
        },
      ],
    };
  },
  methods: {
    toggleMenu(id, active) {
      this.menuItems.forEach((item) => {
        if (item.id === id) {
          item.active = active;
        } else {
          item.active = false;
        }
      });
    },
  },
};
</script>

<style>
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  position: relative;
}

nav ul li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  display: none;
}

nav ul li.active > ul {
  display: block;
}
</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.js

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

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

</script>

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

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

npm install -g @vue/cli

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

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