Píšeme první aplikaci ve Vue.js

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.

První kroky

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.

Další kroky

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.