🏠 Home / Hub
🏠 Back to Hub

Vue.js Basic Lessons

Vue 3 အခြေခံများ တစ်ဆင့်ချင်း သင်ကြရအောင် — Interactive examples included!

17 Lessons · Basics + Router + Pinia + API + Deploy

Part 1 — Core Basics
01
👋

Hello World & Data Binding

Vue app ဖန်တီးနည်း, data(), template syntax နဲ့ two-way binding

{{ }} v-model v-bind data()
02
🔀

Directives

v-if/v-else condition, v-show toggle, v-for loop — array & object

v-if v-show v-for :key
03
🖱️

Events & Methods

Click, input, keyboard events handle, modifiers (.prevent .stop .once)

@click @keyup .prevent methods
04
⚙️

Computed & Watch

Cached computed properties, getter/setter, data changes ကို watch လုပ်

computed watch deep immediate
Part 2 — Components
05
🧩

Components, Props & Emit

Reusable components, parent→child props, child→parent emit, slots

components props $emit slots
06
🔄

Lifecycle Hooks

created, mounted, updated, unmounted — ဘယ်တုန်းက ဘာလုပ်ရမလဲ

created mounted updated unmounted
09
🔃

Dynamic Components

<component :is>, keep-alive state caching, activated/deactivated hooks

:is keep-alive include activated
10
🔗

Provide / Inject

Prop drilling ကို ကျော်ပြီး deep component တွေကို data ဆင်းချနည်း

provide inject reactive default
Part 3 — Styling & UI
07
🎨

Class & Style Binding

:class object/array syntax, :style dynamic binding, computed classes

:class :style object array
08
📝

Forms & v-model

Checkbox, radio, select, textarea, form validation, v-model modifiers

checkbox radio select .number
11

Transitions & Animations

Fade, slide, bounce effects, transition-group for lists, toast notifications

<transition> name appear mode
Part 4 — Real Project Stack
12

Vite & Single File Components

Vite project setup, .vue files, script setup, scoped CSS, folder structure

ViteSFC<script setup>
13
🧪

Composition API

ref, reactive, computed, watch, lifecycle hooks, composables pattern

refreactivewatch
14
🧭

Vue Router

Routes, router-link, params, nested routes, guards, lazy loading pages

routerguardparams
15
🍍

Pinia Store

defineStore, state, getters, actions, auth store, cart store, persistence idea

Piniastoreactions
16
📡

API & Composables

fetch/axios, loading/error state, reusable useApi(), Laravel API connection

APIaxiosuseApi
17
🚀

Testing & Deploy

Vitest basics, component testing idea, build optimization, env, deployment

Vitestbuilddeploy
🎨

CSS Basic Lessons

Selectors, Box Model, Flexbox, Grid, Animations, Responsive — 10 Lessons

Go to CSS Lessons →

📋 Complete Cheat Sheet

Template

{{ message }} ← data
:href="url" ← v-bind
v-model="val" ← 2-way
v-html="rawHtml" ← HTML

Directives

v-if / v-else-if / v-else
v-show="bool"
v-for="item in list"
v-for="(v,k) in obj"

Events

@click="fn"
@keyup.enter="fn"
@click.prevent.stop
@click.once

Class / Style

:class="{ active: ok }"
:class="[a, b]"
:style="{ color: c }"
:style="[obj1, obj2]"

Computed / Watch

computed: { x() {} }
watch: { val(n,o){} }
watch: { val: {
handler, deep, immediate

Component

props: ['name']
$emit('event', data)
inject: ['key']
provide() { return {} }

Lifecycle

created() ← API fetch
mounted() ← DOM/timer
updated() ← after render
unmounted() ← cleanup

Dynamic / Transition

<component :is="tab">
<keep-alive>
<transition name="fade">
<transition-group>

v-model Modifiers

v-model.number → Number
v-model.trim → trim
v-model.lazy → on blur
:value + @input → manual

📌 Study Checklist