Creating custom directives in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a simple custom directive named 'focus' that sets focus on the element.

Vue

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

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

Ablur

Bclick

Cfocus

Dselect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'focus' method.

Forgetting to call the method with parentheses.

Using 'blur' which removes focus instead of setting it.

The focus method sets the keyboard focus on the element.

2fill in blank

medium

Complete the code to define a custom directive that changes the element's background color to the value passed.

Vue

app.directive('bg-color', {
  mounted(el, binding) {
    el.style.backgroundColor = [1]
  }
})

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

Abinding.value

Bbinding.arg

Cbinding.instance

Dbinding.modifiers

Attempts:

3 left

💡 Hint

Common Mistakes

Using binding.arg which is for argument names, not values.

Using binding.modifiers which is an object of flags.

Using binding.instance which refers to the component instance.

The binding.value holds the value passed to the directive, used here to set the background color.

3fill in blank

hard

Fix the error in the directive that tries to log the element's tag name when mounted.

Vue

app.directive('log-tag', {
  mounted(el) {
    console.log(el.[1])
  }
})

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

Atagname

BtagName

Ctag_name

Dtagname()

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'tagname' which is undefined.

Trying to call 'tagname()' as a function.

Using underscores which are not valid here.

The correct property to get the tag name is tagName with capital N.

4fill in blank

hard

Fill both blanks to create a directive that updates the element's text content when the bound value changes.

Vue

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

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

Abinding.value

Bbinding.oldValue

Cbinding.arg

Dbinding.modifiers

Attempts:

3 left

💡 Hint

Common Mistakes

Using binding.oldValue which is the previous value, not the current.

Using binding.arg or binding.modifiers which are unrelated.

Both mounted and updated hooks should set el.textContent to binding.value to reflect the current value.

5fill in blank

hard

Fill all three blanks to create a directive that adds an event listener on mount, removes it on unmount, and uses the handler passed as the value.

Vue

app.directive('on-click', {
  mounted(el, binding) {
    el.addEventListener('click', [1])
  },
  unmounted(el, binding) {
    el.removeEventListener('click', [2])
  },
  updated(el, binding) {
    el.removeEventListener('click', [3])
    el.addEventListener('click', binding.value)
  }
})

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

Abinding.value

Bbinding.oldValue

Dbinding.arg

Attempts:

3 left

💡 Hint

Common Mistakes

Using binding.arg which is not a function.

Removing the current handler instead of the old one on update.

Not removing the event listener on unmount.

The directive uses binding.value as the current handler and binding.oldValue to remove the previous handler when updated or unmounted.