TodayTools

Vue flashcards

A friendly framework for interactive web pages: templates, reactivity, components, router and Pinia.

Donate
Beginner friendly, starts from zero
Section
How to study
0
VueStart from zero · 1 of 11

What is Vue, in one plain sentence?

Vue is a free JavaScript tool for building the parts of a web page that change while you use it, like a cart total that updates when you add an item.

Vue keeps the page in step with your data.
Show again
11 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What Vue is and why4 cards
    • First words and setup7 cards

  2. Core basics

    • Reactive state4 cards
    • Template syntax5 cards
    • Component communication4 cards
    • Lifecycle, styles and app setup4 cards

  3. Next steps

    • Routing4 cards
    • State management with Pinia2 cards
    • Composables and reuse4 cards
    • Forms, types and config3 cards
    • Testing and DOM timing4 cards

  4. Go deeper

    • Reactivity internals and performance7 cards
    • Server rendering3 cards
    • Security and reliability3 cards
    • Advanced patterns and testing4 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversVue 3.5 (3.6 in release candidate)Vue Router 4Pinia 3Vite
How these cards are made

Vue at a glance

Vue is a JavaScript framework that keeps a web page in step with its data, so the screen updates by itself.

Vue is like a scoreboard wired to the referee's notebook: change the notebook and the board changes on its own.

Words you will meet

Component
A reusable piece of a page, like a button or a card
Template
The HTML-like part that shows what goes on screen
State
Data a component remembers, like the items in a cart
Reactivity
When data changes, the page updates by itself
Props
Values a parent hands down to a child component
Event
A message a child sends up, like a button was clicked
Single-file component
A .vue file holding one component's script, template and style

The steps

  1. 1. Start from zero (11 cards): What Vue is, the idea of a page that updates itself, and the words you need for your first component.
  2. 2. Core basics (17 cards): Refs, computed values, template syntax, lists, forms, props, events, slots, watchers and app setup.
  3. 3. Next steps (17 cards): Routing and guards, Pinia, composables, provide and inject, forms, TypeScript, tests and DOM timing.
  4. 4. Go deeper (17 cards): Reactivity internals, big data, compiler tricks, Vapor Mode, SSR and hydration, security, leaks and typed generics.
All 11 cards in Start from zero
What is Vue, in one plain sentence?
Vue is a free JavaScript tool for building the parts of a web page that change while you use it, like a cart total that updates when you add an item.
What problem does Vue solve?
Without it you write many lines to find each spot on the page and change it by hand whenever data changes. With Vue you say what the page should look like for the data, and Vue updates the page for you.
Where do you meet Vue-style apps in daily life?
Online forms that check your answers as you type, live search boxes, product filters on shopping sites and admin dashboards. Each part reacts the moment something changes.
Give an everyday picture of how Vue works.
Think of a scoreboard tied to the referee's notebook. When the referee writes a new score, the board changes by itself. In Vue, the notebook is your data and the board is the page.
Key word: what is a component?
A component is a reusable piece of a page, like a button, a product card or a menu. A page is built by putting components together, like LEGO bricks.
Key word: what is a template?
A template is the HTML-like part of a component that shows what goes on screen. Double curly braces drop data into it.
Key words: what are state and reactivity?
State is the data a component remembers, like how many items are in a cart. Reactivity means that when state changes, every place on the page that uses it updates on its own.
Key words: what are props and events?
Props are values a parent component hands down to a child, like a product name. Events are messages a child sends back up, like "the Add button was clicked".
What is a single-file component?
A .vue file that keeps one component's logic, template and styles together in three blocks: script, template and style.
What do you need before learning Vue?
Basic HTML, CSS and JavaScript, plus Node.js installed. Then npm create vue@latest makes a ready project you open in a code editor.
What will you be able to do after this topic?
Build pages from components, handle forms and lists, move between pages with Vue Router, share data with Pinia, fetch from APIs, write tests and keep a large Vue app fast.
Vue cheatsheet

Template

  • {{ value }} Show text, escaped
  • :attr="expr" Bind attribute (v-bind)
  • @click="fn" Listen to event (v-on)
  • v-if / v-else Add or remove
  • v-show Toggle display
  • v-for="x in list" :key="x.id" Repeat
  • v-model.trim Two-way bind, trimmed

Reactivity

  • ref(0) Reactive value, use .value
  • computed(() => ...) Cached derived value
  • watch(src, cb) Side effect on change
  • watchEffect(fn) Auto-tracked effect
  • shallowRef(big) Track replacement only
  • nextTick() Wait for DOM update

Components

  • defineProps<{...}>() Declare props
  • defineEmits(['save']) Declare events
  • defineModel() v-model on a component
  • <slot name="x" /> Named slot
  • provide / inject Pass deep without props
  • useTemplateRef('el') Reach an element

Router and Pinia

  • createRouter({ history, routes }) Make router
  • useRoute() / useRouter() Current route / navigate
  • router.beforeEach(fn) Global guard
  • () => import('./Page.vue') Lazy route
  • defineStore('id', () => {...}) Setup store
  • storeToRefs(store) Destructure safely

CLI

  • npm create vue@latest New project
  • npm run dev Dev server
  • npm run build Production build
  • npx vue-tsc --noEmit Type-check
  • npx vitest Run tests
Donate