Vue da sahifa qanday yaratish mumkin?

Vue sahifasi odatda alohida komponent (.vue fayl) sifatida yaratiladi, u uch qismdan iborat: <template>, <script> va <style>.

1. <template>: Sahifaning HTML tuzilishini belgilaydi va Vue shablon sintaksidan foydalanib ma'lumotlar va mantiqni bog'laydi.

   <template>
     <div>
       <h1>{{ pageTitle }}</h1>
       <p>{{ pageContent }}</p>
     </div>
   </template>
   

2. <script>: Sahifaning JavaScript mantiqini o'z ichiga oladi, bu yerda ma'lumotlar (data), hisoblangan xususiyatlar (computed), metodlar (methods), hayot aylanishi hooklari va boshqa komponent opsiyalari aniqlanadi.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Mening Vue sahifam',
         pageContent: 'Bu mening birinchi Vue sahifamning mazmuni.'
       };
     },
     mounted() {
       // Komponent montaj qilinib bo'lingach bajariladigan mantiq
       console.log('Sahifa montaj qilindi!');
     }
   }
   </script>
   

3. <style>: Komponentga qo'llaniladigan CSS uslublarini o'z ichiga oladi. scoped modifikatori yordamida uslublarning faqat bu komponentga taalluqli bo'lishi mumkin.

   <style scoped>
   h1 {
     color: blue;
   }
   
   p {
     font-size: 16px;
   }
   </style>
   

Yaratilgan komponent keyinchalik marshrutlash fayliga (vue-router yordamida) import qilinadi va ma'lum bir URL bilan bog'lanadi, bu esa bu manzilga o'tganda sahifani ko'rsatishga imkon beradi.

// router/index.js (vue-router bilan misol)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Sahifa komponentini import qilish

const routes = [
  {
    path: '/mening-sahifa', // Sahifa URL
    name: 'MyPage',
    component: MyPage // Ko'rsatiladigan komponent
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

Asosiy ilova faylida (main.js) router Vue instansiyasiga ulanadi.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Shu tarzda, Vue sahifasi yaratish uning tuzilishini, mantiqini va uslublarini tavsiflovchi komponent yaratish va bu komponentni ma'lum URLda ko'rsatish uchun routerni sozlashdan iborat.