Chapter 2: Vue Introduction
1. What problem does Vue solve?
You write HTML + CSS + JavaScript → page looks okay User clicks something → you need to update text, show/hide elements, change colors, fetch data, re-render list… manually with document.getElementById(), innerHTML, event listeners everywhere → code becomes messy spaghetti very fast.
Vue solves exactly this pain:
- It lets you describe what the UI should look like based on data (declarative style)
- When data changes → UI automatically updates (reactivity)
- You split UI into reusable components (like Lego blocks)
- You still write mostly normal HTML, CSS, JavaScript — no huge mental shift
2. “Progressive” — the magic word that makes Vue special
Other frameworks say: “You must use our full toolchain or nothing.”
Vue says:
- Want to add a little interactivity to one part of your old PHP/WordPress/jQuery site? → just drop one <script> tag — done (progressive enhancement)
- Want to build a medium dashboard? → use Vue + CDN or small build
- Want a full modern SPA with routing, state management, SSR? → use Vue + Vite + Pinia + Vue Router + Nuxt if you want even more batteries included
→ You adopt as much (or as little) as you need. It grows with your project.
Official wording (2026 vuejs.org):
Approachable. Performant. Versatile. Builds on top of standard HTML, CSS and JavaScript with an intuitive API and world-class documentation.
3. Who created Vue & quick history (so you sound smart in interviews)
- Created by Evan You (former Google engineer) in 2014
- Goal: take the good parts of AngularJS (2010 era) but make it lighter and simpler
- Vue 1 → Vue 2 (2016–very popular) → Vue 3 (2020/2022 stable, Composition API revolution)
- In 2026: Vue 3 is the standard (Vue 3.5 stable, Vue 3.6 in beta with Vapor Mode coming — huge performance leap without virtual DOM in some cases)
Vue is now used by Alibaba, Xiaomi, GitLab, Nintendo, BMW dashboards, Adobe, Trustpilot, etc.
4. Core idea #1 — Declarative rendering + Reactivity
Instead of:
|
0 1 2 3 4 5 6 |
document.getElementById('counter').textContent = count; |
You write:
|
0 1 2 3 4 5 6 7 8 9 |
<div id="app"> <p>Count: {{ count }}</p> <button @click="count++">+1</button> </div> |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
const { createApp, ref } = Vue; createApp({ setup() { const count = ref(0); // reactive variable return { count }; } }).mount('#app'); |
→ Change count.value anywhere in code → screen updates automatically No more manual DOM manipulation!
5. Core idea #2 — Component-based architecture
Everything is a .vue file (Single File Component):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- GreetingCard.vue --> <template> <div class="card"> <h3>Hello {{ name }}!</h3> <slot>Default content if no slot provided</slot> </div> </template> <script setup> defineProps({ name: String }); </script> <style scoped> .card { border: 1px solid #ddd; padding: 1.5rem; border-radius: 8px; } </style> |
Use it:
|
0 1 2 3 4 5 6 7 8 9 |
<GreetingCard name="Rahul from Hyderabad" /> <GreetingCard> <p>Custom content via slot</p> </GreetingCard> |
→ Reusability, encapsulation, scoped CSS, easy testing
6. Hello World – Full minimal example (2026 style with Vite)
But let’s start super simple (no install yet):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h1>{{ greeting }}</h1> <input v-model="greeting" placeholder="Type something..." /> <p v-if="greeting.length > 5">That's a long greeting! 🎉</p> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { const greeting = ref("Hello Vue 3 from Hyderabad! 🌶️"); return { greeting }; } }).mount('#app'); </script> </body> </html> |
Save as index.html → open in browser → type → see magic happen.
7. Key Vue features you should know in 2026 (table for quick revision)
| Feature | What it does | Syntax example | Why it’s cool in 2026 |
|---|---|---|---|
| Reactivity | Auto UI update when data changes | ref(), reactive() | Fast, fine-grained (better than React useState in many cases) |
| Directives | Special HTML attributes | v-if, v-for, v-model, v-bind :class | Feels like super-powered HTML |
| Composition API | Modern logic organization | <script setup>, ref, computed, watch | Cleaner large components |
| Single File Components | .vue = template + script + style | <template>, <script setup>, <style scoped> | Best DX |
| <script setup> | Shorthand for Composition API | No export default needed | 90%+ of new code uses this |
| Vite | Lightning-fast dev server & build tool | npm create vite@latest | Instant HMR, tiny builds |
| Vapor Mode (coming 2026) | No virtual DOM → even faster | Opt-in in Vue 3.6+ | React-level speed with nicer API |
8. Where should you go next after this introduction?
- Do the official Intro tutorial (interactive, free) → https://vuejs.org/tutorial
- Create your first real project:
Bash0123456789npm create vite@latest my-first-vue -- --template vuecd my-first-vuenpm installnpm run dev
- Build something small in 1–2 days:
- Todo list
- Weather card (fetch API)
- Currency converter
Then move to: props, emits, computed, Pinia (state), Vue Router, forms, etc.
Any part unclear? Want me to explain reactivity deeper? Difference between Vue vs React in 2026? Or jump straight to first Vite project explanation?
Just tell me — I’m here like your local senior dev friend in Gachibowli ☕🚀
