Vue JS Foundation of Vue Js 2 — Questions and Answers
Question 1: Which Vue API style organizes logic by feature using a single setup() function?
- Options API
- Composition API (Correct answer)
- Class API
- Functional API
Correct answer: Composition API
The Composition API groups related logic inside setup(), unlike the Options API which splits by data/methods/computed.
Question 2: What does the v-bind directive do in a Vue template?
- Binds an event listener
- Dynamically binds an attribute or prop to an expression (Correct answer)
- Loops over an array
- Conditionally renders an element
Correct answer: Dynamically binds an attribute or prop to an expression
v-bind dynamically binds an HTML attribute or component prop to a JavaScript expression.
Question 3: Which shorthand represents the v-on directive?
- @ (Correct answer)
- :
- #
- *
Correct answer: @
The @ symbol is shorthand for v-on, used to attach event listeners.
Question 4: In Vue 3, what function creates a reactive primitive value?
- reactive()
- ref() (Correct answer)
- computed()
- watch()
Correct answer: ref()
ref() wraps a primitive in a reactive object accessed through its .value property.
Question 5: What is the purpose of the key attribute in a v-for loop?
- To sort the list
- To give Vue a hint for tracking node identity (Correct answer)
- To hide duplicate items
- To filter the array
Correct answer: To give Vue a hint for tracking node identity
The key helps Vue's virtual DOM efficiently track and reuse elements when the list changes.
Question 6: Which directive renders an element only when a condition is true and removes it from the DOM otherwise?
- v-show
- v-if (Correct answer)
- v-model
- v-html
Correct answer: v-if
v-if conditionally adds or removes an element from the DOM based on the expression.
Question 7: What does v-model provide on a form input?
- One-way attribute binding
- Two-way data binding (Correct answer)
- Event delegation
- CSS class binding
Correct answer: Two-way data binding
v-model creates two-way binding between a form input and a piece of reactive state.
Vue JS Foundation of Vue Js 2
Which Vue API style organizes logic by feature using a single setup() function?