В этой статье поговорим о Vue.js – JavaScript библиотеке с двусторонней привязкой данных по принципу модель–представление.
Философия Vue.js заключается в том, чтобы предоставить простейший возможный API для создания в реальном времени двухсторонней привязки данных между представлением (HTML-шаблоном) и моделью (JavaScript-объект).
Самый простой способ установить Vue.js — просто подключить ее тегом <script> в конец HTML-документа. Вся библиотека находится в одном js-файле, который можно загрузить с официального сайта или импортировать напрямую через CDN:
Если вы хотите использовать Node, то Vue доступен как модуль npm. Для модуля доступен собственный интерфейс в терминале для гибкой настройки проекта.
Ниже приведены пять примеров использования Vue.js со ссылками на живые демо с кодом и комментариями.
Построим простую навигационную панель. Есть несколько основных компонентов, которые должны иметь все приложения на Vue.js:
- Модель (Model) – другими словами, данные приложения. В рамках библиотеки это js-объект, содержащий переменные и их исходные значения.
- Представление (View) – HTML-код отображающий данные для пользователя и содержащий eventListner’ы для взаимодействия с моделью.
- ViewModel – в терминологии MVC это был бы контроллер. Фактически, в рамках Vue.js ViewModel – связующее звено между моделью и представлением.
Как вы можете видеть, работа с библиотекой довольно проста. Vue.js проделывает большую работу и предоставляет удобный и привычный синтаксис:
- Простой js-объект для опций
- <<Двойные скобки>> для шаблонов
- Встроенные атрибуты вида «v-something» для добавления функциональности непосредственно в HTML.
В предыдущем примере наша модель имела только пару предопределенных значений. Если мы хотим предоставить пользователям возможность менять любые данные, нам нужно сделать двустороннюю привязку данных и объединить поле ввода со свойством модели. Когда вводится текст, он автоматически сохраняется в модели text_content, которая затем вызывает обновление для представления.
Еще одна вещь, которую следует отметить в приведенном коде, — это атрибут v-if. Он показывает или скрывает целый элемент в зависимости от состояния переменной. Прочитать о нем больше можно здесь.
В этом примере показан список услуг и суммарная стоимость выбранных. Так как наши услуги хранятся в массиве, мы можем использовать директиву v-for для перебора всех записей и их отображения. Если в массив добавлен новый элемент или изменен любой из старых, Vue автоматически обновит данные и покажет новые.
Чтобы отобразить цены в правильном формате, нам необходимо определить простой фильтр валюты. Фильтры позволяют изменять или фильтровать данные модели. Чтобы определить настраиваемый фильтр, используем следующий синтаксис:
Фильтр довольно прост – он добавляет знак доллара и правильную цифровую дробь.
Теперь создадим приложение, в котором будут представлены некоторые статьи-примеры. Приложение также будет иметь текстовое поле поиска, позволяющее фильтровать, какие статьи будут отображаться. Все статьи будут храниться в массиве, и те из них, что соответствуют поисковому запросу, будут в попадать в массив filteredArticles.
Поле ввода привязано к модели searchString. Когда текст вводится, модель мгновенно обновляется, и массив filteredArticles генерируется снова. Таким образом, мы можем создать поиск в реальном времени, не заботясь о рендеринге или настройке прослушивателей событий.
В этом последнем примере проверим на Vue общий сценарий, когда страница имеет разные режимы компоновки. Как и в предыдущем приложении, будем показывать список статей, хранящихся в массиве.
Нажав одну из кнопок в верхней панели, будет переключаться режим показа между сеткой, содержащей большие изображения, и списком раскладок с меньшими изображениями и текстом.