VueJS — Директивы

VueJS — Директивы

От автора: Vue JS директивы являются, по сути, инструкцией к действиям. Мы уже знакомы с такими директивами как v-if, v-show, v-else, v-for, v-bind, v-model, v-on, и т.д.

В данном разделе мы познакомимся с пользовательскими директивами. Мы создадим глобальные директивы, похожим образом, как мы это делали с компонентами.

Синтаксис

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Директива создается использованием Vue.directive. Она получает имя, как продемонстрировано в коде выше. Давайте рассмотрим пример для того, чтобы разобраться, как работают директивы.

Пример

В данном примере мы создали пользовательскую директиву changestyle, как показано в следующем коде.

Мы присваиваем следующую директиву changestyle для div.

Если мы просмотрим код элемента в браузере, то увидим отображение текста VueJs Directive в красном цвете и с увеличенным размером шрифта до 30px. Результат

Мы использовали метод bind, который является частью директивы method. Нам понадобятся три аргумента e1 и элемент, которому должна быть присвоена пользовательская директива. Привязка — это как передача аргументам пользовательской директиве, например, v-changestyle = ”{color:’green’}”, где green будет вычисляться в аргументе привязки, а vnode — это элемент, то есть nodename.

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

Результат

Цвет текста изменён на красный. Значение передаётся при помощи следующего кода.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

А доступ можно получить при помощи следующего отрывка кода.

Фильтры

VueJS поддерживает фильтры, которые помогают форматировать текст. Они используются вместе с v-bind и интерполяциями ({{}}). Для фильтров нам нужно указывать символ конвейеризации в конце выражений JavaScript. Пример

В коде выше мы создали простой фильтр countletters. Фильтр countletters подсчитывает количество символов, введённых в текстовое поле. Чтобы использовать фильтры, нам нужно использовать свойство filter и определить используемый фильтр с помощью следующего кода.

Мы определяем метод countletters и возвращаем заданную длину строки. Чтобы использовать фильтр в отображении, мы использовали оператор pipe и имя фильтра, то есть countletters.

В браузере будет отображаться следующее.

Мы также можем передать в фильтр аргументы, используя следующий код.

Теперь countletters будет содержать три параметра: message, a1 и a2. Кроме того, мы можем передать множественные фильтры интерполяции при помощи следующего кода.

В свойстве фильтров countlettersA и countlettersB будут содержаться два метода и countlettersA будет передавать данные в countlettersB.

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте: