Поиск по сайту:

Кто говорит, тот сеет, кто слушает, тот собирает жатву (П. Буаст).

Что такое директива в Vue и как ее использовать?

2 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
19 марта 2021
Фреймворк призван предоставить такие функции, которые упрощают и ускоряют процесс разработки для разработчиков. Vue.js – это такая многофункциональная среда JavaScript, которая предоставляет множество встроенных функций и директив для быстрого выполнения процесса разработки. Но должны быть некоторые сценарии, когда вам нужны некоторые функции, которые недоступны в платформе, поэтому вам нужно создать свои собственные.

В этом посте мы изучим и рассмотрим встроенные директивы, предоставляемые фреймворком Vue.js, а также научимся создавать и использовать нашу собственную директиву Vue, созданную на заказ.

 

Директива

Директивы – это атрибуты, которые вы можете связать с элементами DOM, с префиксом «v-», который помогает узнать библиотеке, что это особый тип синтаксиса, используемый для выполнения некоторых задач. Директивы обычно используются для прямого управления DOM. Некоторые из наиболее часто используемых и известных директив – это «v-if», «v-for» и «v-show».

Директивы используются для применения эффектов к элементам DOM, но реактивно. Давайте разберемся с этим на примере:

 

Директива v-if

<p v-if=”showText”> Вы можете просматривать текст. </p>

 

В указанном выше теге «v-if» – это директива, которая удалит или добавит тег абзаца «<p>», в зависимости от истинности переменной «showText».

 

Директива “v-show”

Точно так же у нас есть директива v-show, которая может выполнять те же функции, которые описаны выше:

<p v-show=”showText”> Вы можете просматривать текст. </p>

 

Тонкое различие между «v-if» и «v-show» заключается в том, что «v-if» не отображает элемент при загрузке страницы, если связанная переменная не истинна, и загружается, когда переменная становится истинной. Напротив, «v-show» будет отображать элемент во время загрузки веб-страницы, но скрывает его. Таким образом, «v-if» является эффективным по времени во время загрузки страницы и занимает много времени, когда значение переменной становится истинным. Он должен отображать весь элемент, в то время как «v-show» – это время, эффективное по истинности переменной, занимающее время во время загрузки веб-страницы.

Хорошо! Давайте посмотрим на директиву, которая принимает аргумент.

Читать  Исправление ошибки сломанной трубы с помощью SSH-соединения

 

Директива v-bind

Другой наиболее широко используемой директивой является «v-bind», которая используется для взаимодействия и обновления атрибутов HTML. Например, если мы хотим привязать некоторую переменную к атрибуту «href» тега <a>, мы можем привязать атрибут «href» следующим образом:

<v-bind:href=”URL”> </>

 

Директива “v-on”

Как и директива «v-bind», Vue предоставляет директиву «v-on» для привязки переменной для прослушивания событий, запускаемых в DOM. Например, для прослушивания события Click и привязки к нему некоторой переменной синтаксис будет выглядеть следующим образом:

<button v-on:click =”buttonBool=! buttonBool”> Нажми меня ! </button>

 

В кавычках мы можем указать как выражение, так и функции.

 

Вывод

Мы узнали о директивах в Vue и посмотрим, как использовать директивы в Vue.js. Мы обсудили некоторые из наиболее часто используемых и основных встроенных директив Vue.js, которые очень помогают и экономят огромное количество времени при разработке.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться в соц. сетях:
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Читайте также

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close