Come iniziare con Vue.js? Ecco le basi e le principali funzioni che all’inizio non possono essere ignorate.

Sì oggi vogliamo riportare l’attenzione su come approcciare a Vue.js, libreria JavaScript di grande prestigio che abbiamo avuto modo diverse volte di raccontarvi attraverso questo blog.

Ecco quindi una mini guida BASE che va un po’ oltre le basi, in modo da fornirvi un quadro chiaro e completo proprio su come iniziare a utilizzare Vue.js.

Vue.js: l’inizio e l’approccio a Vue.js

Possiamo iniziare con lo scrivere il seguente file index.html:

<html>

<head>

    <title>Utilizziamo Vue</title>

</head>

<body>

<div id=“app”>

    <h1>Primo utilizzo di Vue</h1>

</div>

</body>

<script src=“https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js”></script>

<script>

    new Vue({

        el: ‘#app’,

    })

</script>

</html>

Nel file precedente Vue è stato inserito attraverso una CDN. Nel tag <script> è stata inserita una istanza di Vue. Inoltre, con l’opzione el:’#app’ viene indicato quale elemento della pagina prendere come riferimento. Al di fuori dell’elemento con id=’app’, Vue non riconoscerà niente.

Ora, proviamo ad inserire nel costruttore di Vue un oggetto data nel modo seguente:

<script>
    new Vue({
        el: ‘#app’,
       data:{
            message: ‘Oggi inizio lo studio di Vue’
        }
    })
</script>

Per visualizzare il messaggio è necessario inserire ‘message’ all’interno di doppie parentesi graffe in questo modo:

<div id=“app”>
    <h1>Primo utilizzo di Vue</h1>
    <h2>{{message}}</h2>
</div>

Two-way Binding

Supponiamo di voler cambiare il messaggio al variare di quello che è scritto all’interno di una casella di input. Procediamo nel seguente modo:

<div id=“app”>
    <h1>Primo utilizzo di Vue</h1>
    <h2>{{message}}</h2>
    <input v-model=“message”>
</div>

Ora ‘message’ e la casella di input sono collegati attraverso la direttiva v-model.

Direttive in Vue.js

Le direttive in Vue.js sono speciali attributi HTML, che iniziano con prefisso v- e che permettono di aggiungere comportamenti a livello di presentazione.

Direttiva v-show

Supponiamo di avere il seguente file:

<html>

<head>

    <title>Utilizziamo Vue</title>

</head>

<body>

<div id=“app”>

    <h1 v-show=“!message”>Messaggio assente</h1>

    <textarea v-model=“message”></textarea>

</div>

</body>

<script src=“https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js”></script>

<script>

    new Vue({

        el: ‘#app’,

        data:{

            message:

        }

    })

</script>

</html>

Come è possibile vedere dall’esempio, se ‘message’ è vuoto compare a video ‘Messaggio assente’. Inoltre, bisogna notare, che un elemento con la direttiva v-show sarà sempre renderizzato e rimarrà nel DOM. La direttiva agisce sulla proprietà CSS display.

Direttiva v-if e v-else

Osserviamo il seguente codice:

<html>
<
head>
<
title>Utilizziamo Vue</title>
</
head>
<
body>
<
div id=”app”>
<
div v-if=”!message”>Messaggio vuoto</div>
<
textarea v-model=”message”></textarea>
</
div>
</
body>
<
script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js></script>

<script>
new Vue({
el: ‘#app’,
data: {
message: ‘Benvenuto nella tua applicazione Vue’
}
})
</
script>
</
html>

Come possiamo notare è stata sostituita la direttiva v-show con v-if. L’unica differenza è che un elemento con v-if non rimane nel DOM.

Con la direttiva v-if può essere utilizzata anche la direttiva v-else nel modo seguente:

<div id=”app”>
<div v-if=”!message”><h1>Messaggio vuoto</h1></div>
<div v-else><h2>Messaggio inserito</h2></div>
<textarea v-model=”message”></textarea>
</div>

Direttiva v-for

Per iterare un array viene utilizzata v-for. La sintassi di questa direttiva deve essere nella forma item in array dove array è la sorgente dei dati e item rappresenta un alias per l’elemento dell’array che è iterato. Osserviamo il seguente esempio:

<html>

<head>

    <title>Utilizziamo Vue</title>

</head>

<body>

    <div id=”app”>

        <h1>I giorni della settimana sono:</h1>

        <ul>

            <li v-for=”day in days”>

                {{day}}

            </li>

        </ul>

    </div>

</body>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js”></script>

<script>

    new Vue({

        el: ‘#app’,

        data: {

            days: [

                ‘lun’,

                ‘mar’,

                ‘mer’,

                ‘gio’,

                ‘ven’,

                ‘sab’,

                ‘dom’

            ]

        }

       })

</script>

</html>

 

Corso Vue.js: 12 ore in aula e da remoto, dai un’occhiata se hai necessità di approfondire Vue.js