Assess your Vue.js skills

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

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?

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

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"
});

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

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

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 }

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

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

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

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

1. #

2. $

3. !

4. @

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" />

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

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

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.

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

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

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">

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;”

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