Ինչպե՞ս եք ստեղծում Vue-ում էջը։

Vue-ով էջը սովորաբար ստեղծվում է որպես առանձին կոմպոնենտ (.vue ֆայլ), որը բաղկացած է երեք բաժիններից՝ <template>, <script> և <style>։

1. <template>: Դասավորում է HTML կառուցվածքը էջի, օգտագործելով Vue-ի շաբլոններ տվյալների կապակցման և տրամաբանության համար։

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

2. <script>: պարունակում է JavaScript տրամաբանությունը էջի, ներառյալ տվյալների սահմանումը (data), հաշվարկվող հատկությունները (computed), մեթոդները (methods), կյանքի ցիկլի հուկերը և այլ ընտրանքներ։

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Իմ Vue էջը',
         pageContent: 'Սա իմ առաջին Vue էջի բովանդակությունն է։'
       };
     },
     mounted() {
       // տրամաբանություն, որը կատարվում է կոմպոնենտի տեղադրման հետո
       console.log('Էջը տեղադրված է!');
     }
   }
   </script>
   

3. <style>: պարունակում է CSS ոճեր, որոնք կիրառվում են կոմպոնենտի վրա։ Կարող եք օգտագործել scoped մոդիֆիկատորը՝ սահմանափակելու ոճերի տարածքը միայն այս կոմպոնենտի համար։

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

Ստեղծված կոմպոնենտը ապա ներմուծվում է երթուղիների ֆայլում (օրինակ՝ vue-router-ի օգտագործմամբ) և կապվում է որոշակի URL-ով, ինչը թույլ է տալիս այս հասցեով անցնելիս ցուցադրել այս էջը։

// router/index.js (մասին vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // էջի կոմպոնենտի ներմուծում

const routes = [
  {
    path: '/my-page', // էջի URL-հասցե
    name: 'MyPage',
    component: MyPage // ցուցադրվող կոմպոնենտ
  }
];

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

export default router;

Հիմնական ֆայլում (main.js) երթուղին կապվում է Vue հավելվածի օրինակին։

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

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

Այսպիսով, Vue-ով էջի ստեղծումը նշանակում է այն կոմպոնենտի ստեղծում, որը նկարագրում է նրա կառուցվածքը, տրամաբանությունը և ոճերը, և հետագայում երթուղիների կարգավորումը՝ այս կոմպոնենտը որոշակի URL-ով ցուցադրելու համար։