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:
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>