Kuidas luua Vue-s lehte?

Lehekülg Vue-s tavaliselt luuakse eraldi komponendina (.vue fail), mis koosneb kolmest sektsioonist: <template>, <script> ja <style>.

1. <template>: Määratleb HTML-struktuuri lehel, kasutades Vue mallide süntaksit andmete sidumiseks ja loogika jaoks.

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

2. <script>: Sisaldab lehe JavaScript-loogikat, sealhulgas andmete määratlemist (data), arvutatud omadusi (computed), meetodeid (methods), elutsükli haake ja muid komponendi valikuid.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Minu Vue leht',
         pageContent: 'See on minu esimese Vue lehe sisu.'
       };
     },
     mounted() {
       // Loogika, mis käivitatakse pärast komponendi monteerimist
       console.log('Leht on monteeritud!');
     }
   }
   </script>
   

3. <style>: Sisaldab CSS-stiile, mis rakenduvad komponendile. Võib kasutada scoped modifikaatorit, et stiilid kehtiksid ainult selle komponendi kohta.

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

Loodud komponent imporditakse seejärel marsruutimise faili (näiteks kasutades vue-router) ja seotakse kindla URL-iga, võimaldades sellel aadressil selle lehe kuvamist.

// router/index.js (näide vue-routeriga)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Lehe komponendi import

const routes = [
  {
    path: '/my-page', // Lehe URL-aadress
    name: 'MyPage',
    component: MyPage // Kuvatav komponent
  }
];

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

export default router;

Peamise rakenduse failis (main.js) ühendatakse marsruutija Vue rakenduse eksemplariga.

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

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

Seega Vue lehe loomine hõlmab selle struktuuri, loogika ja stiilide kirjeldamist komponendis ning seejärel marsruutija konfiguratsiooni selle komponendi kuvamiseks kindlal URL-il.