Why custom directives matter in Vue - Quick Recap

Recall & Review

beginner

What is a custom directive in Vue?

A custom directive in Vue is a special marker in the template that tells Vue to do something specific with the element, like changing its behavior or appearance beyond normal HTML attributes.

beginner

Why do we use custom directives instead of regular components?

Custom directives are used when you want to directly manipulate the DOM or add low-level behavior that components can't easily handle, like focusing an input or adding event listeners.

intermediate

How do custom directives improve code reusability?

They let you package common DOM behaviors into reusable directives, so you can apply the same behavior to many elements without repeating code.

intermediate

What lifecycle hooks are available in Vue custom directives?

Vue custom directives have hooks like created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted to control behavior at different stages of the element's life.

beginner

Give an example of a real-life situation where a custom directive is useful.

For example, automatically focusing an input field when a form appears, so the user can start typing right away without clicking.

What is the main purpose of a custom directive in Vue?

A To add reusable low-level DOM behavior

B To create new components

C To style elements with CSS

D To manage Vuex state

Custom directives let you add reusable behaviors that directly manipulate the DOM.

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

A unmounted

B created

C updated

D mounted

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

When should you prefer a custom directive over a component?

A When you want to add behavior to an element without changing its structure

B When you want to reuse UI layouts

C When you want to manage data

D When you want to create routes

Custom directives add behavior to elements without changing their structure.

Which of these is NOT a benefit of using custom directives?

A Adding low-level element behavior

B Improving accessibility automatically

C Changing component state

D Reusing DOM manipulation code

Custom directives do not manage component state; they focus on DOM behavior.

How do custom directives help keep Vue code clean?

A By styling elements

B By separating DOM behavior from component logic

C By handling routing

D By replacing components

They separate DOM behavior from component logic, making code easier to read and maintain.

Explain in your own words why custom directives matter in Vue development.

Think about how you might want to add special behavior to elements without changing their structure.

Describe a simple example where a custom directive would be better than a component.

Consider a behavior that affects an element directly, like focusing or highlighting.