Thuta Learning
ရှာဖွေရန်
IntermediateWeb Developmentbeginner

Component Basics

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Vue SFC structure ကိုနားလည်ရန်
  • Child component import နှင့်အသုံးပြုရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Vue component တစ်ခုတွင် <script setup>, <template> နှင့် optional <style scoped> ပါနိုင်သည်။ Component ကို feature သို့မဟုတ် responsibility တစ်ခုစီအလိုက်သေးငယ်စွာခွဲပါ။ <script setup> တွင် import လုပ်ထားသော component ကို template မှ တိုက်ရိုက်သုံးနိုင်သည်။

vue
<!-- CounterButton.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { padding: .75rem 1rem; }
</style>
You should see
Clicked 0 times

လက်တွေ့စမ်းကြည့်ရန်

AvatarCard.vue component တစ်ခုဖန်တီးပြီး App.vue ထဲတွင် သုံးကြိမ်ပြန်လည်အသုံးပြုပါ။

Components BasicsVue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • Component တစ်ခုထဲတွင် feature အားလုံးထည့်ခြင်း
  • SFC တွင် component import မလုပ်ဘဲ tag သုံးခြင်း

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

AvatarCard.vue component တစ်ခုဖန်တီးပြီး App.vue ထဲတွင် သုံးကြိမ်ပြန်လည်အသုံးပြုပါ။

You'll know it worked when: Clicked 0 times

Component Basics | Thuta Learning