0
0
Vueframework~20 mins

Creating custom directives in Vue - Practice Exercises

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Vue Directive Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the output of this Vue custom directive usage?
Consider this Vue 3 custom directive that changes the background color of an element when it is mounted. What will be the background color of the
after the component renders?
Vue
import { createApp } from 'vue';

const app = createApp({});

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

app.component('TestComponent', {
  template: `<div v-highlight="'lightblue'">Hello</div>`
});

app.mount('#app');
AThe div background color will be red
BThe div background color will be lightblue
CThe div background color will be transparent
DThe div background color will be yellow
Attempts:
2 left
💡 Hint
Look at the binding.value used in the directive and the value passed in the template.
📝 Syntax
intermediate
2:00remaining
Which option correctly defines a Vue 3 custom directive that focuses an input element when mounted?
Select the correct syntax for a Vue 3 custom directive named 'focus' that automatically focuses the element when it is inserted into the DOM.
A
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
B
app.directive('focus', {
  inserted(el) {
    el.focus();
  }
});
C
app.directive('focus', {
  bind(el) {
    el.focus();
  }
});
D
app.directive('focus', {
  created(el) {
    el.focus();
  }
});
Attempts:
2 left
💡 Hint
Check the Vue 3 directive lifecycle hooks. 'mounted' is the correct hook for when the element is inserted.
🔧 Debug
advanced
2:00remaining
Why does this custom directive fail to update the element's text when the bound value changes?
Given this Vue 3 custom directive, the text content of the element does not update when the bound value changes. What is the cause?
Vue
app.directive('text', {
  mounted(el, binding) {
    el.textContent = binding.value;
  }
});

// Usage in template: <p v-text="message"></p>
AThe directive is missing a beforeMount hook to initialize the text.
BThe binding.value is undefined, so textContent is not set.
CThe directive should use el.innerText instead of el.textContent.
DThe directive only updates text in the mounted hook, it should also update in the updated hook.
Attempts:
2 left
💡 Hint
Think about what happens when the bound value changes after the element is mounted.
🧠 Conceptual
advanced
2:00remaining
What is the purpose of the 'beforeUnmount' hook in a Vue 3 custom directive?
In Vue 3 custom directives, what does the 'beforeUnmount' hook allow you to do?
AIt initializes the directive's state before the element is mounted.
BIt updates the element's content before the component re-renders.
CIt allows cleanup of event listeners or resources before the element is removed from the DOM.
DIt delays the mounting of the element until a condition is met.
Attempts:
2 left
💡 Hint
Think about what happens just before the element disappears from the page.
❓ state_output
expert
3:00remaining
What will be the final text content of the

element after the component updates?

Given this Vue 3 custom directive and component code, what will the

element display after the message changes from 'Hello' to 'World'?

Vue
const app = Vue.createApp({
  data() {
    return { message: 'Hello' };
  },
  template: `<p v-text-update="message"></p>`
});

app.directive('text-update', {
  mounted(el, binding) {
    el.textContent = binding.value;
  },
  updated(el, binding) {
    el.textContent = binding.oldValue + ' ' + binding.value;
  }
});

app.mount('#app');

// Later in code: app.message = 'World';
AHello World
BWorld
CHello
Dundefined World
Attempts:
2 left
💡 Hint
Look at how the updated hook uses binding.oldValue and binding.value to set textContent.