Персонализираните директиви ви позволяват да разширите функционалността на вашите уеб страници Vue по мащабируем и модулен начин.

Директивите са програмни конструкции, които определят как интерпретаторите и компилаторите трябва да обработват входове за дадена операция. Директивите на Vue разширяват функционалността на HTML елементите в шаблоните на Vue, позволявайки директно манипулиране на DOM.

Можете да използвате директиви във Vue, за да добавите слушатели на събития, наред с други операции. Ще прикачите допълнителни атрибути към HTML елементи, за да използвате директиви в приложението си.

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

Директивите във Vue имат a v- префикс, за да ги разграничите от обикновените HTML атрибути. The v- prefix казва на Vue компилатора, че атрибутът е Vue директива, така че да може да обработва и прилага поведението на тази директива към HTML елемента.

Ето един пример, който демонстрира използването на v-шоу атрибут за показване на съдържанието на an h2 елемент:

"вярно">Здравей Vue</h2>
instagram viewer

Vue.js има много повече вградени директиви като v-свързване, v-ако, и v-on, което ви позволява да изпълнявате задачи като обвързване на данни, условно изобразяване, обработка на събития, и още.

Дефиниране на персонализирани директиви във Vue

Можете да дефинирате персонализирани директиви, за да добавите нова функционалност за многократна употреба за вашите Vue.js приложения. Създаването на персонализирани директиви изисква две основни стъпки. Първо, ще регистрирате директивата локално или глобално. След това ще дефинирате поведението на директивата с кукички за жизнения цикъл.

Регистриране на персонализирани директиви

Можете да регистрирате персонализирана директива във Vue локално или глобално, в зависимост от предвидения обхват. По-разпространена практика обаче е директивите да се регистрират глобално. Това гарантира, че директивите са достъпни навсякъде във вашето Vue приложение.

Можете да регистрирате персонализирани директиви локално, ако възнамерявате да използвате персонализираната директива в прост Vue компонент. Ето как можете да регистрирате a v-смяна на цвета директива локално: