Введение в создание веб-приложений в Vue.js

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

В этой статье мы кратко рассмотрим Vue.js, чтобы вы сами могли решить, подойдет ли вам тот тип проектов, над которым вы склонны работать, и подходит ли он вам.

Что такое Vue.js?

Хотя он обычно не пишется с заглавной буквы, «Vue» на самом деле является аббревиатурой от Visual Understanding Environment. Его основная цель - облегчить разработку веб-приложений за счет снижения сложности кода. Он имеет много общего с React.js, но текущая версия Vue рендерится быстрее, чем React, и кажется более эффективной.

Вью сложно учиться?

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

Кривая обучения с Vue немного менее крутая, чем с React, и намного менее крутая, чем с Angular. Таким образом, можно точно сказать, что Vue относительно легко освоить по сравнению с другими популярными средами разработки.

Как Vue помогает достичь целей?

Это немного варьируется в зависимости от того, какова ваша цель на самом деле, но в целом вы связываете блоки кода с HTML-элементами. Эта методология облегчает внедрение интерактивности и динамического контента, чем при использовании обычного HTML, CSS и JavaScript.

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

Еще одним преимуществом Vue является то, что он обеспечивает модульность, то есть вы можете повторно использовать компоненты, которые вы разрабатываете в нескольких проектах.

У Vue есть какие-нибудь интересные трюки в рукаве?

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

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

Начиная

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

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

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

1. Добавить скрипт, ссылающийся на vue.js

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

Вот пример включения vue.js из CDN:

И вот пример включения vue.js из каталога на вашем собственном сервере:

Без этой ссылки на vue.js ничего не может быть связано с Vue.

2. Добавьте компоненты Vue в ваше тело HTML

Вот что происходит с этим кодом:

На данный момент это не имеет большого смысла, но часть Vue - это пустой элемент «demo-grid», плюс добавление «v-директивы» к вводу запроса (в данном случае это «v-модель»). ”, Который используется для привязки кода Vue к входным данным).

3. Если для проекта требуется шаблон компонента, добавьте его в тело HTML

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

4. Добавьте экземпляр Vue

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

  • Строка 46 указывает, что браузер должен искать компонент на странице с именем «demo-grid», а строка 47 указывает, что «# grid-template» следует использовать в качестве шаблона для компонента (это код шаблона, добавляемый на шаге 3 от строки 9 до строки 30).
  • Блок от строки 48 до строки 52 определяет свойства компонента.
  • Строки 53-62 определяют функцию для сортировки данных в таблице.
  • Строки от 63 до 85 определяют функцию для фильтрации данных (из результатов в поисковом запросе).
  • Строки 86-90 определяют функцию для заглавных слов в наборе данных.
  • Строки 91-97 определяют метод сортировки данных.

5. Добавьте код запуска перед закрывающим тегом скрипта

Если вы выполнили шаги с 1 до 4 и открыли файл в браузере, все, что вы увидите, - это окно поиска и ничего более. Это потому, что все необходимое для построения таблицы было определено, но не создано. Поэтому на шаге 5 мы добавляем код, который фактически создает таблицу, которая была определена всеми предыдущими шагами.

  • Строка 100 создает новый объект Vue.
  • Строка 101 указывает, к какому элементу привязать действие.
  • Строки от 102 до 111 предоставляют данные объекта, которые будут связаны с элементом.

Тестирование

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

В чем дело? Почему это так скучно? Это потому, что там не применяется стиль. Если мы используем стиль по умолчанию из примера JSFiddle, таблица будет выглядеть так:

При вводе чего-либо в поле поиска (без учета регистра) результаты будут соответствующим образом отфильтрованы:

Нажав на заголовок столбца, вы сможете изменить порядок отображения. Например, нажатие на заголовок столбца «Мощность» изменит результаты, отображаемые в порядке уровня мощности.

Улучшение и адаптация

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

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

  • Стиль стола как полосатый стол Bootstrap
  • Изменить количество столбцов
  • Измените данные на что-то совершенно другое

1. Добавление Bootstrap

2. Обертывание элемента в таблице Bootstrap

3. Настройка корневого элемента для использования модели макета Bootstrap

4. Рестайлинг стрел

5. Изменение данных

6. тестирование

  • Нефильтрованный и несортированный

  • Сортировка по директиве (по возрастанию)

  • Сортировка по Используется для (по возрастанию)

  • Отфильтровано по «условному»

  • Отфильтровано по «условному» и отсортировано по директиве (по возрастанию)

Заключительные мысли

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

изображение заголовка любезно предоставлено Александр Савич

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.