Практические примеры использования Vue.js

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

Сложность

Философией Vue.js является предоставление наиболее простого API для разработки в режиме реального времени, двустороннюю привязку данных между представлением (HTML) и моделью (объект JavaScript).

Подготовка

Самый простой способ установить Vue.js, просто подключить его с помощью тега <script> в конце HTML документа. Вся библиотека находится в одном файле JavaScript, который можно скачать с официального сайта или импортировать непосредственно через CDN:

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

Если вы хотите использовать библиотеку совместно с Node.js, vue доступен как npm модуль. Существует также официальный CLI, который позволяет пользователям быстро настроить весь проект, основанный на шаблоне Premade.

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

1. Создание навигационного меню на Vue.js

See the Pen reJyeB by Siteacademy (@Siteacademy) on CodePen.

Для начала построим простую навигационную панель. Есть несколько основных компонентов для каждого приложения Vue.js:

  • Модель, или другими словами, данные приложения. В Vue.js это просто объект JavaScript, содержащий переменные и их начальные значения.
  • Представление - HTML шаблон. Здесь мы выбираем что будем отображать, добавлять обработчики событий, и обрабатывать различные примеры использования модели.
  • ViewModel - экземпляр Vue, который связывает модель и представление вместе, давая им возможность общаться друг с другом.

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

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

  • простой объект JavaScript для всех параметров
  • {{двойные скобки}} для шаблона
  • v-something встроенные атрибуты для добавления функциональности непосредственно в HTML.

2. Создание встроенного редактора на Vue.js

See the Pen grvmro by Siteacademy (@Siteacademy) on CodePen.

Здесь мы использовали специальный атрибут v-if, который отображает или скрывает целый элемент в зависимости от значения переменной.

3. Создание формы заказа на Vue.js

Этот пример иллюстрирует несколько услуг и их общую стоимость. Так как наши услуги хранятся в массиве, мы можем воспользоваться директивой v-for для перебора всех записей и их отображения. Если новый элемент добавляется в массив или один из старых изменяется, Vue.js будет автоматически обновлять и показать новые данные.

See the Pen ZWreWg by Siteacademy (@Siteacademy) on CodePen.

Для отображения цены в необходимом формате, мы используем один из встроенных фильтров Vue.js. Фильтры позволяют изменять данные модели - в нашем случае идеально подойдет фильтр валюты, поскольку он добавляет знак доллара и нужное количество знаков после запятой. Так же, как и в фильтрах Angular, они применяются с использованием следующего синтаксиса - {{ some_data | filter }}.

4. Создание мгновенного поиска на Vue.js

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

See the Pen GZQWqy by Siteacademy (@Siteacademy) on CodePen.

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

5. Создание переключаемой сетки на Vue.js

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

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

See the Pen QNQpEz by Siteacademy (@Siteacademy) on CodePen.

 

Перевод статьи 5 Practical Examples For Learning Vue.js

Тэги: pluginlibraryvue.js

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.