Chapter 10: Vue Methods
Vue Methods — like we’re sitting together in a Hyderabad café, laptop open, building something fun step by step 😄 In Vue, “methods” are simply the functions you define to handle user interactions, business logic,...
Category: Vue
Chapter 9: Vue v-on
v-on directive in Vue 3 (the one that makes your app actually do things when users interact with it). This is the directive for event handling, and in 2026 it’s still the backbone of...
Chapter 8: Vue Events
Vue Events today — this is where your app starts feeling alive and interactive 😄 In Vue (especially Vue 3 in 2026), “events” means two closely related things: Listening to native DOM events (click,...
Chapter 7: Vue v-for
Think of v-for as Vue’s built-in forEach that magically turns your data array (or object) into repeated HTML elements — and keeps them in sync when the data changes (add/remove/reorder items). Official Vue 3...
Chapter 6: Vue v-show
Vue v-show is Vue’s CSS-based conditional visibility tool. It decides whether an element is visible or hidden by toggling the display CSS property (usually between display: none and the element’s natural display value like...
Chapter 5: Vue v-if
What does v-if actually do? v-if is Vue’s way of saying: “Only create this HTML element (and everything inside it) in the DOM if my condition is truthy. If false → don’t even render...
Chapter 4: Vue v-bind
Vue-bind directive in Vue 3 (the one you’re most likely using in 2026). This is probably the single most-used directive after v-on (@click) and v-for. Once you master v-bind, your templates start feeling truly...
Chapter 3: Vue Directives
Vue Directives are exactly that: special HTML attributes that start with v- (like v-if, v-for, v-model). Vue sees them and takes control — it watches your data and updates the DOM reactively. This is...
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…...
Chapter 1: Vue Home
What exactly is “Vue Home”? In 99% of real Vue.js (Vue 3) projects created in 2025–2026, especially when you use Vite (the recommended tool): Bash
|
0 1 2 3 4 5 6 7 8 |
npm create vite@latest my-app -- --template vue # or with TypeScript npm create vite@latest my-app -- --template vue-ts |
…Vite automatically generates this folder structure: text
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
src/ ├── assets/ ← images, css, etc. ├── components/ ← reusable pieces (Header.vue, Button.vue, Card.vue…) ├── views/ ← page-level components ←←← this is important │ ├── HomeView.vue ← usually called "Home" or "HomeView" │ └── AboutView.vue ├── App.vue ← root component ├── main.js / main.ts ← entry point └── router/ └── index.js ← where routes are defined |
...
