🟢 Lesson 01 — Hello World & Data Binding

1. Interpolation {{ }}

{{ }} နဲ့ data ကို HTML ထဲ ထည့်ပြနိုင်တယ်

<div id="app">
  <h3>{{ message }}</h3>
  <p>Name: {{ name }}</p>
  <p>1 + 2 = {{ 1 + 2 }}</p>
  <p>{{ name.toUpperCase() }}</p>
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!',
      name: 'Mg Mg'
    }
  }
})

2. v-model — Two-way Data Binding

input မှာ ရိုက်တာနဲ့ တပြိုင်နက် data ပြောင်းသွားတယ် (Real-time)

<input v-model="username" placeholder="Type your name...">
<p>Hello, {{ username }}!</p>

data() {
  return { username: '' }
}

3. v-bind — Attribute Binding

HTML attribute တွေကို data နဲ့ ချိတ်ဆက်ဖို့ v-bind သုံးတယ် (:shorthand)

<a v-bind:[dynamicHrefAttr]="link" :title="tooltip">Click me</a>
<img :src="imgUrl" :alt="imgAlt">
<p :style="{ color: textColor }">Colored Text</p>

data() {
  return {
    dynamicHrefAttr: 'href',
    link: 'https://vuejs.org',
    tooltip: 'Go to Vue.js site',
    textColor: '#42b883'
  }
}

4. Reactive Data — Live Playground

v-model.number  → input ကို number အဖြစ် ယူတယ်
v-model.trim    → whitespace ဖြတ်တယ်
v-model.lazy    → blur ဖြစ်မှ update တယ်