Cum creați o pagină pe Vue?

O pagină Vue se creează de obicei ca un component separat (.vue), care constă din trei secțiuni: <template>, <script> și <style>.

1. <template>: Definește structura HTML a paginii, folosind sintaxa de template Vue pentru a lega datele și logica.

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

2. <script>: Conține logica JavaScript a paginii, inclusiv definirea datelor (data), proprietăților calculate (computed), metodelor (methods), hooks-urilor ciclului de viață și alte opțiuni ale componentului.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Pagina mea Vue',
         pageContent: 'Aceasta este conținutul primei mele pagini Vue.'
       };
     },
     mounted() {
       // Logica executată după montarea componentului
       console.log('Pagina a fost montată!');
     }
   }
   </script>
   

3. <style>: Conține stilurile CSS aplicate componentului. Se poate folosi modificatorul scoped pentru a limita domeniul stilurilor doar la acest component.

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

Componenta creată este apoi importată în fișierul de rutare (de exemplu, folosind vue-router) și legată de o adresă URL specifică, astfel încât să poată fi afișată această pagină la navigarea către acea adresă.

// router/index.js (exemplu cu vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Importul componentei paginii

const routes = [
  {
    path: '/pagina-mea', // URL-ul paginii
    name: 'MyPage',
    component: MyPage // Componentea care va fi afișată
  }
];

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

export default router;

În fișierul principal al aplicației (main.js), router-ul este conectat la instanța Vue.

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

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

Pe scurt, crearea unei pagini Vue constă în crearea unui component care descrie structura, logica și stilurile sale, și configurarea router-ului pentru a afișa acest component la o adresă URL specifică.