Если хотите, вы также можете прочитать этот пост на португальском. Приятного чтения 🤓

Vue.js

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

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

MVC

MVC - это аббревиатура от Model-View-Controller, который представляет собой шаблон архитектуры программного обеспечения, который разделяет ваше приложение на три уровня: View (уровень взаимодействия с пользователем), Model (уровень управления данными) и Controller (управление приложением). слой).

Этот шаблон использовался многими командами и компаниями, независимо от типа, языка или размера проекта. Некоторые популярные фреймворки были построены по этой архитектуре. Пример тому - Angularjs, созданный командой Google в 2010 году.

CBA

CBA - это аббревиатура от Component-Based-Architecture. Он принимает небольшие части интерфейсов как независимые компоненты и повторно использует их в других системах. Все станет яснее, если вы представите компонент как ресурс, являющийся частью интерфейса.

Компоненты должны:

  • Быть независимым;
  • Взаимодействовать с другими компонентами в том же пространстве, не затрагивая их;
  • Иметь собственную структуру, методы и API;
  • Быть многоразовым и «подключенным» в любом месте приложения;

Хорошим примером фреймворка на основе компонентов является React. Он был создан Facebook в 2013 году, следуя этому новому подходу к веб-разработке.

Компоненты

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

Именно тогда вам необходимо познакомиться с концепциями компонентов с сохранением состояния и без состояния.

С сохранением состояния

Компонент с отслеживанием состояния имеет информацию о состоянии приложения и может его редактировать, прогнозируя, какие изменения могут или произойдут.

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

Без гражданства

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

Обратите внимание, что теперь функция increment получает состояние в качестве параметра и ничего не меняет за пределами своей области действия. Это код без гражданства.

Веб-компоненты

Все эти понятия и термины относятся к веб-компонентам. По сути, веб-компоненты представляют собой набор API-интерфейсов, которые позволяют создавать новые многоразовые и полностью настраиваемые HTML-теги.

Для работы с веб-компонентами необходимо понимать их спецификации, которые делятся на Пользовательские элементы, Импорт HTML, Шаблоны HTML и Теневой ДОМ . Целью этого поста не является обсуждение веб-компонентов, но если вам интересна эта тема, взгляните на документацию.

Некоторые из последних фреймворков широко используют две спецификации: Пользовательские элементы, которые позволяют создавать новые элементы DOM, и Теневой DOM, который определяет, как вы инкапсулируете стиль и разметку в компонент. .

Модульность

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

По сути, вы можете экспортировать модуль внутри файла bar.js и использовать его в другом файле app.js.

К сожалению, не все браузеры пока не распознают подобные модули, поэтому необходимо использовать такие инструменты, как Webpack или Browserify, которые называются пакетом модулей. Они берут все модули, помещают их только во все модули и помещают в один файл, понятный браузерам.

Привет, мир

Теперь вы знакомы с концепциями, пора приступить к программированию на Vue!

Так же, как и в других фреймворках, можно начать разработку двумя способами: через сеть доставки контента (CDN) или интерфейс командной строки (CLI).

CDN

Используя CDN, все, что вам нужно сделать, это добавить скрипт в файл HTML и инициализировать новый экземпляр Vue, назначив объект в качестве его аргументов. Обратите внимание, что больше ничего не нужно для написания вашего первого Hello World.

CLI

$ npm install -g vue-cli
$ vue init webpack мой-проект

Если вы предпочитаете использовать интерфейс командной строки, у вас будет базовая структура для начала разработки по некоторым шаблонам. Какие это шаблоны? webpack, webpack-simple, browserify и простой просмотр. Первое, что вам нужно будет принять, - это какой комплект модулей использовать: веб-пакет или браузер. После этого вам нужно будет решить, какие требования нужны проекту.

Используя шаблоны без суффикса -simple, вы получите более полную структуру с предварительно настроенными загрузчиками, тестовой средой для e2e и unit, routes, ESLint и т. Д. расширенные ресурсы. В противном случае, если вам не нужны эти требования для запуска проекта, используйте параметры с -simple.

Компоненты

Теперь мы собираемся объяснить, как создаются компоненты во Vue.

Глобалы

Vue.component (имя тега, параметры);

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

Как использовать свой компонент?

Отдельный файл

Однофайловые компоненты (или просто SFC) - это другой подход к созданию компонентов, и это главное отличие Vue от других фреймворков.

Как работает SFC?

  • Расширение файла должно быть .vue;
  • Один однофайловый компонент имеет: разметку (HTML), стиль (CSS) и поведение (JS);
  • Позволяет работать с любым языком разметки;
  • Позволяет работать с пре- и / или постпроцессорами;
  • Он добавляет область вашего CSS;

Как бы выглядел этот файл?

После того, как вы получите общее представление о структуре и о том, как работает компонент, давайте перейдем к темной стороне.

Данные

данные - это самая основная часть компонента, отвечающая за его состояние, и это должна быть функция, возвращающая объект. Вам просто нужно использовать знаменитый {{}} внутри вашего шаблона, чтобы связать его.

Жизненный цикл

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

Чтобы разобраться в деталях и увидеть полный список жизненного цикла, обратитесь к документации. Хорошим упражнением для улучшения концепции жизненного цикла является вызов всех функций только с console.log для визуализации каждого шага.

Реквизит

Свойства используются для связи между родительскими и дочерними компонентами. Они должны быть объектом, который позволяет выполнять проверку, сообщая, требуется ли он и его ожидаемый тип.

Если у вас возникли вопросы о том, как использовать реквизиты, обратитесь к документации.

Директивы

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

Вы также можете создавать новые директивы. Подробности читайте в документации.

Методы

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

Более подробно о методах вам может помочь документация.

Модификаторы

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

У нас есть типичный пример ниже, в котором preventDefault () используется в событии отправки формы для отмены действия формы по умолчанию, которое представляет собой отправку страницы.

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

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

Тесты

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

Модульный тест

Vue позволяет использовать Jasmine в качестве тестового фреймворка и Karma для их запуска. Оба являются одними из самых популярных в сообществе.

Сквозной (e2e)

Vue позволяет использовать Nightwatch в качестве фреймворка e2e, который является одним из наиболее часто используемых сообществом Nodejs. Инструмент очень прост и работает с интуитивно понятным кодом.

Мобильный, настольный, гибридный ..

Если вас интересовали гибридные и / или настольные приложения, самое время! Вы также можете использовать Vue для создания настольных или гибридных приложений. Некоторые альтернативы, доступные на Github:

Сообщество

За каждой структурой стоит сообщество - люди, которые работают вместе с другими участниками над улучшением инструмента. Что делает сообщество Vue?

i18n

Документация доступна на нескольких языках: японском, китайском, американском английском, корейском, русском и бразильском португальском (в стадии разработки).

"Отлаживать"

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

Потрясающий список

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

Slack

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

"Эл. адрес"

Вы предпочитаете получать информацию на свой почтовый ящик? Информационный бюллетень - это хороший способ быть в курсе событий в мире технологий.

"Форум"

Для разработчиков нормально использовать переполнение стека, не так ли? У Vue есть форум с тысячами вопросов, и вы можете быстрее найти решение своей проблемы.

Статьи

Бразильское сообщество Vuejs очень активно, всегда публикует высококачественный контент о кодировании или о фреймворке.

Только для СПА?

Если вашему проекту необходимо:

Этот инструмент полезен для небольших проектов или больших проектов, SPA или нет.

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

Я приглашаю вас посмотреть код и слайды этого проекта, в которых я использую концепции, затронутые в этой публикации.

использованная литература

В этом сообщении в качестве справки использовались ссылки ниже. Если вы хотите узнать больше об этом инструменте, просмотрите эти материалы:

Тебе это нравится? Уже слышали об этом средстве? Нажмите ❤ или напишите что-нибудь, связанное с обменом знаниями. Ваше здоровье! 🍺