Assess Your Vue.js Skills

Whether you're preparing for a technical interview or just curious about how good your Vue.js skills are, this multiple-choice assessments will rank you as:

🥇 Vue.js Superstar Top 3%

🥈 Vue.js Expert Top 13%

🥉 Vue.js Intermediate Top 34%

💩 Vue.js Beginner Bottom 66%

Ready to get started?

Get Started

Go Next: [21]

Answer question #10968

In Vue.js which approach would you use when you have to share common data between components?

1. Use Props for parent/child components and directives for sibling components

2. Use Props to share data from parent to child component and/or Event Bus for simple use cases and state management for large apps

3. Use Props to share data from parent to child component and/or Event Bus for large Apps and state management for simple use cases

4. Use Props to share data from child to parent component and/or Event Bus for simple use cases and state management for large apps

Answer question #10973

Given the following code:

HTML:
<li v-for="n in filtered">{{ n }}</li>

JS:
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
filtered: function () {
this.numbers.filter(n => n > 3)
}
}

The output of the HTML is as follow: 4 5

What will be the value of this.numbers?

Answer question #10978

Which of the following is NOT a use case for the vue CLI?

1. Creating a sample Vue application for learning

2. Running a Vue application in development

3. Compiling a production Vue application

4. Running a production Vue application

Answer question #10983

Which of the following should be used to initialize a name property on a vue instance?

1.
new Vue({
initial: { name: "Jane Doe" }
});

2.
new Vue({
data: { name: "Jane Doe" }
});

3.
var person = new Vue();
person.name = "Jane Doe";

4.
new Vue({
name: "Jane Doe"
});

Answer question #10988

In which of the following cases can we use simple state management and avoid a complex state management tool like Vuex?

1. When the App is decentralized and sibling components inherit from only one global root component

2. When the App is light but we need server side rendering

3. When the App is light and a centralized store is not needed we can facilitate component communication using props and an event bus

4. When the App is heavy and needs multiple centralized stores

Answer question #10993

Based on this snippet:

<input v-on:keyup.enter.stop.once="keyPressed()"></div>
When will the keyPressed method be triggered?

When will the keyPressed method be triggered?

1. Once the input the has focus

2. Every time the Enter key is pressed

3. The first time the Enter key is pressed

4. Only the first time the input element has focus

Answer question #10998

We want to use vue-router to create the following routes:

* If url matches the default root path, render the Posts component
* If url matches the "archive" path, render the Archive component
* Any other route should render the NotFound component

Which of the following is the correct configuration?

1. {path: '/', component: Posts},
{path: '/archive', component: Archive},
{path: '/404', component: NotFound }

2. {path: '/', component: Posts},
{path: '/archive', component: Archive},
{path: '^', component: NotFound }

3. {path: '/', component: Posts},
{path: '/archive', component: Archive},
{path: '*', component: NotFound }

4. {path: '/default', component: Posts},
{path: '/archive', component: Archive},
{path: '*', component: NotFound }

Answer question #11003

Using the code snippets below:

JS:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = ???
el.target.value = el.style.backgroundColor
})

HTML:
<div v-color-swatch="'#fff'"></div>

Which value can you pass to the backgroundColor property (indicated with ???) to set the background color of the element?

1. binding.arg

2. binding.expression

3. binding.value

4. binding.name

Answer question #11008

Consider this element from a template:

<input type="checkbox" v-model="done">

Assume the checkbox is initially unchecked and the user clicks to check it.
What is the value of done after checking the box?

1. "on"

2. "yes"

3. true

4. 1

Answer question #11013

Which of the following is NOT true about Vue?

1. Provides official browser devtools for enhanced debugging

2. Builds are distributed via npm

3. Hosts extensive documentation at vuejs.org

4. It is a closed source project

Random fact about Vue.js 💡

💡FUN FACT 💡Vue was created by Evan You after working for Google using AngularJS in a number of projects. He later summed up his thought process: "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." The first source code commit to the project was dated July 2013, and Vue was first released the following February, in 2014.

Answer question #11018

Which symbol or directive can you use as shorthand, instead of using v-on in your HTML markup?

1. #

2. $

3. !

4. @

Answer question #11022

Which one of the following methods is correct for two-way binding an text input box?

1. <input @value="message" />

2. <input @model="message" />

3. <input v-model="message" />

4. <input @input="message" />

Answer question #11028

In Vue.js which of the following is true regarding Packaging Vue Components?

1. Vue components by nature are not meant to be re-used unless explicitly mentioned in Vue instance

2. A reusable Vue component must have scoped styles attached

3. Vue components by nature are meant to be re-used

4. A reusable Vue component must have a separate js file attached that has the logic added regarding the behavior of Vue component

Answer question #11033

Which of the following are valid keyboard events shipped with the Vue.js core?

1. @keyup, @keydown

2. @keyboardup, @keyboarddown

3. @inputup, @inputdown

4. @keypressed, @keyup

Answer question #11038

How can we create a production mode of a Vue.js app using a build tool?

3. We need to use the following script tag:
<script src="//cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.runtime.min.js"></script>

2. We need to set the environment the NODE_ENV environment variable equal to “production” and include the following script tag: <script src="//cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

3. We need to set the NODE_ENV environment variable equal to “production” and run the build tool.

4. We download and link the vue.min.js file in a script tag.

Answer question #11043

Which of the following is a characteristic of the production build of Vue?

1. Uncompressed

2. Warnings for common mistakes

3. Debug mode

4. Minified

Answer question #11048

What is the most common way to install the CLI?

1. Install with npm

2. Download a platform specific installer

3. With a script tag reference to a CDN

4. In platform specific app stores, i.e. Windows Store and macOS App Store

Answer question #11053

Consider the following from a template:

<button v-on:click="myHandler">

Which of the following is the equivalent shorthand?

1. <button v-bind:click="myHandler">

2. <button @click="myHandler">

3. <button onclick="myHandler">

4. <button :click="myHandler">

Answer question #11058

Which of the following are valid ways of calling methods in event handlers?

1. @click=”method1.call(true)”

2. @click=”method1(true)”

3. @click=”x == x;”

4. @click=”x = 1;”

Answer question #11063

What is the term for "trim" in the following template?

<input v-model.trim="name">

1. A modifier

2. A directive

3. An attribute

4. An element

Idea Message Editor

Assess Your Vue.js Skills