Vue templates, reactivity, ref and reactive, directives, components, props, emits, Composition API, Pinia and Vue Router.
35 cards · basic cards · AI-written, checked twice. Edit anything.
- What is the purpose of a template in Vue.js?
Show answer
A template defines the HTML structure that Vue compiles and renders, containing placeholders and directives that bind to component data.- How do you interpolate a data value into a Vue template?
Show answer
Use double curly braces, e.g., {{message}}, to display a data property's value as text.- What is a directive in Vue?
Show answer
A directive is a special attribute prefixed with v- that applies reactive behavior or DOM manipulation to elements, e.g., v-if, v-for, v-bind.- What does the v-text directive do, and how does it differ from {{}}?
Show answer
v-text updates the element's text content; {{}} also interpolates but is more readable and allows mixed text and variables.- How do you bind an HTML attribute to a Vue data property?
Show answer
Use the v-bind directive, e.g., v-bind:href='url' or the shorthand :href='url'.- What does ref() do in Vue's Composition API?
Show answer
ref() wraps a primitive or object value to make it reactive; the value is accessed via the .value property.- What does reactive() do in Vue's Composition API?
Show answer
reactive() creates a deeply reactive proxy object from an object, without needing .value to access properties.- When should you use ref() instead of reactive()?
Show answer
Use ref() for primitives (numbers, strings, booleans) and when you need to reassign the entire value; use reactive() for complex objects.- How do you access the value of a ref in JavaScript code?
Show answer
Use the .value property, e.g., const value = count.value = 5.- Why do you need .value with ref but not with reactive?
Show answer
ref() wraps the value in an object with a .value property to make primitives reactive; reactive() returns a proxy that unwraps properties directly.- Do you need to use .value to access a ref in a Vue template?
Show answer
No, Vue automatically unwraps refs in templates, so you can use {{message}} directly instead of {{message.value}}.- What does the v-if directive do?
Show answer
v-if conditionally renders an element or component based on a truthy/falsy expression; the element is removed from the DOM when false.- What does the v-show directive do?
Show answer
v-show conditionally shows or hides an element using CSS display property; the element remains in the DOM but is hidden when false.- When should you use v-if instead of v-show?
Show answer
Use v-if when the condition rarely changes (cheaper to remove/add DOM); use v-show for frequent toggling (cheaper to toggle CSS).- What does the v-for directive do?
Show answer
v-for renders a list of elements by iterating over an array or object, e.g., v-for='item in items'.
FlashKeepers