VueJS — Директивы

VueJS — Директивы

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

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

Синтаксис

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Пример

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

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

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

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

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

Результат

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Фильтры

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

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

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

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

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

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

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree