Directive hooks (mounted, updated, unmounted) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue directive with a mounted hook.

Vue

const myDirective = {
  [1](el) {
    el.style.color = 'blue'
  }
}

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

Asetup

Bcreated

Cmounted

Drendered

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle hooks from components like 'created' instead of directive hooks.

The mounted hook runs when the directive is attached to the element.

2fill in blank

medium

Complete the code to update the element's text color when the directive updates.

Vue

const myDirective = {
  updated(el, binding) {
    el.style.color = [1]
  }
}

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

Ael.textContent

Bbinding.value

Cbinding.oldValue

Del.value

Attempts:

3 left

💡 Hint

Common Mistakes

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

The binding.value holds the new value passed to the directive.

3fill in blank

hard

Fix the error in the directive by completing the unmounted hook to clean up.

Vue

const myDirective = {
  unmounted(el) {
    el.[1] = null
  }
}

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

Aonclick

Bstyle

Cvalue

DtextContent

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to clear style or textContent which is not event cleanup.

Cleaning event handlers like onclick prevents memory leaks when the element is removed.

4fill in blank

hard

Fill both blanks to create a directive that changes background color on mount and cleans event on unmount.

Vue

const colorDirective = {
  [1](el) {
    el.style.backgroundColor = 'yellow'
  },
  [2](el) {
    el.onclick = null
  }
}

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

Amounted

Bupdated

Cunmounted

Dcreated

Attempts:

3 left

💡 Hint

Common Mistakes

Using updated instead of mounted for initial style.

The mounted hook sets styles when the element appears, and unmounted cleans event handlers when removed.

5fill in blank

hard

Fill all three blanks to create a directive that sets text color on mount, updates it on update, and removes click handler on unmount.

Vue

const textColorDirective = {
  [1](el) {
    el.style.color = 'green'
  },
  [2](el, binding) {
    el.style.color = [3]
  },
  unmounted(el) {
    el.onclick = null
  }
}

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

Amounted

Bupdated

Cbinding.value

Dcreated

Attempts:

3 left

💡 Hint

Common Mistakes

Using created which is not a directive hook.

Not using binding.value to get the new color.

mounted sets initial color, updated changes color when value changes, and binding.value holds the new color.