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

29.01.2019 ИТ

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

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

В начале

Самый простой способ установить Vue.js — просто подключить ее тегом

Если вы хотите использовать 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 умеет гораздо больше, чем то, что мы увидели в этих примерах. Библиотека умеет в анимацию, пользовательские компоненты и множество других функции. Поэтому к ознакомлению рекомендуется отличная официальная документация библиотеки.