Skip to content

Vue Basics

Vue apps mount a root component and render a reactive view from state. This lesson covers practical patterns, syntax, and mistakes to avoid.

Core Vue Concepts

Vue apps mount a root component and render a reactive view from state.

Templates bind data with {{ }} and directives like v-bind and v-on.

createApp({ data: () => ({ count: 0 }) }).mount('#app')

Options API hello-world sketch (legacy style still valid).

Today's Default

SFCs + `<script setup>` for most new code.
  • Prefer Vue 3 + Composition API.
  • Use script setup for SFCs.
  • Keep components focused.
  • Lean on official docs.

Vue Basics Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
app createApp Boot
mount DOM Attach
data/state reactive Source
directives v-* Template
components reuse Tree
devtools inspect Debug

Options vs Composition

Learn both for reading old code; write Composition for new apps.

Common Mistakes

  • Mixing patterns randomly without convention.
  • Skipping DevTools.

Key Takeaways

  • Vue Basics is a core Vue skill.
  • Practice in a Vite app.
  • Prefer clarity.
  • Revisit docs for edge cases.

Pro Tip

Install Vue DevTools early — it teaches reactivity visually.

You now understand vue basics. Next, continue with Vue Setup to keep building your Vue skills.