Why custom directives matter in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a simple custom directive in Vue.

Vue

app.directive('focus', {
  mounted(el) {
    el.[1]()
  }
})

Drag options to blanks, or click blank then click option'

Ainput

Bclick

Cblur

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' or 'blur' instead of 'focus' causes the directive not to set focus.

The focus method sets keyboard focus on the element, which is the common use case for a focus directive.

2fill in blank

medium

Complete the code to use the custom directive in a template.

Vue

<input type="text" v-[1] />

Drag options to blanks, or click blank then click option'

Abind

Bfocus

Cmodel

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'v-model' or 'v-bind' instead of the custom directive name.

The directive is used with v-focus to apply the custom focus behavior.

3fill in blank

hard

Fix the error in the directive definition to correctly access the element.

Vue

app.directive('highlight', {
  mounted([1]) {
    el.style.backgroundColor = 'yellow'
  }
})

Drag options to blanks, or click blank then click option'

Aevent

Belement

Cel

Dtarget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'element' or 'event' causes a reference error because the variable name must match the parameter.

The first argument to the mounted hook is the element, commonly named el.

4fill in blank

hard

Fill both blanks to create a directive that changes text color based on a binding value.

Vue

app.directive('color', {
  mounted(el, [1]) {
    el.style.color = [1].[2]
  }
})

Drag options to blanks, or click blank then click option'

Abinding

Bvalue

Cevent

Dtarget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' or 'target' instead of 'binding' causes errors.

Trying to use 'binding' directly as a color string instead of 'binding.value'.

The second argument is the binding object, and its value property holds the passed value.

5fill in blank

hard

Fill all three blanks to create a directive that updates element text on value change.

Vue

app.directive('text-update', {
  mounted(el, [1]) {
    el.textContent = [2]
  },
  updated(el, [3]) {
    el.textContent = binding.value
  }
})

Drag options to blanks, or click blank then click option'

Abinding

Bbinding.value

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' instead of 'binding' causes errors.

Not using 'binding.value' to get the actual value.

The directive uses the binding object to access the value in both hooks. The updated hook also receives the binding as the second argument.

Practice

1. Why are custom directives useful in Vue?

easy

A. They add reusable behaviors directly to HTML elements.

B. They replace Vue components entirely.

C. They automatically fetch data from APIs.

D. They style elements with CSS only.

Solution

1. Step 1: Understand the purpose of custom directives

   Custom directives let you add special behaviors to HTML elements that you can reuse.

2. Step 2: Compare with other options

   They do not replace components, fetch data, or only style elements; they control DOM behavior.

3. Final Answer:

   They add reusable behaviors directly to HTML elements. -> Option A

4. Quick Check:

   Custom directives = reusable element behaviors [OK]

Hint: Custom directives add behaviors to elements, not replace components [OK]

Common Mistakes:

• Thinking directives replace components
• Confusing directives with data fetching
• Assuming directives only style elements

2. Which is the correct syntax to register a global custom directive named focus in Vue 3?

easy

A. app.component('focus', { mounted(el) { el.focus() } })

B. Vue.directive('focus', function(el) { el.focus() })

C. app.directive('focus', { mounted(el) { el.focus() } })

D. app.use('focus', { mounted(el) { el.focus() } })

Solution

1. Step 1: Recall Vue 3 global directive registration

   In Vue 3, use app.directive(name, definition) to register directives globally.

2. Step 2: Check the options

   app.directive('focus', { mounted(el) { el.focus() } }) uses app.directive with a proper object containing mounted hook. Others use wrong methods or syntax.

3. Final Answer:

   app.directive('focus', { mounted(el) { el.focus() } }) -> Option C

4. Quick Check:

   Vue 3 global directive = app.directive(name, definition) [OK]

Hint: Use app.directive() with hooks to register global directives [OK]

Common Mistakes:

• Using Vue.directive instead of app.directive in Vue 3
• Using app.use or app.component incorrectly
• Passing a function instead of an object with hooks

3. Given this custom directive code:

app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = 'yellow'
  }
})

What will happen when you use <div v-highlight>Text</div> in your template?

medium

A. The div will have a yellow border but no background change.

B. The div's text color changes to yellow.

C. Nothing happens because the directive is missing a bind hook.

D. The div's background color will become yellow when inserted into the DOM.

Solution

1. Step 1: Understand the mounted hook effect

   The mounted hook runs when the element is inserted, setting backgroundColor to yellow.

2. Step 2: Analyze the directive usage

   Using v-highlight applies the directive, so the div's background becomes yellow, not border or text color.

3. Final Answer:

   The div's background color will become yellow when inserted into the DOM. -> Option D

4. Quick Check:

   mounted hook sets backgroundColor = yellow [OK]

Hint: mounted hook runs on insert, sets styles immediately [OK]

Common Mistakes:

• Confusing background color with border or text color
• Thinking bind hook is required in Vue 3
• Assuming directive does nothing without update hook

4. Identify the error in this custom directive code:

app.directive('scroll', {
  mounted(el) {
    window.addEventListener('scroll', () => {
      el.textContent = window.scrollY
    })
  },
  unmounted() {
    window.removeEventListener('scroll')
  }
})

medium

A. The directive should use updated instead of mounted.

B. The removeEventListener call is missing the event handler function.

C. The mounted hook should not use arrow functions.

D. The unmounted hook should be named destroyed.

Solution

1. Step 1: Check event listener removal

   removeEventListener requires the same event and handler function to remove the listener properly.

2. Step 2: Analyze the unmounted hook

   Here, removeEventListener is called without the handler function, so the listener stays active causing memory leaks.

3. Final Answer:

   The removeEventListener call is missing the event handler function. -> Option B

4. Quick Check:

   removeEventListener needs event and handler [OK]

Hint: Always pass same handler to removeEventListener as added [OK]

Common Mistakes:

• Omitting handler in removeEventListener
• Confusing unmounted with destroyed hook
• Thinking arrow functions cause errors here

5. You want to create a custom directive v-auto-focus that focuses an input only when it is visible on the page (not hidden by CSS). Which approach best uses custom directives to achieve this?

hard

A. In the mounted hook, check if el.offsetParent !== null before calling el.focus().

B. Use the updated hook to call el.focus() unconditionally every time.

C. Add a watcher on a data property to call el.focus() inside the directive.

D. Use a global event listener on window resize to focus the element.

Solution

1. Step 1: Understand visibility check in directives

   Checking el.offsetParent !== null confirms the element is visible (not hidden by CSS).

2. Step 2: Apply focus conditionally in mounted hook

   Focusing only when visible avoids errors and unwanted focus on hidden inputs.

3. Step 3: Evaluate other options

   Updated hook focusing unconditionally may cause focus flicker; watchers and global listeners add complexity.

4. Final Answer:

   In the mounted hook, check if el.offsetParent !== null before calling el.focus(). -> Option A

5. Quick Check:

   Check visibility before focus in mounted hook [OK]

Hint: Check element visibility before focus in mounted hook [OK]

Common Mistakes:

• Focusing without visibility check
• Using updated hook causing repeated focus
• Adding unnecessary watchers or global listeners