A progressive JavaScript framework used for building interactive user interfaces

A static site generator focused exclusively on server-side rendering performance

A lightweight template engine designed to replace HTML in backend applications

A specialized database management system for handling real-time JSON data

What is reactive data in Vue?

A system where the UI automatically re-renders whenever the underlying data changes

A specific data type in JavaScript used to store large arrays and complex objects

A global state management pattern that requires manual UI updates after every change

A security feature that prevents external scripts from modifying the internal state

What is a Vue component?

A reusable Vue instance containing its own encapsulated template, logic, and styles

A standard HTML5 element that provides built-in browser interactivity by default

A global CSS stylesheet that applies consistent branding across the entire application

A native JavaScript function used to calculate the dimensions of the browser window

What is the Vue template syntax?

HTML-based syntax using {{ }} for interpolation and v-directives for reactive logic

A pure JavaScript syntax called JSX that requires a specialized compiler to render

A text-only format that does not support HTML tags or interactive event listeners

A logic-less system that requires all data transformations to happen in the script block

What is v-if directive in Vue?

A directive used for conditional rendering that removes the element from the DOM

A CSS-based directive that toggles the "display: none" property on an element

An event listener that triggers a function when a user hovers over an HTML element

A looping mechanism used to render an array of items into a list of components

What is v-for directive in Vue?

A directive used to loop over data and render a list of items within the template

A native JavaScript loop used to manipulate data inside the component’s script section

A method for validating form inputs before they are submitted to the backend server

A specialized directive that only works for iterating through numeric ranges

What is v-bind in Vue?

A directive used to dynamically bind data to HTML attributes like src, href, or class

An event listener shorthand used to capture user inputs such as clicks and keystrokes

A template tag used to inject raw HTML code directly into a component container

A mechanism for passing methods from a child component back up to its parent

A directive used to attach event listeners that trigger methods on user interaction

A standard HTML attribute used to define the initial value of a form input field

A reactive property that automatically tracks the current time and date

A backend service used to send push notifications to users even when they are offline

What is a computed property in Vue?

A reactive property derived from data that is cached until its dependencies change

A standard method that re-executes every time the component template is re-rendered

A static configuration object used to define the metadata for a Vue component

A tool used only for performing complex mathematical calculations and logic

What is a watched property in Vue?

A function that executes custom logic in response to changes in a specific data property

A property that automatically caches values to improve the performance of UI rendering

A directive used to prevent the user from seeing private data in the browser console

An alternative to computed properties that is preferred for all derived state logic

What is the Vue lifecycle?

A series of stages including creation, mounting, updating, and unmounting

A tool used to restart the application whenever a syntax error is detected

A specific sequence of animations that occur when a user navigates between pages

A mandatory configuration that requires every component to be updated every 5 seconds

What is v-model in Vue?

A directive that provides two-way data binding between form inputs and component state

A one-way data flow pattern where data can only move from the parent to the child

A validation library used to check if a user has entered a valid email address

A performance optimization that reduces the number of re-renders in a form

What is the Composition API in Vue?

An alternative API that allows for organizing component logic by logical concerns

A legacy system that was removed in Vue 3 to simplify the framework’s core

A specialized tool used only for composing complex SVG graphics inside templates

A mandatory requirement that prevents the use of the Options API in modern apps

What is ref() in Composition API?

A function used to create a reactive reference for primitive values and objects

A specialized method for creating static, non-reactive constants in the setup block

A browser utility used to refresh the page whenever a reactive value changes

A legacy directive used to bind HTML attributes to the component instance

What is reactive() in Composition API?

A function that creates a reactive proxy of an object for deep state tracking

A tool used to convert standard HTML elements into reactive Vue components

An alternative to ref() that is designed exclusively for handling string values

A global configuration setting that enables reactivity for the entire application

What are composables in Vue?

Reusable functions that encapsulate and share reactive logic across components

Visual UI components that are designed to be nested inside one another

A set of built-in CSS classes that allow for easy component layout composition

Specialized backend functions used to connect Vue to a relational database

What is the virtual DOM in Vue?

An in-memory representation of the UI used to optimize and batch DOM updates

A simulated browser environment used only for running automated unit tests

A copy of the actual DOM that allows users to interact with hidden page elements

A deprecated technology that has been replaced by direct DOM manipulation in Vue 3

The official library for managing navigation and routes in a single-page application

A built-in directive used to animate the movement of elements across the screen

A hardware device used to speed up the delivery of Vue.js files to the client

A mandatory core feature that cannot be removed from any Vue.js application

What are props in Vue?

Custom attributes used to pass data from a parent component down to a child

Mutable state properties that allow a child to modify its parent’s internal data

A specialized CSS property used to define the spacing between different components

Global variables that are accessible by every component in the application

A mechanism that allows a child component to send custom events up to its parent

A method for broadcasting data to every single component in the application

A directive used to automatically download external assets from a remote server

A performance tool used to reduce the memory footprint of reactive objects

What are slots in Vue?

Placeholder elements that allow parents to inject custom markup into a child component

A way of passing complex JavaScript functions from a child up to its parent

Fixed positions in the component script where data properties must be defined

A security feature that prevents unauthorized components from rendering on the page

What are template refs in Vue?

A way to obtain a direct reference to a DOM element or a child component instance

A specialized reactive state used exclusively for storing user-submitted form data

A method for refreshing the template whenever an external API call is completed

A type of link used to navigate between different views in a routing system

What is the watch option with deep and immediate?

Watch configurations that enable nested property tracking and initial execution

A security setting that prevents watchers from accessing sensitive browser APIs

The default behavior for all watchers defined in a Vue 3 composition function

A performance optimization that stops watchers from running on mobile devices

What is a dynamic component in Vue?

A component rendered using the element with a reactive :is binding

An element that automatically changes its CSS styles based on the current window size

A component that is generated at runtime using a remote string of HTML code

A specialized component that can only be used inside of an asynchronous function

What is the Transition component in Vue?

A built-in wrapper component used to apply entry and exit animations to elements

A third-party library that replaces standard CSS animations with JavaScript

A navigation tool used to manage the transition between different URL routes

A layout system used to move elements from one part of the page to another

What are async components in Vue?

Components that are lazily loaded from the server only when they are needed

Components that contain asynchronous methods like API calls in their setup

A way to prevent components from rendering until the user is logged into the site

A mandatory performance feature that makes every component load in parallel

What is Provide/Inject in Vue?

A dependency injection system for sharing data with deeply nested child components

A method for passing data between two components that do not share an ancestor

A way to inject external JavaScript libraries into a Vue component’s template

A performance tool used to inject HTML directly into the browser’s shadow DOM

What are scoped slots in Vue?

Slots that allow a child component to pass data back up to the parent’s template

A way to limit the visibility of a slot so it can only be seen by specific users

A technique for applying scoped CSS styles to the content inside of a slot

A deprecated feature from Vue 2 that was replaced by Provide/Inject in Vue 3

What is errorCaptured lifecycle hook?

A lifecycle hook used to capture and handle errors from descendant components

A global error handler that catches every single error produced by the browser

A tool used to prevent the application from crashing when a syntax error occurs

A method for capturing the screen when an error occurs to send to the developer

What is Pinia in Vue?

The modern, lightweight state management library designed to replace Vuex

A component library that provides pre-styled buttons and form inputs for Vue

A backend server that automatically synchronizes Vue state across different users

A mandatory part of the Vue 3 core that cannot be used in Vue 2 applications

Quizzes

Prev in FrontendTypeScript: Typed JavaScript Fundamentals

Frontend Vue.js JavaScript

Vue.js Fundamentals: Reactive Components & Templates

Mohammad Abu Mattar20 QuestionsBeginnerPublished: 08 Mar, 2026

Markdown for AI

Vue.js Fundamentals: Reactive Components & Templates

Up to 20 questions, shuffled on every run

Quiz Configuration

Enterto start

Welcome to the Vue.js Basics Quiz! Vue.js is a progressive JavaScript framework for building user interfaces. Whether you’re creating a simple interactive widget or a complex single-page application, understanding Vue’s core concepts like reactive data, components, and directives is essential. This quiz will test your knowledge of Vue’s fundamentals and help you solidify your understanding of how to build dynamic web applications with Vue. Good luck!

Answer key and explanations20 questions

The quiz above draws 20 questions at random from these 30, so a second attempt will not be the same run. Everything in the pool is listed here.

What is Vue.js?
AnswerA progressive JavaScript framework used for building interactive user interfaces
What is reactive data in Vue?
AnswerA system where the UI automatically re-renders whenever the underlying data changes
What is a Vue component?
AnswerA reusable Vue instance containing its own encapsulated template, logic, and styles
What is the Vue template syntax?
AnswerHTML-based syntax using {{ }} for interpolation and v-directives for reactive logic
What is v-if directive in Vue?
AnswerA directive used for conditional rendering that removes the element from the DOM
What is v-for directive in Vue?
AnswerA directive used to loop over data and render a list of items within the template
What is v-bind in Vue?
AnswerA directive used to dynamically bind data to HTML attributes like src, href, or class
What is v-on in Vue?
AnswerA directive used to attach event listeners that trigger methods on user interaction
What is a computed property in Vue?
AnswerA reactive property derived from data that is cached until its dependencies change
What is a watched property in Vue?
AnswerA function that executes custom logic in response to changes in a specific data property
What is the Vue lifecycle?
AnswerA series of stages including creation, mounting, updating, and unmounting
What is v-model in Vue?
AnswerA directive that provides two-way data binding between form inputs and component state
What is the Composition API in Vue?
AnswerAn alternative API that allows for organizing component logic by logical concerns
What is ref() in Composition API?
AnswerA function used to create a reactive reference for primitive values and objects
What is reactive() in Composition API?
AnswerA function that creates a reactive proxy of an object for deep state tracking
What are composables in Vue?
AnswerReusable functions that encapsulate and share reactive logic across components
What is the virtual DOM in Vue?
AnswerAn in-memory representation of the UI used to optimize and batch DOM updates
What is Vue Router?
AnswerThe official library for managing navigation and routes in a single-page application
What are props in Vue?
AnswerCustom attributes used to pass data from a parent component down to a child
What is emit in Vue?
AnswerA mechanism that allows a child component to send custom events up to its parent
What are slots in Vue?
AnswerPlaceholder elements that allow parents to inject custom markup into a child component
What are template refs in Vue?
AnswerA way to obtain a direct reference to a DOM element or a child component instance
What is the watch option with deep and immediate?
AnswerWatch configurations that enable nested property tracking and initial execution
What is a dynamic component in Vue?
AnswerA component rendered using the <component> element with a reactive :is binding
What is the Transition component in Vue?
AnswerA built-in wrapper component used to apply entry and exit animations to elements
What are async components in Vue?
AnswerComponents that are lazily loaded from the server only when they are needed
What is Provide/Inject in Vue?
AnswerA dependency injection system for sharing data with deeply nested child components
What are scoped slots in Vue?
AnswerSlots that allow a child component to pass data back up to the parent’s template
What is errorCaptured lifecycle hook?
AnswerA lifecycle hook used to capture and handle errors from descendant components
What is Pinia in Vue?
AnswerThe modern, lightweight state management library designed to replace Vuex