Practice: Reactivity & Template Basics

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ lesson က teaching အသစ်မဟုတ်ဘဲ Basic chapter မှာသင်ခဲ့တဲ့ reactivity, template directives, event handling, forms v-model concept တွေကို လက်တွေ့ practice လုပ်ဖို့ ရည်ရွယ်တယ်။ Component အသစ်ဖန်တီးပြီး ref/computed ကို ကိုယ်တိုင် ရေးကြည့်တဲ့အခါ syntax ကို ပိုမှတ်မိလာမယ်။ Task တစ်ခုချင်းစီကို code editor ဖွင့်ပြီး ကိုယ်တိုင်ရေးကြည့်ဖို့ အကြံပြုပါတယ်။ Solution ကို ကြည့်ခင် ကိုယ့်ဟာကိုယ် ၅ မိနစ်လောက် ကြိုးစားကြည့်ရင် ပိုမှတ်မိပါလိမ့်မယ်။

လေ့ကျင့်ခန်းများ

Task 1: Counter component တစ်ခုတည်ဆောက်ပြီး ref value ကို increment/decrement/reset လုပ်နိုင်တဲ့ button သုံးလုံးထည့်ပါ။ Task 2: 'firstName' နှင့် 'fullName' ကို computed နဲ့ ချိတ်ပြီး input box ထဲ typing လုပ်ရင် fullName ချက်ချင်း update ဖြစ်အောင် v-model နှစ်ခု ချိတ်ကြည့်ပါ။ Task 3: array of items (fruits list) ကို v-for နဲ့ render လုပ်ပြီး v-if သုံးပြီး list ဗလာဖြစ်ရင် 'No items' ဆိုတဲ့ message ပြပါ။ Task 4: button click တစ်ခုမှာ @click.stop နဲ့ event modifier သုံးပြီး parent event ကို propagate မဖြစ်အောင် တားကြည့်ပါ။

• ref() နှင့် computed() ကွာခြားချက်ကို ရှင်းရှင်းနားလည်
• v-model two-way binding အလုပ်လုပ်ပုံကို လက်တွေ့စမ်းသပ်
• v-for/v-if ပေါင်းသုံးရာမှ conditional list rendering ကို ပြသနိုင်

Code နမူနာ

<script setup>
import { ref, computed } from 'vue'

// Task 1: counter
const count = ref(0)

// Task 2: fullName
const firstName = ref('')
const lastName = ref('')
const fullName = computed(() => `${firstName.value} ${lastName.value}`.trim())

// Task 3: fruits list
const fruits = ref(['Apple', 'Banana', 'Mango'])
</script>

<template>
  <section>
    <p>Count: {{ count }}</p>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count = 0">Reset</button>
  </section>

  <section>
    <input v-model="firstName" placeholder="First name" />
    <input v-model="lastName" placeholder="Last name" />
    <p>Full name: {{ fullName }}</p>
  </section>

  <ul v-if="fruits.length">
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
  <p v-else>No items</p>
</template>

Counter buttons က count ကို ချက်ချင်း update လုပ်ပြီး၊ input နှစ်ခု typing လုပ်တာနဲ့ fullName ချက်ချင်း ပြောင်းသွားပြီး fruits list ကို screen ပေါ်မှာ item တွေအဖြစ် တစ်ခုချင်းပြသည်။