Что такое Vue.js? Обзор для начинающих

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

Давайте посмотрим на Vue.js и то, что вам нужно знать, чтобы начать его использовать.

Знакомство с Vue

Vue – наиболее универсальный фреймворк, доступный в настоящее время для JavaScript. Это также легче всего понять как программистам, так и непрограммистам.

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

Например, что, если вы хотите добавить переключатель для изменения темы вашего сайта со светлого на темный режим? Как насчет добавления простого меню, скрытого за кнопкой гамбургера? Вот тогда вам может понадобиться изучить Javascript.

Это задачи, которые довольно легко выполнить в JavaScript. Вы можете добавить фрагмент кода JavaScript в тег скрипта, и все готово. Вот как выглядит вставка текста с ванильным JavaScript:

& lt; html> & lt; head> & lt; / head> & lt; body> & lt; div id = “example”> & lt; / div> & lt; script> document.getElementById (“example”). innerHTML = “Привет, мир! “; & lt; / script> & lt; / body> & lt; / html>

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

& lt; html> & lt; head> & lt; script src = “https://www.makeuseof.com/vue-js-beginners-overview/<https://cdn.jsdelivr.net/npm/vue/dist/ vue.js> “> & lt; / script> & lt; / head> & lt; body> & lt; div id =” example “> {{message}} & lt; / div> & lt; script> var app = new Vue ({ el: ‘#example’, data: {message: ‘Hello Vue!’}}) & lt; / script> & lt; / body> & lt; / html>

Давайте немного разберем эти примеры. В JavaScript код должен был найти элемент, выбрать его аспект и изменить его. В Vue мы указали HTML, где ожидать переменный текст. Затем мы создали объект JavaScript, назначили его элементу и установили переменный текст.

Этот простой пример иллюстрирует важный момент. Лучше всего держать ваш код отделенным от вашего HTML. В примере Vue Vue не управляет HTML напрямую. Он управляет только своим бизнесом. И это дало HTML больше функциональности без добавления кода.

Vue – это фреймворк или нет?

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

Однако Vue – это фреймворк. На своей вводной странице говорится: «В отличие от других монолитных фреймворков, Vue разработан с нуля для постепенного внедрения». Это означает, что вы можете использовать в своих приложениях столько возможностей Vue, сколько хотите.

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

Для кого Vue?

Благодаря своей мощности и универсальности Vue привлекает широкую аудиторию.

Vue для любителей HTML / CSS / JS

JavaScript – это быстро меняющаяся экосистема с большим оттоком. Можно посвятить себя коллекции инструментов и увидеть, как они устаревают два года спустя. JavaScript также сам по себе усложняет веб-сайты. Установка фреймворка и огромного шаткого стека пакетов Node только усугубляет ситуацию.

По этой причине некоторые люди предпочитают придерживаться основ. HTML работает нормально, у CSS есть свои причуды, а JavaScript – отчасти напуганный. Но все они прочные! Они продолжают меняться и развиваться, но медленно и неуклонно. Многие фреймворки в конечном итоге добавляют изменения, которые нарушают ваш код.

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

Vue может заменить оба этих инструмента и решить их проблемы. И это происходит без полного захвата вашего сайта. Он знакомит с современными практиками JavaScript без проблем с современным JavaScript.

Vue для быстрого прототипирования

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

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

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

Vue для разработки веб-приложений

Разработчики ожидают определенных преимуществ от современных интерфейсных фреймворков. Замещение строк для HTML, компонентная архитектура и инструменты – хорошие примеры. Vue имеет все эти преимущества, а также те, которые упомянуты в разделе о фреймворках выше.

Vue предназначен для разработки собственных мобильных приложений

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

Один из вариантов – использовать NativeScript для создания мобильных приложений, что позволяет разработчикам создавать для Android и iOS один и тот же код JavaScript. Разработчики Nativescript могут даже переносить свой веб-код на мобильные устройства, не нанимая новых разработчиков. И он имеет отличную поддержку Vue.

Как Vue сравнивается с другими фреймворками?

Vue, Angular и React – три самых популярных фреймворка согласно Обзор состояния JS за 2019 год. Вот некоторые моменты, которые следует учитывать:

Большая тройка фреймворков

• Angular был первым фронтенд-фреймворком с большим именем. Он опубликован Google и существует с 2010 года. Он познакомил мир с динамическим HTML через директивы и трехстороннюю привязку данных, которая волшебным образом заставляет код обновляться на странице без обновления.
• React был впервые выпущен Facebook в 2013 году и является более доступной альтернативой Angular. React наиболее известен тем, что использует JSX и компоненты.
• Vue был выпущен в 2014 году Эваном Ю, бывшим сотрудником Google. Vue не представил ничего слишком революционного. Но он действительно представил намного лучший и чистый способ работы.

Преимущества большой тройки

• Angular – это фреймворк корпоративного уровня. Он существует дольше всех и создается и поддерживается Google.
• React был наиболее широко принятым из трех фреймворков, согласно Состояние JavaScript в 2019 г.. Он известен как простой в работе и гибкий.
• Vue субъективно является самой простой структурой для изучения и реализации. И это остается таким же простым, как и есть, без ущерба для богатого и мощного набора функций.

Критика Большой тройки

Угловой

Как известно, раньше Angular было сложно выучить. Версия 1 (AngularJS) использовала много жаргона компьютерных наук на уровне колледжа в своей документации. Однако версия 2 (Angular) значительно упростилась и оптимизировалась.

• Когда Google выпустил Angular, он сохранил концепции более высокого уровня от AngularJS. Но компания настолько изменила детали, что многие разработчики до сих пор сочли это запутанным.
• В первые дни Angular было много оттока, с критическими изменениями почти в каждом выпуске. Angular сейчас лучше, но он все еще очень формальный, жесткий и трудный для изучения для некоторых разработчиков.

Реагировать

JSX – один из лучших и в то же время самых сложных аспектов React. Он объединяет HTML, CSS и JS в один язык. Это делает все проще для разработчиков, но усложняет дизайнерам.

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

Vue

Vue решает все проблемы, упомянутые в отношении двух других больших. В отличие от Angular, его легко освоить. И в отличие от JSX, компоненты Vue разделяют HTML, CSS и JS.

• Дизайнерам намного проще работать с компонентом Vue. И поддерживать все в чистоте – это не полностью зависит от разработчика.
• Самые большие проблемы, с которыми сталкивается Vue, – это относительно низкий уровень внедрения и отсутствие «приложений-убийц». Довольно много компаний используют Vue, но, возможно, ни одна из них не имеет узнаваемого бренда.

Vue – еще одна причуда?

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

То, что Vue не хватает в поддержке на уровне предприятия, компенсируется энтузиазмом и поддержкой на низовом уровне. Эван Ю проводит кампанию Patreon, чтобы поддержать себя и еще одного разработчика. В некотором смысле Vue управляется демократично. Пока существует достаточный интерес к Vue, чтобы компании были готовы его поддерживать, Vue останется.

Лучшие части Vue

Vue предлагает лучшие части других интерфейсных фреймворков, а также множество других функций, уникальных для Vue. Вот лишь неполный список:

• Vue использует компонентную архитектуру для структурирования и повторного использования.
• Он разделяет HTML, CSS и JS в своих компонентах.
• Vue будет выглядеть знакомым как разработчикам, так и дизайнерам.
• Он предлагает полный графический интерфейс для обслуживания, построения и создания проектов.
• Vue использует горячую перезагрузку, когда запускается как приложение. Горячая перезагрузка обновляет только то, что изменилось на странице, без обновления.

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

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

Google добавляет более подробные красочные карты на Google Maps

Карты Google уже хороши, но эти новые карты делают его еще лучше.

Об авторе

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

Подробнее о Ли Натане Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

Пожалуйста, подтвердите свой адрес электронной почты в электронном письме, которое мы вам только что отправили.