Quiz Vue.js Basic
Start Quiz
Test your knowledge with W3docs’ basic quiz made especially for beginners in Vue.js. Pass the test and get a Certificate of achievement!
The Test
The test contains 20 questions and there is no time limit. The test is not official, it’s just a nice way to see how much you know about Vue.js.
Count Your Score
You will get 5% for each correct answer. At the end of the Quiz, your total score will be displayed out of 100% maximum score.
Enrich your knowledge
At the end of the quiz you can see all the questions with the right answers. There will also be notes about the answers which will lead you to the appropriate page on the platform to enrich your knowledge. Read our HTML tutorial if you are not sure that you are ready for the quiz.
Quiz Answers
What are the advantages of using Vue.js?
Small in size — The size is 18 to 21KB. It requires no time for the user to download and apply it.
Easily understandable — One of the reasons for the popularity of this framework is that it is quite easy to understand. Users can easily add Vue.js to their web project due to its simple structure.
Straightforward integration- you can easily integrate it with the existing applications.
Virtual DOM — It is capable of using the virtual DOM like other existing frameworks such as ReactJS, Ember, and so on. Virtual DOM is considered a lightweight in-memory tree representation of the original HTML DOM and updated without impacting the origina
All of the above
Ans. All of the above
If you use .passive and .prevent together, .prevent will be ignored. Probably, it will show you a warning.
True
False
Ans. True
TrueWhich of the directives below provide a two-way binding?
none
v-inline
v-mode
v-on
Ans. V-mode
Which of the following directives is to used for attaching event listeners that invoke methods?
v-for
v-on
v-model
v-bind
Ans. v-on
What data binding interpolation is commonly known as “Mustache” syntax?
[]
v-model
{{}}
v-on
Ans. {{}}
How to use for loop in Vue.js?
vFor
*v-for
v-for
*ngFor
Answer
Ans.v-for
Once a View Model is destroyed, all the event listeners are automatically deleted.
True
False
Ans. True
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.
Ans.
Both of the statements above are true.
Both of the statements above are true.
Ans. npm install -g vue-cli
Which of the following event modifiers is applied only for prevent clicks on the element itself?
@click.prevent.self
@click.self.prevent
@click.stop
@click.prevent
Ans. @click.self.prevent
What is used to dynamically bind one or more attributes either a component property to an expression?
v-pre
v-bind
v-once
v-html
Ans. v-bind
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 })
Ans. var text = new Vue({ // options })
What keyword is used for generating a constant in Vue.js?
Define
Const
None of the above.
Ans. Const
What event modifier is used for performing the click event only for one time?
Ans. a @click.once=”dotask”></a
V-show does not support the
True
False
Ans. True
Which of the following is the full form of MVVM?
Model-View-ValueModel
Model-Value-ValueModel
Model-View-ViewModel
Module-Value-ViewModel
Ans. Model-View-ViewModel
All are life cycle hooks in Vue except …
beforeCreate
created
mounted
beforeMount
didMount
Ans. didMount
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
Ans. All of the Above
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.
Ans. Both of the options above are true
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.
Ans. two-way data binding where the view(UI) part of application automatically updates when data Model is changed