VueJS для чайников - от Vanilla JS до ES6
Если вы были в мире программирования в течение многих лет, вы согласитесь со мной, что способ работы в Интернете сильно изменился за относительно короткое время.
С появлением Ajax и таких библиотек, как jQuery, веб-страницы или веб-приложения стали удобнее для пользователей.
В настоящее время, если мы думаем о создании веб-приложения, в большинстве случаев мы думаем о создании одностраничного приложения. Если вы не знакомы с концепцией, одностраничное приложение или SPA - это, по сути, веб-сайт, доступ к которому осуществляется с помощью одной точки входа, обычно index.html. Мы можем перемещаться по приложению, изменять маршрут и видеть, как обновляется наша страница или как наше представление, без необходимости повторно загружать весь контент.
Как упоминалось выше, это позволяет нам предложить приятный пользовательский интерфейс, и, что лучше всего, у нас есть несколько инструментов для создания нашего собственного SPA, такого как Angular, React и Vue, о последнем мы поговорим в этой статье.
Итак, что же тогда такое Vue?
Первое, что мы должны принять во внимание, это то, что Vue не новый язык программирования. Vue - это фреймворк для программирования веб-приложений и мобильных приложений с использованием Javascript. С Vue мы можем делать то же самое, что и с Angular или React. Нам не нужно знать, как использовать Angular или React, чтобы научиться использовать Vue, только Javascript.
Прогрессивная и реактивная структура
Vue определяется как прогрессивный фреймворк, потому что нам не нужен весь фреймворк, чтобы делать простые вещи. Мы можем добавить больше функций, если нам нужно делать более сложные вещи.
Например, если у нас есть список данных на простой html-странице, и мы хотим отображать, сортировать или фильтровать по определенному значению, мы можем использовать Vue в его простейшей форме. Как и в случае с jQuery, нам нужно импортировать только основную библиотеку.
Но если мы хотим показать детали элемента на другой странице, нам нужно добавить библиотеку vue-router, которая позволяет нам определять маршруты в нашем приложении.
А что, если мы хотим обмениваться данными между нашими компонентами? Если мы хотим обмениваться данными между компонентами нашего приложения, мы можем добавить библиотеку V uex, которая позволяет нам управлять глобальным состоянием нашего приложения.
Еще одна характеристика Vue - это то, что он реактивен, он реагирует на изменения в модели данных. Это означает, что Vue всегда отслеживает изменения в нашей модели, чтобы обновить представление, если это потребуется.
Напишем наше первое приложение на Vue!
Что мы собираемся делать сейчас? Мы собираемся создать веб-страницу, которая будет отображать 100 лучших криптовалют, получая данные из API CoinMarketCap. Мы создадим HTML-страницу и импортируем Vue из CDN, кроме того, мы импортируем еще три библиотеки: Axios, Numeral.js и Bootstrap.
Первый шаг - создать наш html-код, добавив скрипт с экземпляром Vue.
В этом первом фрагменте кода мы создаем новый экземпляр vue, который получает параметр JSON. Этот JSON будет определять поведение нашего приложения. В атрибуте el, мы должны указать, где мы хотим, чтобы экземпляр vue работал. С другой стороны, мы также должны определить атрибут data, который будет содержать нашу модель данных.
Мы определили два свойства данных: загрузка и валюты. Первым свойством будет флаг, показывающий или скрывающий простую метку с сообщением о загрузке. А второй будет содержать список криптовалют.
Учтите, что мы используем директиву v-if, она позволит нам условно отображать блоки HTML.
Теперь нам нужно добавить функцию для загрузки валют из CoinMarketCap API.
Здесь мы видим новые свойства в нашем параметре JSON, методах и смонтированных. Свойство методы позволяет нам определять методы для построения логики приложения. В нашем случае мы определили единственный метод с именем loadCurrencies для загрузки списка валют в нашу модель данных в валютах атрибут.
Смонтированный - это метод жизненного цикла, который позволяет нам добавлять поведение в наше приложение после добавления экземпляра или компонента в DOM.
Теперь нам нужно добавить html-код, чтобы показать список криптовалют.
Здесь мы можем увидеть что-то новое. Использование директивы v-else позволяет нам указывать «блок else» для v-if. С другой стороны, элемент template служит невидимой оболочкой. Окончательный результат рендеринга не будет включать элемент ‹template›. Кроме того, директива v-for позволяет нам многократно отображать определенный блок.
Что важно учитывать, так это использование директивы v-bind или их сокращения «:», это позволяет нам использовать выражение для указания значения. Например, мы используем v-bind для присвоения выражения атрибуту src в изображениях.
Теперь нам нужно добавить эти два метода к нашему объекту JSON.
На данный момент наше приложение почти готово. Последнее, что мы собираемся добавить, - это фильтр для форматирования чисел, которые мы собираемся отображать в списке.
Потрясающие! У нас уже есть первое приложение, созданное на VueJS!
В этой демонстрации мы использовали только некоторые функции этого фреймворка. Если вам понравилось и вы хотите узнать больше, я рекомендую вам посетить официальный сайт Vue.
Вы можете увидеть, как работает демо здесь, а весь код - на странице 1950labs на Github.
Это первая часть из 2 статей. Следите за нашим блогом на 1950Labs, чтобы быть в курсе и не пропустить следующую часть, в которой мы будем создавать SPA с Vue, используя пользовательский интерфейс Vue CLI. Увидимся в следующем посте!
В 1950Labs мы верим в распределенные команды для создания высококачественного программного обеспечения. Если вы ищете альтернативу подрядчикам, фрилансерам или поставщикам из США, напишите нам по адресу [email protected], чтобы начать разговор. - Мы работаем по вашему часовому поясу.
(Опубликовано в Монтевидео VueJS Meetup)
