fbpx

Mi az a Vue.js? Élő példákkal bemutatva!

Vue.js logo

Manapság minden egyes weboldalnak, webáruháznak szüksége van a megfelelő böngészőoldali élmény, valamint funkcionalitás megteremtésére. Ez alapvető fontosságú: ugyanis ezek nélkül az adott online megjelenés nem fogja azokat az eredményeket hozni, amiket szeretnénk, és elvárnánk. A Vue.js ebben tud nekünk segíteni.

Aki dolgozott már JavaScripttel, az tisztában van vele, hogy egy viszonylag könnyen használható scriptnyelv, viszont hosszú távon natív JavaScriptet használni-na, ez sokak szerint nem igazán jó ötlet.

Gondolhatunk itt számos különféle funkcionalitásra: egy felugró ablak megnyitása, bizonyos elemek elrejtése adott feltételek mellett: mindez szimpla JavaScripttel megoldva több időbe telhet. Akkor pedig, ha komplexebb applikációról lenne szó, egészen biztosan rosszul járunk.

Ennek kapcsán érdemes lehet valamilyen jobb megoldás után néznünk.

Miért van szükség keretrendszerekre, könyvtárakra?

Keretrendszerekre (framework), valamint könyvtárakra (library) általában azért lehet szükség, mert ezeknek a segítségével jóval gyorsabban dolgozhatunk, valósíthatjuk meg az adott funkcionalitást.

Ezen felül, gondoljunk csak a böngésző kompatibilitásra: ez a probléma nem csupán CSS esetén merülhet fel. A megírt kódunk nem egyformán fog működni minden böngésző, illetve azok verziói alatt.

Mindezek eredményeként a mai modern webfejlesztésben gyakorlatilag mindenki keretrendszereket, és könyvtárakat is használ.

Mi az a Vue.js?

A Vue.js egy JavaScript könyvtár. Sok esetben keretrendszernek szokták hívni, pedig valójában nem az: az Angular, React, Vue trióból egyedül az Angular minősül frameworknek.

2014-ben jelent meg először, a Google egyik volt fejlesztője készítette eredetileg. Azóta hihetetlenül sok újításon ment keresztül, és a használati tendenciája egyre inkább felfelé ívelőnek látszik. Miért?

Miért a Vue.js?

A Vue.js egy nagyon könnyen megtanulható, és használható JavaScript könyvtár. Alacsony Learning Curve-vel rendelkezik, én annak idején az Udemy-n egy 20 órás tananyagot végig csináltam a témához kapcsolódóan, és egy kicsi gyakorlás után már teljesen tudtam is használni azokra a feladatokra, amikre szerettem volna.

A Vue.js-t annak ellenére, hogy könnyebben elsajátítható, rengeteg feladatra könnyedén fel lehet használni. Kifejezetten szeretik startupok is használni, valamint kiváló párosítást alkot Laravel keretrendszerrel.

Abban az esetben, ha még soha nem használtunk JavaScript keretrendszert, kifejezetten jó opció lehet, ugyanis a sikerélményünk garantált lesz.

Milyen feature-ök vannak a Vue.js-ben?

A Vue.js a háttérben egy virtuális DOM-ot használ. Amennyiben az applikációnk változói frissülnek, az igazi DOM is módosulni fog, ez egy sokkal gyorsabb performanszt, teljesítményt nyújt, mint például a jQuery.

Ez a könyvtár egy MVC-hez hasonló architektúrát követ. Az adataink, a különféle metódusok, valamint az oldalunk HTML része könnyedén szétválasztható a segítségével, ebből adódóan egy jól áttekinthető, átlátható kódot tudhatunk a magunkénak. Az adatok „egy helyre gyűjtésében” lehet segítségünkre a Vuex, ami teljesen engedi különválasztani az applikációnktól azokat, ezáltal a különféle állapotokat meghatározó adatok egy helyre kerülnek.

A Vue.js komponensekből épül fel. Ennek kapcsán könnyedén hozhatunk létre „újrahasznosítható” elemeket az alkalmazásunkon belül: ha például egy képgalériát szeretnénk létrehozni, akkor az egyetlen képet megtestesítő elem lehet egy ilyen komponens. Vagy akár egy űrlap, melyet a weboldalunkon máshol is használni szeretnénk.

A Vue segítségével képesek lehetünk akár többoldalas appokat is építeni, ebből adódóan az úgynevezett routing is jól meg van benne oldva.

Az Vue.js mellé rengeteg kiváló packaget, és third party plugint készítettek. Ezek közé tartozik például a már említett Vuex, vagy a Vuelidate, aminek a segítségével űrlap-érvényesítést valósíthatunk meg könnyedén.

Kifejezetten szeretem, és egyik kedvenc packagem a Bootstrap Vue. A mindenki által ismert, és szeretett Bootstrapet veszi alapul, azzal a különbséggel, hogy tökéletesen illeszkedik a Vue.js-hez.

Néhány alap példa

Annak érdekében, hogy a Vue.js működése kicsit érthetőbb legyen, érdemes lehet néhány alapvető példát áttekinteni.

A Vue.js installálása

A Vue.js-t nagyon egyszerűen installálhatjuk CDN segítségével. Abban az esetben, ha compilert szeretnénk használni, az NPM-hez kell majd nyúlnunk, viszont ha néhány egyszerű példát szeretnénk ismertetni, bőven elég lesz a CDN is. Adjuk az oldalunk tetejére az alábbi kódrészletet a headingen belül.

<head>
    <title>Vue.js bemutatása</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

Egy alap kódrészlet

Amennyiben ezt megtettük, már írhatjuk is a Vue.js kódunkat. Egy végtelenül egyszerű applikáció, arra viszont elég, hogy az alap felállásba bepillanthassunk. A Vue komponensünket a new Vue példánnyal hozhatjuk létre. Itt az „el” rész lesz mindig a kijelölő (lényegében CSS selector), a komponensünk ezen belül fog „létezni”. A data objektumban kulcs-érték párokat megadva különféle értékeket hozhatunk létre, melyekre könnyedén hivatkozhatunk az applikációnkon belül a {{}} interpoláció szintaxis segítségével.

<div id="app">
    <p>{{ title }}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello World!"
        }
    });
</script>

Az eredmény:

Hello World!

Függvények létrehozása

Ez még nyilván nagyon kevés. Ha szeretnénk, hozhatunk létre komponensen belüli függvényeket is, melyeket használhatunk a Vue komponensünkben. A methods objektumban definiálhatjuk ezeket, meghívni pedig a függvény nevével lehet, a zárójelekkel együtt. 

<div id="app">
    <p>{{ title }}</p>
    <p>{{ sayHello() }}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello World!"
        },
        methods: {
            sayHello: function() {
                return "A függvény írta ki: " + this.title;
            }
        }
    });
</script>

Az eredmény:

Hello World!
A függvény írta ki: Hello World!

Computed property-k

Érdemes lehet megismerkednünk az úgynevezett computed property-k fogalmával is. Amennyiben egy komplexebb applikációt szeretnénk létrehozni, nagyon fontos, hogy a performansz a lehető legjobb legyen: gyors működésre van szükség.

Függvényekkel is definiálhatunk sok mindent, és ezekkel is meg lehet jeleníttetni a változóinkat az applikációnkon belül, viszont ezeknek az egyik hátránya, hogy a Vue.js sokszor szükségtelenül meghívja őket egy tulajdonság megváltozásakor – még akkor is, ha a függvény végkimenete nem függ az adott változótól.

Ha az alábbi ábrán megnyomjuk az első gombot, akkor az a Vue applikációnk „counter”-ét fogjuk növelni eggyel. Mivel a computed objektumban definiált output függvény, és a method objektumban definiált result függvény is függ ettől a változótól, mindkét üzenet ki fog íródni a konzolra.

Amennyiben a második gombra kattintunk rá, akkor a konzolra csupán a ’method’ szó fog kiíródni: ugyanis az output computed property nem függ a secondCounter változótól. Természetesen a result függvény sem, de a függvények meghívódhatnak még abban az esetben is, ha nem függ a függvény az adott változó módosulásától.

<div id="computedProperty">
    <button @click="counter++">Kattints rám</button>
    <button @click="secondCounter++">Másik növelése</button>
    <p>{{ secondCounter }}</p>
    <p>{{ counter }}</p>
    <p>Az eredmény: {{ result() }} || {{ output }}</p>
</div>
<script>
    new Vue({
        el: "#computedProperty",
        data: {
            counter: 0,
            secondCounter: 0
        },
        computed: {
            output: function() {
                console.log("computed");
                return this.counter > 3 ? "nagyobb" : "kisebb";
            }
        },
        methods: {
            result: function() {
                console.log("method");
                return this.counter > 3 ? "nagyobb" : "kisebb";
            }
        }
    });
</script>

Az eredmény:

Vue.js computed property példa minta kimenete
A Chrome böngészőben a beépített webfejlesztői eszközöket az F12-vel tudod megnyitni.

Iterációk

Előfordulhat, hogy egy lista elemein szeretnénk végigmenni, esetleg azokhoz valamilyen módon egy új elemet hozzátenni. A for iterációt három féle módon használhatjuk a Vue.js-en belül: tömbökön, objektumokon, vagy akár szimpla számsorozatokon is.

Az alábbi ábrán láthatjuk, hogy mindez hogyan valósul meg: amennyiben tömbről lenne szó, akkor az „element”, és „index” segítségével hivatkozhatunk az éppen adott elemre, és ugyanez a helyzet objektumok esetén is, ott viszont hivatkozhatunk a kulcs-érték párokra is: ez esetben a „value”, „key” és „index” megadása is szükséges lehet.

Amennyiben szeretnénk, akár egy szimpla számsorozatot is kiírathatunk a képernyőre: mondjuk a számokat 1-től 10-ig, ekkor csupán egy x változóval kell jelölnünk az éppen aktuális elemet, és ezzel hivatkozhatunk arra.

Az alsó gombra kattintva pedig egy szimpla JavaScriptből ismert push művelettel tudunk egy elemet a tömbünkhöz csatolni.

<div id="listingElements">
    <ul>
        <li v-for="(element, index) in ingredients" :key="index">{{ index + "." + element }}</li>
    </ul>
	
    <ul>
        <div v-for="(value, key, index) in persons">{{ key + ": " + value.name + "(" + value.age + " éves)" + " - " + value.hair + " hajú" }}</div>
    </ul>
	
    <span v-for="x in 10">{{ x }}</span><br>
	
    <button @click="ingredients.push('zsömle')">push</button>
</div>
<script>
    new Vue({
        el: "#listingElements",
        data: {
            ingredients: ['hús', 'tej', 'tojás'],
            persons: [
                {name: "Peti", age: 42, hair: "vörös"},
                {name: "Jani", age: 25, hair: "fekete"}
            ]
        }
    });
</script>

Az eredmény:

Vue.js iterációs példa minta kimenete

Újrahasznosítható komponensek

Mi van akkor, ha egy olyan komponenst szeretnénk létrehozni, ami az applikációnkon belül vélhetően máshol is jól felhasználható lesz? Természetesen ez is megtehető lesz, ez alábbi módon. A Vue komponensek újrahasznosítható Vue példányok, melyek névvel rendelkeznek.

<div id="reusableComponentDemo">
    <ol>
        <todo-item></todo-item>
        <todo-item></todo-item>
    </ol>
</div>
<script>
    Vue.component("todo-item", {
        template: "<li>Újrahasznosítható komponens létrehozása.</li>"
    })
    new Vue({
        el: "#reusableComponentDemo"
    });
</script>

Az eredmény:

1. Újrahasznosítható komponens létrehozása.
2. Újrahasznosítható komponens létrehozása.

Összefoglalás

A Vue.js tehát egy nagyon hasznos eszköz a front-end programozáshoz, könnyen el lehet vele indulni és az alapokat könnyen el tudod sajátítani néhány egyszerűbb példa leprogramozásával. Némi HTML és JavaScript nyelv ismeret szükséges hozzá, hogy megtanuld, de utána egy nagyon hasznos eszköz tud lenni és érdemes minden programozónak ezzel bővítenie a repertoárját.

A webfejlesztés egy összetett folyamat, de minél több részét ismered, annál csábítóbb leszel a szoftverfejlesztő cégek számára, ezért érdemes a tudásodat minden területen elmélyítened.

Cikket írta: Gremmédia