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