Directive with arguments and modifiers in Vue - Step-by-Step Execution

Concept Flow - Directive with arguments and modifiers

Start Vue template

↓

Parse directive

↓

Identify directive name

↓

Extract argument (if any)

↓

Extract modifiers (if any)

↓

Call directive hook with arg and modifiers

↓

Apply behavior to element

↓

Render updated DOM

Vue reads the directive, finds its argument and modifiers, then runs the directive logic applying changes to the element.

Execution Sample

Vue

<template>
  <input v-focus:select.once />
</template>

<script setup>
const vFocus = {
  mounted(el, binding) {
    if (binding.arg === 'select') {
      el.focus()
      el.select()
    }
  },
  updated(el, binding) {
    if (binding.arg === 'select' && !binding.modifiers.once) {
      el.focus()
      el.select()
    }
  }
}
</script>

This Vue code uses a directive with an argument 'select' and a modifier 'once' to focus and select the input only once when mounted.

Execution Table

Step	Directive Parsing	Argument	Modifiers	Directive Hook Called	Effect on Element
1	Reads v-focus:select.once	select	{ once: true }	mounted(el, binding)	No effect yet
2	Checks argument 'select'	select	{ once: true }	inside mounted hook	Condition true, proceed
3	Checks modifier 'once'	select	{ once: true }	inside mounted hook	Condition true, proceed
4	Calls el.focus()	select	{ once: true }	inside mounted hook	Input element gains focus
5	Calls el.select()	select	{ once: true }	inside mounted hook	Input text is selected
6	Directive logic ends	select	{ once: true }	mounted hook complete	Input focused and text selected
7	No further calls due to 'once'	select	{ once: true }	No re-invocation	No repeated focus/select

💡 Directive mounted hook finishes; 'once' modifier prevents repeated calls.

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
binding.arg	undefined	select	select	select
binding.modifiers	{}	{ once: true }	{ once: true }	{ once: true }
el.focused	false	true	true	true
el.textSelected	false	false	true	true

Key Moments - 3 Insights

Why does the directive only run once even if the component updates?

Because the 'once' modifier tells Vue to run the directive hook only one time, as shown in execution_table row 7.

What is the role of the argument 'select' in the directive?

The argument 'select' is used inside the directive to decide what behavior to run, as seen in execution_table row 2.

How do modifiers affect directive behavior?

Modifiers like 'once' are boolean flags that change directive logic flow, demonstrated in execution_table rows 3 and 7.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of binding.arg at Step 3?

A undefined

B "focus"

C "select"

D "once"

💡 Hint

Check the 'Argument' column at Step 3 in the execution_table.

At which step does the input element gain focus?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Effect on Element' column for when focus is applied.

If the 'once' modifier was removed, what would change in the execution?

A Directive would run multiple times on updates

B Argument would change to undefined

C Input would never be focused

D Modifiers would become empty

💡 Hint

Refer to the exit_note and row 7 about the 'once' modifier effect.

Concept Snapshot

Vue directives can have arguments and modifiers.
Argument is accessed as binding.arg.
Modifiers are boolean flags in binding.modifiers.
Directive hooks use these to customize behavior.
Modifiers like 'once' control how often directive runs.
Example: v-focus:select.once focuses and selects input once.

Full Transcript

In Vue, directives can have arguments and modifiers to customize their behavior. The argument is accessed via binding.arg and modifiers via binding.modifiers inside directive hooks. For example, a directive v-focus:select.once uses 'select' as argument and 'once' as a modifier. When Vue parses this directive, it calls the mounted hook with these values. The directive checks if the argument is 'select' and if the 'once' modifier is true, then focuses and selects the input element only once. The execution table shows each step: parsing the directive, checking argument and modifiers, calling focus and select methods, and stopping further calls due to 'once'. Variables like binding.arg and binding.modifiers hold these values throughout. Beginners often wonder why the directive runs only once or how arguments and modifiers affect behavior. The visual quiz tests understanding of these steps and effects. This helps learners see how Vue directives with arguments and modifiers work step-by-step.