Creating custom directives in Vue - Quick Revision & Summary

Recall & Review

beginner

What is a custom directive in Vue?

A custom directive in Vue is a way to add reusable behavior to DOM elements, like changing styles or handling events, beyond what components do.

beginner

How do you register a global custom directive in Vue 3?

Use app.directive('name', { mounted(el, binding) { /* code */ } }) where app is your Vue application instance.

intermediate

What are the lifecycle hooks available in Vue 3 custom directives?

The main hooks are <code>created</code>, <code>beforeMount</code>, <code>mounted</code>, <code>beforeUpdate</code>, <code>updated</code>, <code>beforeUnmount</code>, and <code>unmounted</code>. They let you run code at different stages of the directive's life.

intermediate

What does the binding argument provide in a directive hook?

It gives info about the directive usage like value (passed value), oldValue, arg (argument), and modifiers (special flags).

beginner

Why use custom directives instead of components for DOM manipulation?

Custom directives are better for low-level DOM tasks like focusing an input or changing styles, where components would be too heavy or complex.

Which Vue 3 directive hook runs when the element is inserted into the DOM?

A updated

B mounted

C created

D beforeUnmount

The mounted hook runs when the element is inserted into the DOM.

How do you access the value passed to a custom directive in its hook?

A this.value

B el.value

C binding.value

D directive.value

The passed value is accessed via binding.value in directive hooks.

Which of these is NOT a valid lifecycle hook for Vue 3 custom directives?

A beforeDestroy

B mounted

C beforeMount

D unmounted

beforeDestroy was used in Vue 2; Vue 3 uses beforeUnmount instead.

What is the purpose of the modifiers property in the binding object?

A To access the parent component's data

B To store the element's CSS classes

C To hold the directive's name

D To pass extra flags to customize directive behavior

modifiers are extra flags like v-my-directive.modifier to customize behavior.

Where do you register a local custom directive in a Vue component?

A Inside the <code>directives</code> option of the component

B In the <code>methods</code> section

C In the <code>data</code> option

D In the <code>template</code> only

Local directives are registered inside the component's directives option.

Explain how to create and use a simple custom directive in Vue 3 that changes the background color of an element.

Think about how you tell Vue to do something special when the element appears.

Describe the role of the binding object in Vue custom directives and what information it provides.

It's like a package of info about how the directive is used.