Vue shablonlari
Vue-dagi shablon (template) bu bizning Vue ilovamizning HTML qismi deb ataydigan narsadir.
tegi keyinchalik *.vue fayllarida kodimizni yaxshiroq tuzilish uchun ishlatiladi.
Vue misolida shablonni konfiguratsiya opsiyasi sifatida ishlatish va HTML kodini ichiga qo‘yish mumkin.
Vue shabloni
Keling, konfiguratsiya opsiyasi sifatida "shablon (template)" dan foydalanadigan misolni ko‘rib chiqaylik. Bu oddiy misol, biz HTML qismini hozirgina "shablon (template)" konfiguratsiya opsiyasiga o‘tkazdik:
Misol
<div id="app"> ichidagi HTML kontenti `...` teskari qo‘shtirnoq ichiga olingan "shablon (template)" konfiguratsiya opsiyasiga o‘tkaziladi. a ichida HTMLning ko‘p qatorlarini yozishimiz mumkin
orqaga belgi qo‘yish.
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:
`<h1>{{ message }}</h1>
<p>This is a second line of HTML code, inside
back tick quotes</p>`,
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
Yagona fayl komponentlari (SFCs)
Yuqoridagi kod misolida ko‘rib turganingizdek, Vue ilovamizning HTML qismi ham Vue misolida to‘planishi mumkin, ammo bu HTML faylida umumiy ko‘rinishni olishni osonlashtirmaydi.
Yaxshiroq ko‘rinish olish, yirikroq loyihalarni boshqarishni osonlashtirish va yaxshi rivojlanish muhitiga ega bo‘lish uchun biz endi Vue kodimizni SFC yoki *.vue fayllarida yozishga o‘tamiz.
Barcha *.vue fayllari faqat uch qismdan iborat:
<template>HTML tarkibi qayerda.Vue kodimiz uchun
<script>.<style>bu yerda biz CSS uslubini yozamiz.
Lekin loyihamizda *.vue fayllaridan foydalanishimizdan oldin kompyuterimizni boshqa usulda sozlashimiz kerak. Ushbu qo‘llanmaning keyingi sahifalarida buni tushuntirib beradi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!