Tento článek vás naučí celý postup pro napsání vaší první aplikace ve frameworku Vue.js. Článek předpokládá, že znáte základní principy Vue a přečetli jste si článek o instalaci Vue do projektu.
Připravíme si testovací HTML stránku, například index.html, do které vložíme samotný Vue framework. Pokud nechcete nic řešit a rovnou vyvíjet, doporučuji použít CDN:
<html>
<head>
<title>Moje aplikace</title>
</head>
<body>
<div id="app">
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
Důležité je si uvědomit, že Vue zvyšuje úroveň abstrakce celého procesu vývoje. Místo psaní webových stránek budeme od teď psát webové aplikace a Vue nám s tím bude velmi pomáhat.
To je důvod, proč má HTML stránka jediný <div>, který má id="app", přes který ho Vue najde.
Nyní proto stačí vytvořit instanci aplikace. Pod načtení knihovny Vue proto vložte:
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
Nyní nám naše Vue aplikace již běží a můžeme používat proměnné.
Celé to vypadá takto:
<html>
<head>
<title>Moje aplikace</title>
</head>
<body>
<div id="app">
Vaše zpráva: <strong>{{ message }}</strong>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Všimněte si důležité věci, a to, že samotná šablona zůstává v HTML. Díky tomuto přístupu můžete vaší existující aplikaci přepisovat postupně a Vue ji bude postupně doplňovat o funkční prvky.
Nyní již umíte zprovoznit první aplikaci. Dále je důležité pochopit jednotlivé výrazy jazyka a ty podle toho vkládat do šablony nebo aplikační logiky.
A další naleznete v menu.