Why custom directives matter in Vue - Visual Breakdown

Concept Flow - Why custom directives matter

Vue Component Renders

↓

Template with Directive

↓

Vue Compiler Detects Directive

↓

Custom Directive Hook Called

↓

Directive Logic Executes

↓

DOM Element Updated

↓

User Sees Effect

Vue renders a component, finds a custom directive in the template, runs its logic, and updates the DOM element accordingly.

Execution Sample

Vue

<template>
  <input v-focus />
</template>
<script>
export default {
  directives: {
    focus: {
      mounted(el) { el.focus() }
    }
  }
}
</script>

This code uses a custom directive 'v-focus' to automatically focus the input element when it appears.

Execution Table

Step	Action	Directive Hook	Element State	Effect
1	Vue renders component	No directive hook yet	Input element created	No focus yet
2	Vue compiler finds v-focus directive	Prepare to call mounted hook	Input element ready	No focus yet
3	Call mounted(el) hook	mounted called	Input element focused	Cursor blinks inside input
4	User sees input focused	Directive logic done	Input element focused	User can type immediately

💡 Directive mounted hook ran once, input element is focused, no further action needed

Variable Tracker

Variable	Start	After 1	After 2	Final
el.focused	false	false	false	true

Key Moments - 2 Insights

Why does the input get focused automatically?

Because the custom directive's mounted hook runs after the element is created, calling el.focus() as shown in execution_table step 3.

Can we use custom directives for things other than focus?

Yes, custom directives can run any DOM-related logic when elements mount, update, or unmount, making them very flexible.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the input element become focused?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Check the 'Element State' and 'Directive Hook' columns in step 3.

According to variable_tracker, what is the value of el.focused after step 2?

A true

B false

C undefined

D null

💡 Hint

Look at the 'After 2' column for el.focused in variable_tracker.

If the mounted hook did not call el.focus(), what would change in the execution table?

A Input element would still be focused at step 3

B Directive hook would not be called at all

C Input element would not be focused after step 3

D User would see input focused immediately at step 1

💡 Hint

Refer to the 'Effect' column in execution_table step 3 and 4.

Concept Snapshot

Custom directives in Vue let you add special behavior to DOM elements.
They run hooks like mounted when elements appear.
Use them to manipulate elements directly, like focusing inputs.
They keep your templates clean and reusable.
Directive hooks run after element creation, updating the DOM.
This helps add interactive features easily.

Full Transcript

When Vue renders a component, it looks for any custom directives in the template. For example, if an input has a v-focus directive, Vue detects it during compilation. Then Vue calls the directive's mounted hook once the input element is created in the DOM. Inside this hook, the directive runs code like el.focus() to focus the input automatically. This updates the element's state so the user sees the cursor blinking inside the input, ready to type. Custom directives matter because they let you add reusable, direct DOM behavior without cluttering your component logic. They run at specific lifecycle moments, like when elements mount, update, or unmount, giving you control over element behavior. This visual trace shows how the directive hook runs after rendering and changes the element state, making the input focused for the user.