Vue'da nasıl bir sayfa oluşturuyorsunuz?

Vue'da bir sayfa genellikle ayrı bir bileşen (.vue dosyası) olarak oluşturulur ve üç bölümden oluşur: <template>, <script> ve <style>.

1. <template>: Sayfanın HTML yapısını tanımlar ve Vue şablon sözdizimini kullanarak verileri ve mantığı bağlar.

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

2. <script>: Sayfanın JavaScript mantığını içerir, veri tanımlamaları (data), hesaplanan özellikler (computed), metodlar (methods), yaşam döngüsü kancaları ve diğer bileşen seçeneklerini içerir.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Benim Vue Sayfam',
         pageContent: 'Bu benim ilk Vue sayfamın içeriği.'
       };
     },
     mounted() {
       // Bileşen monte edildikten sonra çalışan mantık
       console.log('Sayfa monte edildi!');
     }
   }
   </script>
   

3. <style>: Bileşene uygulanan CSS stillerini içerir. scoped modifikatorü kullanılarak stillerin sadece bu bileşene sınırlanması sağlanabilir.

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

Oluşturulan bileşen daha sonra yönlendirme dosyasına (vue-router kullanılarak) ithal edilir ve belirli bir URL ile ilişkilendirilir, böylece bu adrese gidildiğinde sayfa gösterilir.

// router/index.js (vue-router ile örnek)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Sayfa bileşeninin ithali

const routes = [
  {
    path: '/my-page', // Sayfa URL'si
    name: 'MyPage',
    component: MyPage // Gösterilecek bileşen
  }
];

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

export default router;

Uygulamanın ana dosyasında (main.js), router Vue örneğine bağlanır.

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

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

Kısaca, Vue'da sayfa oluşturmak, yapısını, mantığını ve stillerini tanımlayan bir bileşen oluşturmaktan ve bu bileşeni belirli bir URL'de gösterecek şekilde router'ı yapılandırmaktan ibarettir.