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.