What is the template syntax used in Vue for text interpolation (data binding)?
1. What is the template syntax used in Vue for text interpolation (data binding)?
- A.{expression}
- B.${expression}
- C.{{ expression }}
- D.<% expression %>
All featured quizzes
Vue.js - Basics
Composition API, custom directives, router-link, component props, and Single File Components.
Sample Questions
A preview of what's in this quiz. Answer them interactively for instant scoring and full explanations.
What is Vue.js?
2. What is Vue.js?
- A.A server-side Node.js framework
- B.A relational database management utility
- C.A progressive JavaScript framework for building user interfaces
- D.A utility library for CSS selector queries
Which Vue directive is used to dynamically bind one or more attributes to an expression?
3. Which Vue directive is used to dynamically bind one or more attributes to an expression?
- A.v-model
- B.v-on
- C.v-bind
- D.v-attr
What is the standard file extension for Vue Single File Components (SFC)?
4. What is the standard file extension for Vue Single File Components (SFC)?
- A..html
- B..vue.js
- C..vue
- D..vfc
What is the shorthand syntax for the `v-bind` directive in Vue?
5. What is the shorthand syntax for the `v-bind` directive in Vue?
- A.An at sign (@)
- B.A pound sign (#)
- C.A colon (:)
- D.A dollar sign ($)
What are the three main top-level tags inside a standard Vue Single File Component (SFC) file?
6. What are the three main top-level tags inside a standard Vue Single File Component (SFC) file?
- A.<view>, <logic>, and <theme>
- B.<html>, <js>, and <css>
- C.<template>, <script>, and <style>
- D.<layout>, <code>, and <design>
What is the shorthand syntax for the `v-on` directive in Vue?
7. What is the shorthand syntax for the `v-on` directive in Vue?
- A.A colon (:)
- B.A percent sign (%)
- C.An at sign (@)
- D.A slash (/)
Which Vue directive is used to render a list of items based on an array?
8. Which Vue directive is used to render a list of items based on an array?
- A.v-loop
- B.v-each
- C.v-for
- D.v-repeat
Why is the `:key` attribute required when using the `v-for` list directive?
9. Why is the `:key` attribute required when using the `v-for` list directive?
- A.To specify CSS class names for each element in the list
- B.To index arrays starting from 1 instead of 0
- C.To give Vue a hint to track each node's identity and optimize list rendering updates
- D.To enable click event handlers on list items
Which Vue directive conditionally renders an element based on the truthiness of an expression, adding or removing it from the DOM?
10. Which Vue directive conditionally renders an element based on the truthiness of an expression, adding or removing it from the DOM?
- A.v-show
- B.v-else-if
- C.v-if
- D.v-when
In the Vue Options API, inside which function option must you declare your component's reactive state variables?
11. In the Vue Options API, inside which function option must you declare your component's reactive state variables?
- A.state()
- B.setup()
- C.data()
- D.methods
Which Vue directive is used to attach event listeners to elements?
12. Which Vue directive is used to attach event listeners to elements?
- A.v-bind
- B.v-model
- C.v-on
- D.v-listen
What is the key performance difference between `v-if` and `v-show`?
13. What is the key performance difference between `v-if` and `v-show`?
- A.v-show creates/destroys elements; v-if only toggles CSS display.
- B.v-if is for numbers; v-show is for strings.
- C.v-if creates/destroys elements; v-show only toggles CSS display.
- D.There is no difference in performance or behavior.
Which Vue directive creates a two-way data binding on form input, select, and textarea elements?
14. Which Vue directive creates a two-way data binding on form input, select, and textarea elements?
- A.v-bind
- B.v-on
- C.v-model
- D.v-sync
Which Vue directive toggles the visibility of an element by modifying its inline CSS `display` style?
15. Which Vue directive toggles the visibility of an element by modifying its inline CSS `display` style?
- A.v-if
- B.v-visible
- C.v-show
- D.v-display
In Vue 3 Composition API, what function acts as the entry point for utilizing composition hooks inside component files?
16. In Vue 3 Composition API, what function acts as the entry point for utilizing composition hooks inside component files?
- A.mounted()
- B.created()
- C.setup()
- D.init()
In the Vue Options API, inside which option object do you define event handler functions and methods?
17. In the Vue Options API, inside which option object do you define event handler functions and methods?
- A.data
- B.computed
- C.methods
- D.watch
Which Vue 3 Composition API function is used to create a reactive reference wrapper around a primitive value (like a string or number)?
18. Which Vue 3 Composition API function is used to create a reactive reference wrapper around a primitive value (like a string or number)?
- A.reactive()
- B.computed()
- C.ref()
- D.state()
What is a watcher (`watch`) in Vue?
19. What is a watcher (`watch`) in Vue?
- A.A read-only getter cached value function
- B.A browser extension that records component actions
- C.A hook used to perform side-effects or asynchronous operations when data changes
- D.A container element for conditional rendering
Which Vue 3 function is used to declare a reactive copy of a non-primitive object or array?
20. Which Vue 3 function is used to declare a reactive copy of a non-primitive object or array?
- A.ref()
- B.computed()
- C.reactive()
- D.proxy()
Looking for a different topic? Browse all subjects