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

6
42676
Добавить в избранное

В этой статье поговорим о Vue.js – JavaScript библиотеке с двусторонней привязкой данных по принципу модель–представление.

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

В начале

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

Если вы хотите использовать Node, то Vue доступен как модуль npm. Для модуля доступен собственный интерфейс в терминале для гибкой настройки проекта.

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

1. Меню навигации

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

  1. Модель (Model) – другими словами, данные приложения. В рамках библиотеки это js-объект, содержащий переменные и их исходные значения.
  2. Представление (View) – HTML-код отображающий данные для пользователя и содержащий eventListner’ы для взаимодействия с моделью.
  3. ViewModel – в терминологии MVC это был бы контроллер. Фактически, в рамках Vue.js ViewModel – связующее звено между моделью и представлением.

Демо на CodePen

Как вы можете видеть, работа с библиотекой довольно проста. Vue.js проделывает большую работу и предоставляет удобный и привычный синтаксис:

  • Простой js-объект для опций
  • {{Двойные скобки}} для шаблонов
  • Встроенные атрибуты вида «v-something» для добавления функциональности непосредственно в HTML.

2. Встроенный редактор

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

Демо на CodePen

Еще одна вещь, которую следует отметить в приведенном коде, — это атрибут v-if. Он показывает или скрывает целый элемент в зависимости от состояния переменной. Прочитать о нем больше можно здесь.

3. Форма заказа

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

Демо на CodePen

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

Фильтр довольно прост – он добавляет знак доллара и правильную цифровую дробь.

4. Мгновенный поиск

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

Демо на CodePen

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

5. Переключаемая сетка

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

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

Демо на CodePen

В заключение

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

Интересуетесь веб-разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 6

  1. На русскоязычной версии сайта рекомендуют использовать unpkg CDN

Добавить комментарий