What is Vue - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Vue app instance.

Vue

const app = Vue.[1]({
  data() {
    return { message: 'Hello Vue!' };
  }
});

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

AcreateApp

BnewApp

CinitApp

DstartApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using newApp or initApp which do not exist.

Vue uses createApp to start a new app instance.

2fill in blank

medium

Complete the code to mount the Vue app to an HTML element.

Vue

app.[1]('#app');

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

Astart

Battach

Cmount

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using start or render which are not Vue app mounting methods.

The mount method attaches the Vue app to a DOM element.

3fill in blank

hard

Fix the error in the Vue component setup function.

Vue

export default {
  setup() {
    const count = Vue.[1](0);
    return { count };
  }
};

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

Areactive

Bref

Cstate

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive which is for objects, not primitives.

Use ref to create a reactive primitive value in Vue's setup.

4fill in blank

hard

Fill both blanks to create a reactive object and access its property.

Vue

const state = Vue.[1]({ count: 0 });
console.log(state.[2]);

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

Areactive

Bcount

Cvalue

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for objects or value which is for refs.

reactive creates a reactive object, and count accesses its property.

5fill in blank

hard

Fill all three blanks to define a Vue component with a template and reactive state.

Vue

export default {
  [1]() {
    const message = Vue.[2]('Hello!');
    return { message };
  },
  template: `<div>[3]</div>`
};

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

Asetup

Bref

Cmessage

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using data instead of setup in Vue 3 composition API.

The setup function uses ref to create message reactive data, shown in the template.