Začneme jednoduchou integrací Vue.js a vyzkoušíme si Vue.js hello world. Jak jsem v prvním díle psal o jednoduchém začlenění Vue.js do projektu, tak první sekce tohoto kurzu bude právě o jednoduchém začlenění a seznámení se s Vue.
V dalších dílech si ukážeme, jak využívat Vue.js pomocí NPM. V první sekci tohoto kurzu nám bude stačit integrace pomocí tagu src.
Integrace do projektu
Nebudeme Vue.js stahovat ale využijeme CDN jsDelivr. Do hlavičky nově vytvořené html stránky vložíme následující skript.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Tak jednoduše můžeme začít využívat výhody Vue. V průběhu kurzu budete mít možnost sledovat progres na GitHubu, abyste si mohli kontrolovat svůj postup.
Instance Vue.js
Nyní si vytvoříme instanci Vue. V následujícím kódu uvidíte, jak se taková instance tvoří pomocí klíčového slova new. Při vytváření instance určujeme el, tento element nám určuje, na který html element se váže Vue instance. Jedná se o tzv. root element. Pomocí Vue můžeme ovládat vše uvnitř tohoto elementu.
Další vlastnost kterou můžete při vytváření Vue instance vidět jsou data. Jedná se o proměnné, do kterých můžeme ukládat hodnoty. Vue instance se postará o zobrazení dat v kořenovém elementu. Jestliže vytvoříme v objektu data například message jako v našem příkladu, můžeme hodnotu uloženou v message zobrazit v kořenovém elementu pomocí {{ message }}. Vue se samo postará o výpis uložené hodnoty.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue.js kurz</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
Při zobrazení stránky byste měli vidět “Hello Vue!” na místě, kde je zapsané {{ message }}. V dalším díle se podíváme na data a metody.
Komentáře
Alois Sečkár
13.11.2019 20:21
Proč přesně musí být ten script tag s definicí Vue až za body? Dal jsem ho prvně mezi head a body a to nefungovalo, tak by mě pro lepší pochopení toho, jak to funguje, zajímalo, proč na tom pořadí záleží?
Zanechte komentář