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)
Заключение
Этот популярный ныне фреймворк разработал бывший сотрудник Google Evan You. Его разработку активно используют такие компании как Alibaba, Baidu, Xiaomi, Sina Weibo и даже система управления репозиториями GitLab.
Разработчики этого инструмента часто любят подчеркивать, что Vue.js — это «прогрессивный» фреймворк. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с современными инструментами и дополнительными библиотеками (о которых и пойдет речь дальше).
И сразу практика! Создадим простой проект для ознакомления с функциями 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>
Теперь подключим Vue.js в наш проект. На данный момент существует две версии этого фреймворка — вторая и третья. Поскольку разница между второй и третьей версией Vue.js принципиальная, на официальном сайте присутствуют отдельные документации под одну и под другую версии фреймворка.
Для того, чтобы имплементировать функции Vue.js, необходимо подключить комплект файлов одной из выбранной версии.
Воспользуемся последним способом. На странице с официальной документацией по третьей версии фреймворка находим ссылку, с помощью которой можно имплементировать функции Vue.js в наш проект:
<script src="https://unpkg.com/vue@next"></script>
Добавим эту строчку перед закрывающим тегом </body>. Если вы используете не последнюю версию, ссылка на CDN пакет будет иной
Затем перейдем к описанию логики кнопок, которые будут управлять значением счетчика — одна кнопка будет увеличивать значение, вторая — уменьшать. Создадим файл 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");
Рассмотрим другой пример. Допустим, у нас есть три поля — имя, фамилия и, скажем, возраст. Добавим их в первоначальную разметку с помощью тега <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>
Одно из кардинальных отличий второй и третьей версий Vue — Composition API, который способен заменить все существующие шаблоны и модули контроля состояния в Vue. Данный API по-новому реализует глобальное и локальное состояния приложения.
Поскольку Composition API не требует компонента для добавления в него сложного управления состоянием (скажем, watch или computed-свойств), он позволяет связывать состояние с определенным фрагментом бизнес-логики. Это дает возможность создать целое приложение из целиком независимых, интегрируемых микро-приложений с их собственным приватным состоянием.
Composition API это особый метод разделения многократно используемого кода между компонентами, а также хорошая альтернатива популярным инструментам контроля состоянием, таким, как, скажем, Vuex или Redux. Данный API не только делает код приложения более легким, но и влияет на общую архитектуру, обеспечивая модульность.
Vue часто противопоставляют двум другим популярным инструментам — Angular и React. Действительно, функционально эти фреймворки близки, однако есть и значимые отличия.
Vue.js намного проще Angular.js. Последний применяет двустороннюю привязку данных, но к асинхронным службам можно подключаться только при помощи сторонних компонентов. Vue.js использует постоянный обмен данными между компонентами, что облегчает поток данных и позволяет выполнить разработку нетривиальных приложений за меньшее время, чем с Angular.js.
В отличие от React, виртуально-объектная модель документа в Vue.js реализована производительнее и стабильнее. У Vue заметно лучше документация. Порог входа в Vue.js гораздо ниже, ведь React требует изучения синтаксиса JSX, а для шаблонов придется еще и разобраться с предметно-ориентированным языком. Чтобы начать пользоваться Vue достаточно знаний HTML, CSS и JavaScript на среднем уровне.
Регулярно создавая приложения с помощью 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:
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…
