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

Фреймворк призван предоставить такие функции, которые упрощают и ускоряют процесс разработки для разработчиков. Vue.js – это такая многофункциональная среда JavaScript, которая предоставляет множество встроенных функций и директив для быстрого выполнения процесса разработки. Но должны быть некоторые сценарии, когда вам нужны некоторые функции, которые недоступны в платформе, поэтому вам нужно создать свои собственные.

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

Директива

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

(Пока оценок нет)

Загрузка...