Как создать пользовательские директивы в Vue

Директивы — это программные конструкции, которые определяют, как интерпретаторы и компиляторы должны обрабатывать входные данные для операции. Директивы Vue расширяют функциональность HTML-элементов в шаблонах Vue, позволяя напрямую манипулировать DOM.

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

Структура директив Vue

Директивы в Vue имеют в- префикс, чтобы отличить их от обычных атрибутов HTML. в- префикс сообщает компилятору Vue, что атрибут является директивой Vue, поэтому он может обрабатывать и применять поведение этой директивы к элементу HTML.

Вот пример, демонстрирующий использование v-шоу атрибут для отображения содержимого h2 элемент:

"истинный">Привет, Вью</h2>

Vue.js имеет гораздо больше встроенных директив, таких как

v-связать, v-если, и v-на, что позволяет выполнять такие задачи, как привязка данных, условный рендеринг, обработка событий, и более.

Определение пользовательских директив в Vue

Вы можете определить пользовательские директивы, чтобы добавить новые, повторно используемые функции для ваших приложений Vue.js. Создание пользовательских директив требует двух основных шагов. Во-первых, вы зарегистрируете директиву локально или глобально. Затем вы определите поведение директивы с помощью ловушек жизненного цикла.

Регистрация пользовательских директив

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

Вы можете зарегистрировать пользовательские директивы локально, если собираетесь использовать пользовательскую директиву внутри простого компонента Vue. Вот как вы можете зарегистрировать v-изменить цвет директива локально: