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

Template Syntax and Directives

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

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

  • {{ }} interpolation သုံးရန်
  • v-bind ဖြင့် attribute ချိတ်ရန်
  • Directive syntax ကိုဖတ်နိုင်ရန်

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

Template ထဲတွင် {{ value }} က text interpolation ဖြစ်သည်။ HTML attribute များကို reactive value နှင့်ချိတ်ရန် v-bind သို့မဟုတ် အတိုကောက် : ကိုသုံးသည်။ User input ကို v-html ဖြင့်တိုက်ရိုက် render မလုပ်သင့်ပါ။

vue
<script setup>
const profile = {
  name: 'Su Su',
  avatar: '/avatar.png',
  active: true
}
</script>

<template>
  <h2>{{ profile.name }}</h2>
  <img :src="profile.avatar" :alt="profile.name">
  <p :class="{ online: profile.active }">Online</p>
</template>
You should see
Su Su
[avatar image]
Online

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

Product object တစ်ခုဖန်တီးပြီး title, price နှင့် image src ကို template တွင်ပြပါ။

Template SyntaxVue.js

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

  • Attribute ထဲတွင် {{ }} သုံးခြင်း
  • မယုံကြည်ရသော user input ကို v-html ဖြင့် render လုပ်ခြင်း

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

Product object တစ်ခုဖန်တီးပြီး title, price နှင့် image src ကို template တွင်ပြပါ။

You'll know it worked when: Su Su [avatar image] Online

Template Syntax and Directives | Thuta Learning