Теория 02/02/2022 18:01

Vue и Vuex: делаем пользовательские интерфейсы быстро

Журналіст

Vue.js — это популярный JavaScript-фреймворк, инструмент для быстрой разработки реактивных пользовательских веб-интерфейсов. Данный инструмент включает в себя набор функций, библиотек и различных подходов, упрощающих процесс веб-разработки. Он подходит как для созданий сложных одностраничных приложений (SPA, Single-Page Applications), так и для решений задач уровня представления (view).

Содержание:
1. Введение
2. Счетчик на Vue.js
3. Подключение Vue.js
4. Описание логики, директива v-on
5. Интерполяция
6. Composition API
7. Сравнение Vue.js с Angular и React
8. Дополнительные модули и библиотеки (Vuex)
Заключение

1. Введение

Этот популярный ныне фреймворк разработал бывший сотрудник Google Evan You. Его разработку активно используют такие компании как Alibaba, Baidu, Xiaomi, Sina Weibo и даже система управления репозиториями GitLab.

Разработчики этого инструмента часто любят подчеркивать, что Vue.js — это «прогрессивный» фреймворк. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с современными инструментами и дополнительными библиотеками (о которых и пойдет речь дальше).

2. Счетчик на Vue.js

И сразу практика! Создадим простой проект для ознакомления с функциями Vue. Прежде всего напишем простую стартовую разметку, на основе которой будем работать:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js_example</title>
  </head>
  <body>
    
  </body>
</html>

Подключим стили CSS внешним файлом (в принципе, это необязательно). Создадим корневой div с классом block, который будет содержать тег <h1> с текстом Counter 0. Также добавим две кнопки для увеличения и уменьшения значения счетчика.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js_example</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <div class="container">
      <div class="block">
        <h1> Counter 0</h1>
        <div class ="buttons">
          <button class="btn primary">Увеличиваем</button>
          <button class="btn danger">Уменьшаем</button>
        </div>
      </div>
    </div>
  </body>
</html>

3. Подключение Vue.js

Теперь подключим Vue.js в наш проект. На данный момент существует две версии этого фреймворка — вторая и третья. Поскольку разница между второй и третьей версией Vue.js принципиальная, на официальном сайте присутствуют отдельные документации под одну и под другую версии фреймворка.

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

Это можно сделать одним из способов:

Скачав файлы JavaScript и разместив их в проекте самостоятельно.
Воспользоваться стандартным менеджером пакетов, который автоматически устанавливается вместе с Node.js.
Развернув проект с помощью интерфейса командной строки CLI.
Импортировать пакет через CDN.

Воспользуемся последним способом. На странице с официальной документацией по третьей версии фреймворка находим ссылку, с помощью которой можно имплементировать функции Vue.js в наш проект:

<script src="https://unpkg.com/vue@next"></script>

Добавим эту строчку перед закрывающим тегом </body>. Если вы используете не последнюю версию, ссылка на CDN пакет будет иной см. официальную документацию.

4. Описание логики, директива v-on

Затем перейдем к описанию логики кнопок, которые будут управлять значением счетчика — одна кнопка будет увеличивать значение, вторая — уменьшать. Создадим файл script.js и подключим его в index.html с помощью <script src="app.js"></script>.

Обращаемся к глобальному объекту Vue, у которого есть метод createAPP. Внутри этого метода у нас должен быть объект:

Vue.createApp({
  data() {
    return {
      Text: "Cчетчик",
      count: 0,
    };
  },


}).mount("#app");

Наш счетчик динамически реагирует на переменную count. В этом легко убедиться, если задать другое значение, например, 4 (или вообще заменив код инкрементным выражением, которое будет изменять на единицу значение в режиме реального времени):

Vue.createApp({
  data() {
    return {
      Text: "Cчетчик",
      count: setInterval(() => {
        this.count++
      }, 1000),
    };
  },


}).mount("#app");

Для использования кнопок мы задействуем событие click (нажатие) и соответствующую директиву обработчика событий v-on (все директивы в Vue.js пишутся через префикс «v-»). У этой директивы есть упрощенный вариант написания, вы можете использовать или v-on:click, или @click.

Итак, с учетом всех накопившихся изменений, получим вот такой вот апгрейд первоначального кода:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js_example</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <div id="app" class="container">
      <div class="block">
        <h1> {{Text}} {{ count }}</h1>
        <div class ="buttons">
          <button @click="count++" class="btn primary">Увеличиваем</button>
          <button @click="count--" class="btn danger">Уменьшаем</button>
        </div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

Теперь наш счетчик реагирует на нажатие, кнопка «Увеличиваем» увеличивает его значение на единицу, кнопка «Уменьшаем» — уменьшает значение на единицу. Чтобы задать изменение счетчика на заданную величину, мы можем прописать, например:

button @click="count = count+5" и button @click="count = count-5"

Но обычно так не делают и выносят это действие отдельной функцией. Сделаем ссылку на эту функцию в файле index.html:

<button @click="increment" class="btn primary">Увеличиваем</button>
        <button @click="decrement" class="btn danger">Уменьшаем</button>

Далее в файле app.js запишем все эти функции, сразу после data. Все наши переменные будут располагаться внутри нашей функции data, которая что-то возвращает, а все наши функции находятся внутри объекта methods.

Vue.createApp({
  data() {
    return {
      Text: "Cчетчик",
      count: 0,
    };
  },
methods: {
  increment(){
    this.count++;
  },
  decrement(){
    this.count--;
  }

},

}).mount("#app");

5. Интерполяция

Рассмотрим другой пример. Допустим, у нас есть три поля — имя, фамилия и, скажем, возраст. Добавим их в первоначальную разметку с помощью тега <h1>.

<h1>First name:</h1>
<h1>Last name:</h1>
<h1>Age:</h1>

Пропишем в HTML файле скрипт, руководствуясь той же логикой, что и в прошлом примере: берем глобальный объект Vue, вызываем метод createApp и внутри данного метода мы кладем объект, в котором у нас будет функция data с возможностью вернуть некоторое значение.

Также укажем некоторые свойства:

Vue.createApp({
      data() {
        return {
          firstname: "Сергей",
          lastname: "Бондаренко",
          age: 43,
        };
      },
    }).mount("#app");

Теперь для того чтобы отобразить имя, фамилию и возраст в нашем корневом <div>, мы должны смонтировать наше приложение. Монтируя приложение мы обращаемся к оставленной метке #app. Чтобы внутри <div> обращаться к нашим переменным используем двойные фигурные скобки.

Метод использования в коде двойных фигурных скобок для трансляции значения переменной называется «интерполяция» (совершенно нелогично с точки зрения семантики, но это уже парафия филологов).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js_example</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <div id="app" >
        <h1>First name: {{ firstname }}</h1>
        <h1>Last name: {{ lastname }}</h1>
        <h1>Age: {{ age }}</h1>

      </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script> Vue.createApp({
      data() {
        return {
          firstname: "Сергей",
          lastname: "Бондаренко",
          age: 43,
        };
      },
    }).mount("#app");
    </script>
  </body>
</html>

Запись скрипта можно сделать немного иначе, создав константу и положив объект внутрь нашего createApp:

<script> const App = {
      data() {
        return {
          firstname: "Сергей",
          lastname: "Бондаренко",
          age: 43,
        };
      },
    };
Vue.createApp(App).mount("#app");
    </script>

Создадим склеенный вариант, состоящий из фамилии и имени. Для этого в скрипте в поле methods реализуем функцию fullName(), на которую сделаем ссылку под тегом <h1>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js_example</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
  <div id="app">  
    <h1>First name: {{ firstname }} </h1>
    <h1>Last name: {{ lastname }} </h1>
    <h1>Age: {{ age }} </h1>
    <h1>Fullname: {{ fullName() }}</h1>
  </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script> 
    const App = {
      data() {
        return {
          firstname: "Сергей",
          lastname: "Бондаренко",
          age: 43,
        };
      },
      methods: {
        fullName() {
          return `${this.firstname} ${this.lastname}`;
        },
      },
    };
    Vue.createApp(App).mount("#app");
    </script>

  </body>
</html>

6. Composition API

Одно из кардинальных отличий второй и третьей версий Vue — Composition API, который способен заменить все существующие шаблоны и модули контроля состояния в Vue. Данный API по-новому реализует глобальное и локальное состояния приложения.

Поскольку Composition API не требует компонента для добавления в него сложного управления состоянием (скажем, watch или computed-свойств), он позволяет связывать состояние с определенным фрагментом бизнес-логики. Это дает возможность создать целое приложение из целиком независимых, интегрируемых микро-приложений с их собственным приватным состоянием.

Composition API это особый метод разделения многократно используемого кода между компонентами, а также хорошая альтернатива популярным инструментам контроля состоянием, таким, как, скажем, Vuex или Redux. Данный API не только делает код приложения более легким, но и влияет на общую архитектуру, обеспечивая модульность.

7. Сравнение Vue.js с Angular и React

Vue часто противопоставляют двум другим популярным инструментам — Angular и React. Действительно, функционально эти фреймворки близки, однако есть и значимые отличия.

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

В отличие от React, виртуально-объектная модель документа в Vue.js реализована производительнее и стабильнее. У Vue заметно лучше документация. Порог входа в Vue.js гораздо ниже, ведь React требует изучения синтаксиса JSX, а для шаблонов придется еще и разобраться с предметно-ориентированным языком. Чтобы начать пользоваться Vue достаточно знаний HTML, CSS и JavaScript на среднем уровне.

8. Дополнительные модули и библиотеки (Vuex)

Регулярно создавая приложения с помощью Vue, можно заметить, что в каждом новом проекте приходится повторять какие-то общие функции снова и снова. Например, вы добавляете одни и те же директивы, глобальные методы или свойства, добавляете глобальные миксины и др. В этом случае имеет смысл прибегнуть к плагину Vuex.

Модуль представляет собой автономный код, который добавляет в ваше приложение функциональность глобального уровня. Когда вы его создаете, вы упаковываете его как пакет NPM. Как уже было сказано выше, отличия между версиями 2 и 3 принципиальные, поэтому следует помнить, что плагины для второй версии не совместимы с третьей.

Помимо возможности создания собственного плагина к Vue, существует много библиотек и модулей, расширяющих стандартные возможности фреймворка. Давайте далее ниже обсудим некоторые их них.

Vue ChartJS (https://vue-chartjs.org/) — это обёртка для Chart.js на Vue для визуализации различной инфографики. Данный модуль содержит множество диаграмм разного типа.

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

Vuetify (https://vuetifyjs.com/en/) — библиотека пользовательского интерфейса Vue с красиво изготовленными вручную компонентами. Навыки проектирования не требуются — все, что нужно для создания динамичных макетов — у вас под рукой. Проект имеет открытый исходный код и включает в себя базовые шаблоны для HTML, Webpack, NUXT, PWA, Electron, A La Carte и Apache Cordova.

VuePress — это еще один проект от создателя Vue.js Evan You. VuePress — минималистичный генератор статичных сайтов, оптимизированный для написания технической документации. Работает «из коробки», настраивается при помощи большого числа модулей. Есть встроенный поиск и подсветка синтаксиса.

Nuxt (https://nuxtjs.org/). Несколько лет назад был анонсирован фреймворк Next.js для приложений на React с серверным рендерингом. Чтобы не отставать от конкурента, был создан Nuxt.js — воплощение аналогичной идеи для Vue.

С помощью создания статического сайта вы можете визуализировать свое приложение на этапе сборки и развернуть его на любых службах статического хостинга, таких как Netlify, страницы GitHub, Vercel и т. д. Это означает, что для развертывания вашего приложения сервер не требуется. Также возможна визуализация веб-страницы на стороне сервера (SSR)

Vue Grid Layout (https://jbaysolutions.github.io/vue-grid-layout/) — удобный инструмент для проектирования интерактивной разметки страницы. С помощью системы макетов можно управлять содержимым ячеек — диаграммами, изображениями, текстом.

Можно менять размер отдельных элементов, перетаскивать и сохранять раскладку.

Vue QR Code Reader (https://gruhn.github.io/vue-qrcode-reader/demos/CustomTracking.html) это пакет plug-and-play, который позволяет добавлять функции сканирования QR-кода в ваше приложение. Среди ключевых особенностей пакета: потоковая передача с камеры, непрерывное сканирование QR-кодов, пакетное сканирование изображений.

Заключение

Vue.js — это очень удобный и достаточно простой фреймворк, для освоения которого требуется минимальное количество времени. Он прост, логичен и стабилен в работе, не уступая конкурентам — Angular и React. Конечно, за ним не стоят такие гиганты как Facebook или Google, однако его разработка продолжается и армия сторонников растет день ото дня.

Для более глубокого изучения темы мы рекомендуем вам посмотреть видеокурс по основам Vue.js 3:

https://youtu.be/psi68oD1dR0