Test Your Vue.js Basics Knowledge - Can You Ace Our 25-Question Quiz?

1/25 If you use .passive and .prevent together, .prevent will be ignored. Probably, it will show you a warning.

True
False

2/25 Which of the directives below provide a two-way binding?

none
v-inline
v-model
v-on

3/25 What is the difference between v-html and v-text?

v-text sets the textContent of the node
v-html sets the innerHTML of the element
Both of the statements above are true.
Both of the statements are false.

4/25 Which is the correct way of generating a new instance in Vue.js?

var text = new Vue({ // options })
var text = new vue(){ // options }
var text = new object({ // options })
var text = new text({ // options })

5/25 What event modifier is used for performing the click event only for one time?

<a @click.once="dotask"></a>
<a @click.prevent-once="dotask"></a>
<a @click.stop="dotask"></a>
<a @click.passive="dotask"></a>

6/25 Which of the following is the full form of MVVM?

Model-View-ValueModel
Model-Value-ValueModel
Model-View-ViewModel
Module-Value-ViewModel

7/25 What is the difference between v-show and v-if directives?

v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.
v-if supports v-else and v-else-if directives whereas v-show doesn't support else directives.
v-if supports tab but v-show doesn't support.
All of the above

8/25 How $parent is described in Vue?

The $parent property, like $root, can be used for accessing the parent instance from a child.
It provides direct access, making the application hard to test and debug.
Both of the options above are true.
None of the above is true.

9/25 V-model directive is used in ...

two-way data binding where the view(UI) part of application automatically updates when data Model is changed.
two-way data binding where the view(UI) part of application does not update automatically. We need to write some custom code to make it updated every time a data model is changed.
one-way data binding where the view(UI) part of application automatically updates when data Model is changed.
one-way data binding where the view(UI) part of application does not updates automatically. Some custom code should be written for making it updated every time a data model is modified.

10/25 What is the default port number Vue CLI serves the application on?

3000
8080
8000
5000

11/25 What is the role of the 'filters' feature in Vue.js?

For creating global mixins
For applying common text formatting
For filtering items in a v-for list
For validating form inputs

12/25 Which command is used to create a new Vue.js project using Vue CLI?

vue create project-name
vue new project-name
vue init project-name
vue start project-name

13/25 What is the purpose of the 'key' attribute in a v-for directive in Vue.js?

To provide a unique identifier for each element
To optimize list rendering
To define the order of elements
To bind data to list items

14/25 What is the main purpose of using 'slots' in Vue.js components?

To inject content into a component from its parent
To manage global state
To store data
To perform data binding

15/25 How is 'Vue.nextTick()' primarily used in Vue.js?

For error handling
To wait for the next DOM update cycle before executing code
To trigger a component update
To delay a method execution

16/25 What is the purpose of using 'v-bind' with a class in Vue.js?

To bind a method to a class
To dynamically bind one or more class names to an element
To attach an event listener to a class
To conditionally display a class

17/25 In Vue.js, what is the effect of using the 'v-once' directive on a component?

It destroys the component after one use
It renders the component only once, and subsequent re-renders are ignored
It listens for an event only once
It applies a CSS class to an element only once

18/25 How can you define a prop in a Vue.js component that expects a specific data type?

props: { propName: 'String' }
props: { propName: String }
props: ['propName: String']
props: { propName: { type: 'String' } }

19/25 In Vue.js, what does the 'functional' attribute in a component definition do?

It makes the component stateful
It indicates the component is purely functional and stateless
It enhances the performance of the component
It allows the component to maintain its own state

20/25 How can you access the route parameters in a Vue component using Vue Router?

this.$route.params
this.params
Vue.getParams()
this.$router.params

21/25 Which Vue.js feature allows you to perform side effects in response to reactive data changes?

Methods
Computed properties
Watchers
Directives

22/25 What is the purpose of the 'name' property in a Vue.js component?

To specify the name used in the DOM
To define the component's name for recursive calls
To set the name attribute on the root element
To identify the component in Vue Devtools

23/25 How do you declare a prop in Vue.js that has a default value and validation?

props: { propName: { default: value, validator: function } }
props: ['propName', default: value, validate: function]
props: { propName: value, validator: function }
props: { propName: { value, validator: function } }

24/25 Which method is commonly used for manual reactivity in Vue.js?

Vue.set(object, key, value)
Vue.reactify(object, key, value)
this.$forceUpdate()
Vue.observable(object)

25/25 How can you define local state in a Vue.js component?

Using the 'state' option
Using the 'data' function
Using the 'computed' property
Using the 'methods' property

Image for the last page of the Certificate