Vue.js Quiz ( Beginner ) - All Questions

This beginner-level Vue.js quiz is perfect for learners starting with Vue.js framework. It covers core fundamentals like Vue instance, directives, data binding, components, props, events, and basic CLI concepts, making it ideal for practice and entry-level interviews.

Question 1: What is Vue.js?

A backend framework
A frontend JavaScript framework
A database
A testing library

Explanation: Vue.js is a frontend JavaScript framework for building user interfaces.

Question 2: Who created Vue.js?

Google
Evan You
Facebook
Microsoft

Explanation: Vue.js was created by Evan You.

Question 3: Vue.js is primarily used for?

Database management
Server-side scripting
Building user interfaces
Mobile OS development

Explanation: Vue.js is used to build interactive user interfaces.

Question 4: Which directive is used for text interpolation?

v-text
v-bind
v-model
{{ }}

Explanation: Double curly braces are used for text interpolation.

Question 5: Which directive binds HTML attributes dynamically?

v-model
v-bind
v-if
v-on

Explanation: v-bind dynamically binds attributes.

Question 6: What is the shorthand for v-bind?

Explanation: Colon (:) is shorthand for v-bind.

Question 7: Which directive handles click events?

v-click
v-on
v-bind
v-if

Explanation: v-on is used to listen to events.

Question 8: What is the shorthand for v-on?

Explanation: @ is shorthand for v-on.

Question 9: Which directive conditionally renders elements?

v-for
v-show
v-if
v-bind

Explanation: v-if conditionally renders elements.

Question 10: Which directive toggles visibility using CSS?

v-if
v-for
v-show
v-bind

Explanation: v-show uses CSS display property.

Question 11: Which directive is used for list rendering?

v-if
v-show
v-bind
v-for

Explanation: v-for is used to render lists.

Question 12: What must be provided when using v-for?

key attribute
class name
event handler
computed property

Explanation: key helps Vue track elements efficiently.

Question 13: What is v-model used for?

Event handling
Two-way data binding
Conditional rendering
Looping data

Explanation: v-model enables two-way data binding.

Question 14: Which HTML element commonly uses v-model?

div
span
input
section

Explanation: v-model is commonly used with form inputs.

Question 15: What is a Vue component?

A database table
A reusable UI block
A routing file
A CLI command

Explanation: Components are reusable UI blocks.

Question 16: Which option defines component data?

props
methods
data
watch

Explanation: data returns the component state.

Question 17: In Vue components, data must be?

An object
A function returning an object
An array
A string

Explanation: Each component instance needs its own data.

Question 18: What are props used for?

Internal state
Parent-to-child data passing
Event handling
Styling

Explanation: Props pass data from parent to child.

Question 19: Props in Vue are?

Mutable
Read-only
Private
Optional only

Explanation: Props should not be mutated by child components.

Question 20: How does a child component communicate with a parent?

Props
Events
Computed properties
Watchers

Explanation: Child emits events to communicate with parent.

Question 21: Which method emits a custom event?

emit()
$emit()
dispatch()
trigger()

Explanation: $emit sends events to parent components.

Question 22: What is a computed property?

A method
A cached derived value
An event handler
A watcher

Explanation: Computed properties are cached based on dependencies.

Question 23: What is the main benefit of computed properties?

Faster rendering
Automatic caching
Two-way binding
Event handling

Explanation: Computed values are cached until dependencies change.

Question 24: What are methods in Vue used for?

Derived values
Event handling and logic
Watching data
Styling

Explanation: Methods handle logic and user interactions.

Question 25: Which option watches data changes?

computed
methods
watch
filters

Explanation: watch reacts to data changes.

Question 26: What is the Vue instance created with?

new Vue()
createApp()
Vue.init()
Vue.start()

Explanation: new Vue() is used in Vue 2.

Question 27: Which API is used to create apps in Vue 3?

new Vue()
Vue.create()
createApp()
initApp()

Explanation: createApp() is used in Vue 3.

Question 28: What is the root element of a Vue app?

<html>
<body>
Mount element
<template>

Explanation: Vue mounts on a root DOM element.

Question 29: Which directive renders raw HTML?

v-html
v-text
v-bind
v-show

Explanation: v-html renders raw HTML content.

Question 30: Why should v-html be used carefully?

Performance issues
SEO issues
XSS security risk
Rendering errors

Explanation: It can expose the app to XSS attacks.

Question 31: Which file typically bootstraps a Vue app?

index.html
main.js
App.vue
vue.config.js

Explanation: main.js initializes and mounts the app.

Question 32: What is App.vue?

CLI config file
Root component
Routing file
Store file

Explanation: App.vue is the root component.

Question 33: What does .vue file contain?

Only JavaScript
Only HTML
Template, script, and style
Only CSS

Explanation: .vue files contain template, script, and style.

Question 34: Which section defines component logic?

<template>
<style>
<script>
<head>

Explanation: Logic is written in the script section.

Question 35: Which section defines component styles?

<template>
<script>
<style>
<css>

Explanation: Styles are defined in the style section.

Question 36: What does scoped style do?

Global styling
Applies styles to all components
Limits styles to component
Disables CSS

Explanation: Scoped styles apply only to the component.

Question 37: Which Vue feature improves performance in lists?

v-if
v-show
key attribute
computed

Explanation: key helps Vue efficiently update DOM.

Question 38: Which lifecycle hook runs when component is created?

mounted
created
updated
destroyed

Explanation: created runs after instance creation.

Question 39: Which lifecycle hook runs after DOM mount?

created
beforeCreate
mounted
updated

Explanation: mounted runs after DOM is ready.

Question 40: Which directive prevents rendering until condition is true?

v-show
v-bind
v-if
v-model

Explanation: v-if conditionally renders elements.

Question 41: Which Vue feature allows conditional classes?

v-if
v-bind:class
v-model
v-for

Explanation: v-bind:class applies dynamic classes.

Question 42: Which feature enables component reuse?

Directives
Components
Filters
Watchers

Explanation: Components enable reuse.

Question 43: What is the Vue CLI?

UI library
Command-line tool
State manager
Testing framework

Explanation: Vue CLI is a command-line tool.

Question 44: Which command creates a Vue project?

vue new
vue start
npm vue create
vue create

Explanation: vue create scaffolds a new project.

Question 45: Which file manages project dependencies?

vue.config.js
main.js
package.json
App.vue

Explanation: package.json manages dependencies.

Question 46: What is the main advantage of Vue.js?

Steep learning curve
Flexible and easy to learn
Backend support
Database integration

Explanation: Vue is known for simplicity and flexibility.

Back to programming Quizzes

Vue.js Quiz ( Beginner )

Questions

~15

Minutes

Min Limit