Что такое Vue.js

JavaScript ~10 минут

Vue — один из самых популярных фреймворков для создания фронтенда и ближайший конкурент React. Расскажем, из чего он состоит, какие имеет преимущества и стоит ли его изучать в 2024 году.

Знания JavaScript достаточно для того, чтобы написать фронтенд сайта. Но современные интерфейсы усложнились, поэтому чтобы оптимизировать процессы используют фреймворки. Это своеобразные каркасы приложений, которые включают в себя самые популярные сценарии и функции.

За счет этого разработчику достаточно написать всего пару строчек кода вместо сотен или даже тысяч.

Один из самых популярных фреймворков для JS — Vue. Расскажем, как он появился и чем интересен.

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Как появился Vue.js

Этот фреймворк — детище Эвана Ю, программиста из Google. Он создал Vue в 2012 году в качестве пет-проекта. Но известность технология получила только в 2015.

Тогда основатель фреймворка Laravel Тейлор Отвелл написал, что решил изучать Vue, потому что React показался ему слишком сложным.

Это определило популярность фреймворка среди PHP-разработчиков, которые первыми начали активно применять его для создания пользовательских интерфейсов.

Название фреймворк получил от слова «view», то есть связи модели и отображения.

Vue — опенсорс-проект, его исходный код открыт и распространяется бесплатно. А доработкой его инструментов занимаются программисты со всего мира.

Интересный факт: долгое время Vue был рекордсменом по количеству звезд на GitHub. Сейчас его сместили с пьедестала, но он по-прежнему обладает максимальной народной поддержкой среди фреймворков.

Где его используют

Основные области применения Vue:

Создание одностраничных сайтов с динамическим интерфейсом.
Разработка высоконагруженных приложений, например, интернет-магазинов.
Программирование интерфейсов сайтов для последующей интеграции с популярными CMS.
Создание отдельных функциональных блоков — форм авторизации, заявок, чатов и т.д.

Сейчас многие крупные коммерческие компании применяют Vue как основной фреймворк для фронтенда. К ним относятся Alibaba, 9GAG, Nintendo, Zoom, Ozon и Upwork.

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

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

Главная особенность фреймворка — его реактивность. То есть у программиста есть не только набор готовых шаблонов, но и возможность получать изменения в реальном времени.

Это позволяет не обновлять страницу в браузере после внесения изменений, а сразу получать новые данные.

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

Но у Vue есть и другие преимущества:

Сравнительно низкий порог входа

Этот фреймворк относительно легко выучить тем, кто уже знает JS, CSS и HTML. Его основные концепции легки для понимания, а работоспособный код можно начинать писать буквально с первых недель обучения. Для сравнения, изучение React отнимет гораздо больше времени.

Качественная документация

Это одна из причин, обеспечивающих простой вход. Этот фреймворк хорошо задокументирован. Фактически документации будет достаточно для обучения.

Сейчас информацию о нем можно найти в подробном описании API, которое сопровождают примеры приложений и рекомендации. Также есть FAQ с часто задаваемыми вопросами и описание главных библиотек и инструментов.

Малый вес

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

Бережное внедрение

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

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

Это позволяет осуществлять плавный переход с устаревших технологий, например, jQuery на Vue без необходимости заменять весь код разом.

Из чего состоит Vue

Здесь мы расскажем о главных концепциях фреймворка и особенностях его экосистемы.

Компоненты

Компоненты в Vue.js — отдельные блоки кода, которые объединяют в себе HTML, CSS и JavaScript и могут быть многократно использованы на странице. Каждый компонент имеет свою область видимости и может быть полностью независимым от других компонентов. Например, создадим компонент кнопки.

<template>

<button @click="onClick">{{ buttonText }}</button>

</template>

<script>

export default {

data() {

return {

buttonText: 'Нажми меня'

};

},

methods: {

onClick() {

alert('Кнопка была нажата');

}

}

};

</script>

<style scoped>

button {

background-color: #42b983;

color: #ffffff;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

}

</style>

Шаблоны

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

<template>

<ul>

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

</ul>

</template>

И скрипт к нему:

<script>

export default {

data() {

return {

items: [

{ id: 1, text: 'Сходить в магазин' },

{ id: 2, text: 'Погулять на свежем воздухе' },

{ id: 3, text: 'Почитать книгу' }

]

};

}

};

</script>

Переходы

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

Переходы включают в себя несколько основных элементов, среди которых:

Тег — объединяет в себе все элементы перехода. Он позволяет определить анимацию при появлении и исчезновении элементов.
CSS классы — Vue автоматически добавляет и удаляет ряд CSS-классов, их всего шесть для разных переходов.
Хуки жизненного цикла — в Vue.js есть специальные методы, которые позволяют определить поведение элемента перед, во время и после его появления или исчезновения. Эти методы можно использовать для определения дополнительных анимаций или действий.
Директивы — такие как v-show или v-if могут также использоваться для определения переходов. Например, при изменении значения v-show элемент может плавно исчезать или появляться.

Например, можно использовать директиву v-if для плавного появления и исчезновения элемента:

<transition name="fade">

<p v-if="isShown">Этот текст появится с эффектом fadeIn</p>

</transition>

<style>

.fade-enter-active, .fade-leave-active {

transition: opacity 0.5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {

opacity: 0;

}

</style>

Директивы

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

Основные виды директив в Vue.js:

v-if и v-show – позволяют условно отображать или скрывать элемент на странице в зависимости от значения выражения.
v-bind – помогает связывать значение атрибута элемента с данными из Vue-экземпляра.
v-on – добавляет обработчики событий к элементу, такие как клик, наведение и другие.
v-model – создает двустороннюю привязку данных между элементом формы и Vue-экземпляром.
v-for – используется для отрисовки списка элементов на основе данных из массива или объекта.

Например, директива v-for позволяет создавать списки элементов на основе данных из массива:

<ul>

<li v-for="item in items">{{ item.text }}</li>

</ul>

Фильтры

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

<span>{{ date | formatDate }}</span>

filters: {

formatDate(date) {

return new Date(date).toLocaleDateString();

}

}

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

Vue CLI (Command Line Interface) — интерфейс командной строки, который предоставляет удобные инструменты для создания, развертывания и управления проектами Vue.js. С его помощью разработчики могут автоматизировать рутинные задачи и управлять зависимостями проекта.
Loader — инструмент для загрузки файлов и ресурсов в приложении Vue.js, который позволяет разработчикам эффективно управлять зависимостями и подключать сторонние библиотеки. С помощью loader разработчики могут использовать различные ресурсы, такие как изображения, стили и шрифты, в своем приложении.
Vue Devtools — инструмент для отладки приложений Vue.js, который предоставляет удобный интерфейс для просмотра и изменения состояния компонентов, отслеживания изменений данных и профилирования производительности.
Vue Router — механизм навигации между различными страницами веб-приложения. С его помощью разработчики могут определять маршруты и создавать динамические переходы между ними.
Server-renderer — инструмент для рендеринга приложений Vue.js на сервере, что позволяет улучшить производительность и оптимизировать индексацию при поисковой оптимизации. С его помощью разработчики могут создавать универсальные приложения, работающие как на сервере, так и на стороне клиенте.
Vuex — библиотека управления состоянием, которая позволяет эффективно управлять данными в приложении и обеспечивать их однозначность и целостность. С помощью vuex разработчики могут организовать данные в хранилище и манипулировать ими через мутации и действия.

Рекомендуем попробовать

5 бесплатных уроков Frontend

Vue.js vs React

Сейчас React — ближайший конкурент Vue. Он появился раньше и пользуется большей популярностью на рынке. При этом создатель Vue долгое время работал именно на нем. Так что во многом эти две технологии похожи.

Но они различаются по многим параметрам.

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

А Vue дает возможность программисту работать с DOM напрямую и менять данные через события. Это позволяет упростить процесс внесения изменений и дает больше свободы действий разработчику. Но последнее может стать и источником ошибок.

Зато Vue однозначно лучше работает со сложно-синхронизированной анимацией.

Также этот фреймворк удобнее для дизайнеров за счет возможности виртуально представить шаблон. А в React это можно сделать только через JSX. Правда за счет такой особенности код получается короче.

Еще одна сильная сторона Vue — изоморфные приложения на JS. Он предлагает более простую синхронизацию с данными.

Vue.js vs Angular

Это вторая конкурирующая технология, которую рассматривают начинающие фронтенд-разработчики.

Если сравнивать с Angular, Vue однозначно обеспечивает большую гибкость. Его легко применять как дополнительный инструмент на проекте, создавая на нем отдельные модули. А Angular придется внедрять целиком.

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

Но у Angular есть и свои преимущества. Например, наличие ajax-функции и маршрутизации. У Vue эти возможности можно реализовать только через сторонние библиотеки.

Заключение

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

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

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

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

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