Фреймворк vue js что это
Обновлено: 07.07.2024
Vue.js представляет современный прогрессивный фреймворк, написанный на языке JavaScript и предназначенный для создания веб-приложений клиентского уровня. Основная сфера применения данного фреймворка - это создание и организация пользовательского интерфейса.
Первый релиз фреймворка увидел свет в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично развивается, его текущей версией является версия 2.3.
Vue.js имеет довольно небольшой размер - не более 20 кБ, и при этом обладает хорошей производительностью по сравнению с такими фреймворками как Angular или React. Поэтому неудивительно, что данный фреймворк в последнее время набирает обороты и становится все более популярным.
Одним из ключевых моментов в работе Vue.js является виртуальный DOM . Структура веб-страницы, как правило, описывается с помощью DOM (Document Object Model), которая представляет организацию элементов html на странице. Для взаимодействия с DOM (добавления, изменения, удаления html-элементов) применяется JavaScript. Но когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с объектами JavaScript, то операции производились бы быстрее.
Для этого Vue.js использует виртуальный DOM. Виртуальный DOM представляет легковесную копию обычного DOM. Если приложению нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM. Если данные, которые используются в приложении Vue.js, изменяются, то изменения вначале вносятся в виртуальный DOM. Потом Vue выбирает минимальный набор компонентов, для которых надо выполнить изменения на веб-странице, чтобы реальный DOM соответствовал виртуальному. Благодаря виртуальному DOM повышается производительность приложения.
Vue.js поддерживается всеми браузерами, которые совместимы с ECMAScript 5. На данный момент это все современные браузеры, в том числе IE11.
Первое приложение
Вместо использования локального файла мы можем загружать фреймворк из CDN по ссылке:
Либо если используется Node.js, то можно установить Vue.js через пакетный менеджер npm с помощью команды:
В данном случае будем использовать подключение файла из CDN. Для этого определим следующую веб-страницу:
Для создания объекта приложения в Vue.js применяется объект Vue . Этот объект, во-первых, определяет корневой элемент приложения на веб-странице с помощью параметра el :
То есть корневым элементом приложения будет элемент с id равным app.
Также объект определяет используемые данные через параметр data :
В данном случае определено только свойство message, которая хранит строку.
В элементе с на веб-странице, используя двойные фигурные скобки мы можем вывести значение свойства message и более того связать участок веб-станицы с этим элементом.
Последний параметр объекта Vue - methods определяет действия, которые выполняются в приложении:
Здесь определен метод setMessage, который является обработчиком события ввода для элемента input на странице. Через параметр event в этот метод передается информация о событии. В частности, используя значение event.target.value , мы можем получить введенное пользователем значение и присвоить его переменной message. Для получения переменной message, которая была определена выше в параметра data, применяется ключевое слово this .
А для связи элемента input с этим методом определяется атрибут v-on:input="setMessage" .
Теперь запустим веб-страницу в веб-браузере (можно просто кинуть веб-страницу в браузер):
И при вводе в текстовое поле будет автоматически изменяться значение, которое выводится на веб-страницу.
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.
Если вы хотите узнать больше о Vue перед тем как начать, мы создали видео с рассказом об основных принципах работы на примере проекта.
Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.
Начало работы
В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Проще всего попробовать Vue.js, начав с примера Hello World. Откройте его в другой вкладке, и изменяйте по ходу чтения руководства. Можно и просто создать index.html файл на диске и подключить Vue:
В разделе по установке описаны и другие варианты установки Vue. Обратите внимание, мы не рекомендуем новичкам начинать с vue-cli , особенно если нет опыта работы с инструментами сборки Node.js.
Если предпочитаете что-то более интерактивное, можете пройти эту серию уроков на Scrimba, которая представляет собой сочетание скринкастов и песочницы для проверки примеров кода, где вы можете остановиться и продолжить изучение в любое время.
Декларативная отрисовка
В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:
Вот мы и создали наше первое Vue-приложение! Выглядит как простая отрисовка шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как это проверить? Просто откройте консоль JavaScript в браузере (прямо здесь, на этой странице) и задайте свойству app.message новое значение. Вы тут же увидите соответствующее изменение в браузере.
Кроме интерполяции текста, можно также связывать атрибуты элементов:
Наведи на меня курсор на пару секунд, чтобы увидеть динамически связанное значение title!Здесь мы встречаемся с чем-то новым. Атрибут v-bind , называется директивой. Директивы имеют префикс v- , указывающий на их особую природу. Как вы уже могли догадаться, они добавляют к отображаемому DOM особое реактивное поведение, управляемое Vue. В данном примере директива говорит «сохраняй значение title этого элемента актуальным при изменении свойства message в экземпляре Vue».
Условия и циклы
Управлять присутствием элемента в DOM тоже довольно просто:
Этот пример демонстрирует возможность связывать данные не только с текстом и атрибутами, но и со структурой DOM. Более того, Vue также имеет мощную систему анимации, которая автоматически применяет эффекты переходов, когда элементы добавляются/обновляются/удаляются.
Есть и другие директивы, каждая из которых имеет своё предназначение. Например, директива v-for для отображения списков, используя данные из массива:
Работа с пользовательским вводом
Чтобы пользователи могли взаимодействовать с вашим приложением, используйте директиву v-on для отслеживания событий, указав метод-обработчик:
Обратите внимание, в методе мы просто обновляем состояние приложения, не затрагивая DOM — всю работу с DOM выполняет Vue, а вы пишете код, который занимается только логикой приложения.
Vue также предоставляет директиву v-model , позволяющую легко связывать элементы форм и состояние приложения:
Разбиение приложения на компоненты
Важной концепцией Vue являются компоненты. Эта абстракция позволяет собирать большие приложения из маленьких «кусочков». Они представляют собой пригодные к повторному использованию объекты. Если подумать, почти любой интерфейс можно представить как дерево компонентов:
Во Vue компонент — это, по сути, экземпляр Vue с предустановленными опциями. Создать новый компонент во Vue просто:
Теперь его можно использовать в шаблоне другого компонента:
Пока что у нас получилось так, что во всех элементах списка будет один и тот же текст — это не очень-то интересно. Хотелось бы иметь возможность передавать данные от родительского в дочерние компоненты. Давайте изменим определение компонента, чтобы он мог принимать входной параметр:
Теперь можно передать текст задачи в каждый компонент с помощью v-bind :
Конечно, этот пример слегка надуман, но посмотрите сами — мы разделили наше приложение на два меньших объекта, и дочерний, в разумной мере, отделён от родительского с помощью интерфейса входных параметров. Теперь можно улучшать компонент <todo-item> , усложнять его шаблон и логику, но не влиять на родительское приложение.
В крупных приложениях разделение на компоненты становится обязательным условием для сохранения управляемости процесса разработки. Разговор о компонентах ещё далеко не окончен и мы вернёмся к ним позднее в этом руководстве, но уже сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:
Отношение к пользовательским элементам Web Components
Вы могли заметить, что компоненты Vue довольно похожи на пользовательские элементы, являющиеся частью спецификации W3C Web Components. Дело в том, что синтаксис компонентов Vue и правда намеренно следует этой спецификации. В частности, компоненты Vue реализуют API слотов и специальный атрибут is . Но есть и несколько ключевых различий:
Спецификация Web Components была завершена, но она реализована ещё не во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. Компоненты Vue, напротив, не требуют никаких полифилов и работают во всех поддерживаемых браузерах (IE9 и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.
Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые значимые из них: кросс-компонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.
Готовы к большему?
Пока мы лишь кратко представили самые основные возможности ядра Vue.js — остаток этого руководства посвящён более детальному рассмотрению этих и других возможностей, поэтому советуем прочитать его целиком!
Видео Vue Mastery. Посмотрите бесплатный курс Vue Mastery Введение в курс Vue.
Релиз фреймворка Vue.js 2.0 состоялся еще в 2016 году, но многие владельцы технологических компаний и Javascript разработчики все еще не решаются использовать его в своих проектах. В этой статье мы рассмотрим ключевые моменты данного решения.
По Vue JS отзывы довольно положительные. Согласно опросу компании Monterail, 81% разработчиков отмечают простоту интеграции как основное преимущество фреймворка Vue, в т. ч. и интеграцию с backend фреймворками. Большинство специалистов считает, что освоить Vue намного легче чем другие популярные Javascript фреймворки. Документация — еще одна сильная сторона Vue — так считают 60% опрошенных разработчиков. Аналогичное число респондентов (56%) отмечает производительность данного решения как одну из его самых сильных сторон. Разберемся подробнее, что же такое Vue.js?
Описание фреймворка
Vue.js — это JavaScript библиотека для создания веб-интерфейсов с использованием шаблона архитектуры MVVM (Model-View-ViewModel).
Поскольку Vue работает только на «уровне представления» и не используется для промежуточного программного обеспечения и бэкэнда, он может легко интегрироваться с другими проектами и библиотеками. Vue.js содержит широкую функциональность для уровня представлений и может использоваться для создания мощных одностраничных веб-приложений.
- Реактивные интерфейсы;
- Декларативный рендеринг;
- Связывание данных;
- Директивы (все директивы имеют префикс «V-». В директиву передается значение состояния, а в качестве аргументов используются html атрибуты или Vue JS события);
- Логика шаблонов;
- Компоненты;
- Обработка событий;
- Свойства;
- Переходы и анимация CSS;
- Фильтры.
Где применяется Vue.js
Vue подходит для небольших проектов, которым необходимо добавить немного реактивности, представить форму с помощью AJAX, отобразить значения при вводе данных пользователем, авторизация или другие аналогичные задачи. Vue легко масштабируется и хорошо подходит для объемных проектов, поэтому его называют прогрессивным фреймворком.
Vue также отлично подходит для крупных одностраничных приложений благодаря своим основным компонентам, таким как Router и Vuex. С Vue можно как использовать общедоступные API для создания приложений, так и реализовывать выполняемые сервером приложения. Но Vue лучше всего подходит для разработки решений, которые используют внешние API для обработки данных.
С помощью Vue также можно создавать frontend блога на популярных CMS. Vue.js отлично подходит и для разработки динамических интерфейсов, которые адаптируются под пользователя.
Vue.js: примеры лучших проектов
Рассмотрим некоторые крупные проекты, основанные на фреймворке Vue. Отметим сложности, с которыми столкнулись их разработчики, и что им дал переход на Vue.js.
Codeship
Codeship — это платформа для непрерывной интеграции, основанная на облачной технологии. Она позволяет хранить веб-приложения в облаке. Эту платформу используют такие гиганты, как Red Bull, CNN и Product Hunt.
Прежде чем Codeship перешел с jQuery на Vue, их пользователи постоянно сталкивались с зависанием и сбоями при работе с веб-приложением. У них был длинный список пользователей которые были недовольны работой приложения. Их история является отличным примером того, как Vue может помочь создать программное обеспечение с надежным и простым в обслуживании код.
Vue.js помог команде Codeship правильно организовать свой код и улучшить пользовательский интерфейс.
Livestorm
Livestorm — это веб-приложение для создания вебинаров. Оно помогает таким компаниям, как Workable, Pipedrive и Instapage продавать свои услуги или обучать клиентов с помощью вебинаров.
Livestorm — это пример Vue JS приложения,созданного с нуля. Благодаря Vue и его повторно используемым компонентам, их процесс разработки был быстрым и довольно простым.
Чем Vue.js отличается от Angular и React
Рассмотрим основные отличия фреймворка Vue от Angular и React.
Компоненты
Все эти фреймворки основаны на компонентах. При этом необходимо отметить, что React и Vue хорошо подходят для обработки так называемых немых компонентов — небольших, не имеющих состояния функций, которые получают входные данные и возвращают элементы в качестве вывода. Vue.js компоненты не имеют особых требований к своим именам, но рекомендуется придерживаться правил W3C для кастомных компонентов — использовать буквы нижнего регистра и разделения через дефис.
Фреймворк против библиотеки
Angular — это фреймворк, а не библиотека, так как содержит четкие указания по структуре приложения, а также имеет широкую функциональность. Angular является полноценным решением для enterprise-приложений, которое не требует от вас анализа каких-либо других библиотек или применения дополнительных инструментов. React и Vue, с другой стороны, универсальны. Их библиотеки могут быть сопряжены со всеми типами пакетов, хотя у Vue их немного, так как он еще довольно молод.
Гибкость использования
Вы можете работать с React или Vue, просто добавив библиотеку Javascript в исходный код. Это невозможно в случае с Angular, так как он предназначен для более сложных задач. Когда же речь идет о микросервисах и микроприложениях, React и Vue предоставляют больше контроля над размером приложений, позволяя выбирать только те элементы, которые необходимы в конкретных случаях. Также они предлагают большую гибкость для перехода от одностраничных приложений к микросервисам, позволяя использовать части прежнего приложения. А Angular, благодаря своему широкому функционалу, лучше всего подходит для разработки самих одностраничных приложений.
Быстродействие и размер файлов
Фреймворк Angular довольно объемен. Из-за своего широкого функционала, размер архивированного файла составляет около 143k, по сравнению с более простыми Vue и React с 23K и 43k соответственно.
React и Vue имеют Virtual DOM (document object model), который создает копию объектного представления структурного документа и позволяет работать с визуальной копией, а не с самим представлением. Этот подход помогает повысить производительность фреймворков и таким образом ваше приложение будет работать быстрее. Vue, в частности, обладает отличной производительностью и глубоким распределением памяти, но все эти фреймворки в основном схожи по своим характеристикам.
В качестве вывода необходимо отметить, что основными преимуществами Vue JS является его простота и легкость изучения. Вместо того, чтобы изучать сложную терминологию и инструменты для создания простого приложения, как в случае с React, вы можете сразу приступать к разработке. Это делает Vue JS идеальным выбором для стартапов или любой команды разработчиков, которая хочет быстро создавать высокопроизводительные веб-приложения с легко читаемым кодом.
Изучение Vue.js стоит начать с того, что это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Ядро Vue включает в себя библиотеку ядра, маршрутизатор и Vuex, а сам фреймворк пригоден для постепенного внедрения, в отличие от аналогов-монолитов.
Дорожная карта для изучения Vue.js в 2022:
В первую очередь посетите русскоязычную версию официального сайта Vue.js: там вы найдёте ответы на большинство вопросов, которые будут возникать в ходе изучения. Далее переходите к инструментам и технологиям, которые вам потребуются для эффективной работы с фреймворком.
Сборка
Менеджеры пакетов npm и Yarn облегчат вам жизнь, самостоятельно вычисляя комплекс операций для каждого пакета и запуская установщик пакетов с нужными параметрами.Также освойте работу со сборщиком модулей JavaScript Webpack и таск-раннерами по типу npm-scripts.
Что касается Webpack, многие считают его сложным. Это так, однако без него ряд Vue-функций, таких как однофайловые компоненты, будут недоступны. Для лучшего понимания предлагаем прочитать нашу статью по изучению Webpack с нуля.
Стилизация
Это базис, необходимый любому фронтендеру. Углубляйте знания, изучая препроцессоры Sass/SCSS и PostCSS, фреймворк Tailwind и однофайловые компоненты.
Управление состоянием
Необходимо разобраться с состоянием компонентов во Vue, а также паттерном управления состоянием Vuex. Подробнее о том, что такое Vuex и как им пользоваться, вы узнаете из данного видео:
Проверка типов
Предположим, приложение растёт, и риск получить баги, связанные с проверкой типов, — тоже. В некоторых случаях следует использовать TypeScript для корректной проверки типов во всём приложении, а в некоторых — PropTypes. Как это работает? Можно перечислить входные параметры с помощью объекта, в котором свойство и значение содержат информацию о типе конкретного параметра и его имени. Например:
Что же касается работы с API, здесь всё стандартно:
Маршрутизация
Vue Router — это официальная библиотека маршрутизации фреймворка. К её преимуществам относится модульная конфигурация маршрутизатора, удобный контроль навигации, настраиваемая прокрутка страниц, анимация переходов представлений и многое другое. Суть в том, что Vue Router добавляет текущий маршрут в каждый компонент — достаточно лишь указать this.$route внутри необходимого компонента.
Библиотеки утилит
Библиотека утилит OpenGL (GLU) — это графическая библиотека, которая является надстройкой над OpenGL. На самом деле, здесь намного больше вариантов для изучения, чем представлено в дорожной карте по изучению Vue.js. Среди них:
Тестирование
Разработчики Vue также являются создателями Vue Test Utils — официальной библиотеки для модульного тестирования: советуем ознакомиться.
Читайте также: