Phenquestions
Фреймворк призван предоставить такие функции, которые делают процесс разработки проще и быстрее для разработчиков. Vue.js - это такая многофункциональная инфраструктура JavaScript, которая предоставляет множество встроенных функций и директив, чтобы быстро сделать процесс разработки. Но должны быть сценарии, когда вам нужна какая-то функциональность, недоступная в фреймворке, поэтому вам нужно создать свой собственный.
В этом посте мы узнаем и взглянем на встроенные директивы, предоставляемые Vue.js framework, а также научимся создавать и использовать нашу собственную директиву Vue.
Директива
Директивы - это атрибуты, которые вы можете связать с элементами DOM, с префиксом «v-», который помогает узнать библиотеке, что это особый тип синтаксиса, используемый для выполнения некоторых задач. Директивы обычно используются для прямого управления DOM. Некоторые из наиболее часто используемых и известных директив - это «v-if», «v-for» и «v-show».
Директивы используются для применения эффектов к элементам DOM, но реактивно. Давайте разберемся с этим на примере:
Директива v-if
Вы можете просмотреть текст.
В указанном выше теге «v-if» - это директива, которая удаляет или добавляет тег абзаца «
», Зависит от истинности переменной« showText ».
Директива "v-show"
Точно так же у нас есть директива v-show, которая может выполнять те же функции, которые описаны выше:
Вы можете просмотреть текст.
Тонкое различие между «v-if» и «v-show» заключается в том, что «v-if» не отображает элемент при загрузке страницы, если связанная переменная не истинна, и загружается, когда переменная становится истинной. Напротив, «v-show» будет отображать элемент во время загрузки веб-страницы, но скрывает его. Таким образом, «v-if» - это время, эффективное во время загрузки страницы и требующее много времени, когда значение переменной становится истинным. Он должен отображать весь элемент, в то время как «v-show» - это время, эффективное при достоверности переменной, отнимающее время во время загрузки веб-страницы.
Хорошо! Давайте посмотрим на директиву, которая принимает аргумент.
Директива v-bind
Другой наиболее широко используемой директивой является «v-bind», которая используется для взаимодействия и обновления атрибутов HTML. Например, если мы хотим привязать некоторую переменную к атрибуту «href» тег, мы можем привязать атрибут «href» следующим образом:
Директива v-on
Подобно директиве «v-bind», Vue предоставляет директиву «v-on» для привязки переменной для прослушивания событий, запускаемых в DOM. Например, для прослушивания события Click и привязки к нему некоторой переменной синтаксис будет выглядеть следующим образом:
В кавычках мы можем указать выражение, а также функции.
Заключение
Мы узнали о директивах во Vue и посмотрим, как использовать директивы во Vue.js. Мы обсудили некоторые из наиболее часто используемых и основных встроенных директив Vue.js, что очень помогает и экономит огромное количество времени при разработке.
