\chapter{Vue.js}

Vue.js alapok #

Mik azok a keretrendszerek #

Keretrendszer olyan könyvtárakat, kódokat és eszközöket tömörít, amelynek segítségével sokkal gyorsabban és egyszerűbben tudunk egy adott alkalmazást elkészíteni, mivel egy alaprendszer már adott amit nekünk csak bővítenünk kell. Viszont nem csak szabadságot de kötöttségeket is adnak ezek a keretrendszerek, ugyanis megköthetik, hogy pontosan milyen könyvtárszerkezettel, vagy kódolási stílussal dolgozzunk.

Hogyan épül fel a Vue.js #

Két nagyon fontos alapra épül maga a Vue keretrendszer.

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Az egyik a deklaratív renderelés lesz, ami azt jelenti, hogy teljesen szét fogjuk szedni a HTML oldalunkat minél kisebb egységekre és az egyes egységekhet tartozó ES kód állapotán múlik majd, hogy hogyan fog a böngészáben megjelenni az adott kódrészlet.

A másik fontos eleme pedig a reaktivitás, vagyis a rendszer azonnal reagálni fog, ha valamely elem állapota megváltozik és ez alapján a böngészőben is látni fogjuk a változást.

És most felmerülhet a kérdés, hogy nem-e lesz lassú, ha folymatosan minden változásnál firssítjük a DOM-ot?

Valójában a DOM-ot teljes egészében nem fogjuk már használni, ugyanis az egyes egységek amiket szétszedtünk, azok a háttérben kapni fognak egy render függvényt és ennek a függvények lesz a feladat az adott elem kezelése és frissítése. Ennek az egységnek lesz a neve a virtuális node. És ezekből fogja a Vue összeépíteni nekünk a Virtuális DOM-ot.

Telepítés #

Az appunkat legegyszerűbben az NPM-en keresztül a következő parancs segítségével tudjuk:

npm init vue@latest

Ekkor kapunk néhány kérdést ami alapján generálni fog nekünk, nézzük meg miket is kapunk: (A csillagok között megjelölt válaszokat válasszük ki minden esetben)

Project name: … <your-project-name>
Add TypeScript? … **No** / Yes
Add JSX Support? … **No** / Yes
Add Vue Router for Single Page Application development? … No / **Yes**
Add Pinia for state management? … No / **Yes**
Add Vitest for Unit testing? … No / **Yes**
Add Cypress for both Unit and End-to-End testing? … **No** / Yes
Add ESLint for code quality? … No / **Yes**
Add Prettier for code formatting? … No / **Yes**

Ezután már csak annyi feladatunk van, hogy telepítsük a függőségeket, megnyissuk a kódot a kedvenc kódszerkesztőnkben (VSCode és PHPStrom ajánlott), valamint futtassük a fejlesztői szervert

Ellenőrző kérdések #

1. Milyen hátrányai lehetnek a keretrendszereknek?
2. Mit használ a Vue a DOM kezelésére?
3. Mi az a virtuális node?
4. Mire jó a reaktivitás?
5. Mi az a deklaratív renderelés?

\pagebreak