Programozás Vue.js kezdetek

VueJS kezdetek

Vágjunk bele a VueJS fejlesztésbe.
Ebben a gyorstalpalóban azt mutatom meg, hogyan kezdd a munkát, ha új vagy a Vue -ban.

Videós magyarázat


Forráskód a Github -on:

Github repo

Szöveges segítség

Ha a VueJS -el akarsz dolgozni, szükséged van a vue fájlra, ígyhát először azt kell beillesztened a HTML fájlodba.
Az alábbi kódban már be is van szúrva, illetve betettem az alap stílusokat tartalmazó main.css fájlt is.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Shopping List App</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </body>
</html>

Adatok interpolálása

Ez az interpolálás kifejezés még az Angular 1 ből jön, a VueJS ennek az utóda. Arról van szó, hogy egy változót megjelenítünk a DOM -ban.
Jele: {{ }}

<div id="shopping-list">
    <div class="header">
        <h1>{{ header.toLocaleUpperCase() }}</h1>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Hol dolgozik a VueJS?

Hát ott, ahol mondják neki.
Először létre kell hoznod egy Vue objektumot, és a beállításokban tudod megadni, melyik DOM Element legyen a játszótere.
A beállítás neve el:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var shoppingList = new Vue({
        el: '#shopping-list',
    });
</script>

Honnan jön a header?

Látszik, hogy az interpolációban van egy header nevű változó, ami a metódus alapján valószínűleg string.
Nade hol kell definiálnom, hogy a VueJS be tudja szúrni?
Természetesen a Vue objektumban, a data részen:

<script>
    var shoppingList = new Vue({
        el: '#shopping-list',
        data: {
            header: 'shopping list app',                    
        },
    });
</script>

Üdv a VueJS fejlesztők között!