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.

Practice

1. In Vue, what does a directive argument specify?
v-bind:title uses title as an argument. What does it do?

easy

A. It adds a CSS class to the element.

B. It changes the directive into a different directive.

C. It tells the directive which attribute or property to target.

D. It defines a new event listener.

Solution

1. Step 1: Understand directive arguments

   Directive arguments specify what part of the element the directive should affect, like an attribute or property.

2. Step 2: Analyze v-bind:title

   Here, title is the argument telling v-bind to bind the value to the element's title attribute.

3. Final Answer:

   It tells the directive which attribute or property to target. -> Option C

4. Quick Check:

   Directive argument = target attribute/property [OK]

Hint: Arguments specify target attribute/property in directives [OK]

Common Mistakes:

• Thinking arguments change directive type
• Confusing arguments with modifiers
• Assuming arguments add CSS classes

2. Which of the following is the correct syntax to use a modifier with a directive argument in Vue?
v-on:click.prevent is an example. Which is correct?

easy

A. v-on:click.prevent

B. v-on.prevent:click

C. v-on:prevent.click

D. v-on:click.prevent()

Solution

1. Step 1: Recall Vue directive syntax

   In Vue, modifiers come after the argument, separated by dots, e.g., v-on:click.prevent.

2. Step 2: Check each option

   v-on:click.prevent matches the correct pattern: directive, colon, argument, dot, modifier. Others mix order or add parentheses incorrectly.

3. Final Answer:

   v-on:click.prevent -> Option A

4. Quick Check:

   Modifiers follow arguments with dots [OK]

Hint: Modifiers come after arguments, separated by dots [OK]

Common Mistakes:

• Placing modifiers before arguments
• Using parentheses with modifiers
• Switching order of argument and modifier

3. What will be the effect of this Vue directive?

<button v-on:click.once.prevent="submit">Submit</button>

medium

A. The submit method runs every click and does not prevent default event.

B. The submit method runs every click and prevents default event.

C. The submit method runs once but does not prevent default event.

D. The submit method runs once on click and prevents default event.

Solution

1. Step 1: Understand modifiers .once and .prevent

   .once makes the event handler run only once. .prevent calls event.preventDefault() to stop default browser behavior.

2. Step 2: Analyze the directive behavior

   The button's click triggers submit only once and prevents default action each time.

3. Final Answer:

   The submit method runs once on click and prevents default event. -> Option D

4. Quick Check:

   .once + .prevent = run once + prevent default [OK]

Hint: Modifiers chain to combine behaviors like once and prevent [OK]

Common Mistakes:

• Ignoring the effect of .once modifier
• Confusing .prevent with .stop
• Assuming method runs multiple times

4. Identify the error in this Vue directive usage:

<input v-model.trim.lazy="username">

medium

A. The directive should be v-model:trim.lazy with an argument.

B. The syntax is correct; no error present.

C. Modifiers .trim and .lazy cannot be used together on v-model.

D. Modifiers must be separated by commas, like .trim,.lazy.

Solution

1. Step 1: Check Vue documentation for v-model modifiers

   Vue allows chaining modifiers like .trim and .lazy on v-model to trim input and update on change.

2. Step 2: Validate syntax correctness

   The syntax v-model.trim.lazy is valid and commonly used. No argument is needed here.

3. Final Answer:

   The syntax is correct; no error present. -> Option B

4. Quick Check:

   Multiple modifiers can chain on v-model [OK]

Hint: Modifiers chain with dots, no commas needed [OK]

Common Mistakes:

• Thinking modifiers need commas
• Assuming arguments are required for modifiers
• Believing some modifiers can't combine

5. You want to create a custom directive v-focus that focuses an input only once when inserted, and you want to pass an argument to specify the delay in milliseconds. Which is the correct way to use arguments and modifiers to achieve this?

<input v-focus:delay.once="500">

hard

A. Use argument delay for delay and modifier .once to focus once.

B. Use modifier .delay for delay and argument once to focus once.

C. Arguments and modifiers cannot be combined in custom directives.

D. Use v-focus.once:delay="500" to apply once and delay.

Solution

1. Step 1: Understand argument and modifier roles

   Arguments specify extra data like 'delay' to the directive. Modifiers like .once change behavior, here to run focus only once.

2. Step 2: Analyze the directive usage

   v-focus:delay.once="500" correctly uses 'delay' as argument and '.once' as modifier. The value '500' is passed as delay time.

3. Final Answer:

   Use argument delay for delay and modifier .once to focus once. -> Option A

4. Quick Check:

   Argument = data, modifier = behavior change [OK]

Hint: Arguments pass data, modifiers change behavior [OK]

Common Mistakes:

• Swapping argument and modifier positions
• Thinking they can't be combined
• Using modifiers as arguments