5 практических примеров использования Vue.js
В этой статье поговорим о Vue.js – JavaScript библиотеке с двусторонней привязкой данных по принципу модель–представление.
Философия Vue.js заключается в том, чтобы предоставить простейший возможный API для создания в реальном времени двухсторонней привязки данных между представлением (HTML-шаблоном) и моделью (JavaScript-объект).
В начале
Самый простой способ установить Vue.js - просто подключить ее тегом <script> в конец HTML-документа. Вся библиотека находится в одном js-файле, который можно загрузить с официального сайта или импортировать напрямую через CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
Если вы хотите использовать Node, то Vue доступен как модуль npm. Для модуля доступен собственный интерфейс в терминале для гибкой настройки проекта.
Ниже приведены пять примеров использования Vue.js со ссылками на живые демо с кодом и комментариями.
1. Меню навигации
Построим простую навигационную панель. Есть несколько основных компонентов, которые должны иметь все приложения на Vue.js:
- Модель (Model) – другими словами, данные приложения. В рамках библиотеки это js-объект, содержащий переменные и их исходные значения.
- Представление (View) – HTML-код отображающий данные для пользователя и содержащий eventListner’ы для взаимодействия с моделью.
- ViewModel – в терминологии MVC это был бы контроллер. Фактически, в рамках Vue.js ViewModel – связующее звено между моделью и представлением.
Как вы можете видеть, работа с библиотекой довольно проста. Vue.js проделывает большую работу и предоставляет удобный и привычный синтаксис:
- Простой js-объект для опций
- {{Двойные скобки}} для шаблонов
- Встроенные атрибуты вида «v-something» для добавления функциональности непосредственно в HTML.
2. Встроенный редактор
В предыдущем примере наша модель имела только пару предопределенных значений. Если мы хотим предоставить пользователям возможность менять любые данные, нам нужно сделать двустороннюю привязку данных и объединить поле ввода со свойством модели. Когда вводится текст, он автоматически сохраняется в модели text_content, которая затем вызывает обновление для представления.
Еще одна вещь, которую следует отметить в приведенном коде, - это атрибут v-if. Он показывает или скрывает целый элемент в зависимости от состояния переменной. Прочитать о нем больше можно здесь.
3. Форма заказа
В этом примере показан список услуг и суммарная стоимость выбранных. Так как наши услуги хранятся в массиве, мы можем использовать директиву v-for для перебора всех записей и их отображения. Если в массив добавлен новый элемент или изменен любой из старых, Vue автоматически обновит данные и покажет новые.
Чтобы отобразить цены в правильном формате, нам необходимо определить простой фильтр валюты. Фильтры позволяют изменять или фильтровать данные модели. Чтобы определить настраиваемый фильтр, используем следующий синтаксис:
// Определяет пользовательский фильтр "валюта"
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});
Фильтр довольно прост – он добавляет знак доллара и правильную цифровую дробь.
4. Мгновенный поиск
Теперь создадим приложение, в котором будут представлены некоторые статьи-примеры. Приложение также будет иметь текстовое поле поиска, позволяющее фильтровать, какие статьи будут отображаться. Все статьи будут храниться в массиве, и те из них, что соответствуют поисковому запросу, будут в попадать в массив filteredArticles.
Поле ввода привязано к модели searchString. Когда текст вводится, модель мгновенно обновляется, и массив filteredArticles генерируется снова. Таким образом, мы можем создать поиск в реальном времени, не заботясь о рендеринге или настройке прослушивателей событий.
5. Переключаемая сетка
В этом последнем примере проверим на Vue общий сценарий, когда страница имеет разные режимы компоновки. Как и в предыдущем приложении, будем показывать список статей, хранящихся в массиве.
Нажав одну из кнопок в верхней панели, будет переключаться режим показа между сеткой, содержащей большие изображения, и списком раскладок с меньшими изображениями и текстом.
В заключение
Vue.js умеет гораздо больше, чем то, что мы увидели в этих примерах. Библиотека умеет в анимацию, пользовательские компоненты и множество других функции. Поэтому к ознакомлению рекомендуется отличная официальная документация библиотеки.