Vue.js una libreria javascript semplice per scrivere applicazioni web

Vuejs è una libreria javascript semplice, veloce e reattiva per scrivere applicazioni web https://vuejs.org
Per collocarlo correttamente rispetto ad altri prodotti “simili” è interessante questo post: https://vuejs.org/v2/guide/comparison.html

Esempio 1

Procediamo con un piccolo esempio iniziale rispetto al bind dei dati.
Al caricamento della pagina viene creata una nuova istanza di vuejs, chiamata app.
E’ composta da due elementi, un selettore per id #app e i dati.
Il message verrà renderizzato nell’elemento selezionato e targettizzato con una sintassi simile ad altri framework come angularjs

Esempio live 1

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app">
        {{ message }}
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
</body>
</html>

Esempio 2

Variante dell’esercizio precendente dove il bind viene effettuato su un attributo di un elemento html e non su un elemento della pagina

Esempio live 2

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app-2">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: 'You loaded this page on ' + new Date()
        }
    });
</script>
</body>
</html>

Esempio 3

Esempio di costrutto condizionale, anche in questo caso la sintassi ricorda l’ng-if di angularjs. Per verificare il funzionamento assegnare il valore false alla proprietà seen

Esempio live 3

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app-3">
        <p v-if="seen">Now you see me</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    });
</script>
</body>
</html>

Esempio 4

esempio di loop. I dati sono presenti all’interno dell’array todos che viene fatto scorrere dal costrutto v-for stampando l’output relativo

Esempio live 4

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: 'JavaScript' },
                { text: 'Vuejs' },
                { text: 'Angularjs' }
            ]
        }
    });
</script>
</body>
</html>

Esempio 5

bind di un evento. Nell’oggetto vuejs viene descritto un metodo chiamato reverseMessagge come una normale funzione js. questo metodo è disponibile all’interno del nostro oggetto vuejs e può essere richiamato
dal costrutto v-on:click seguito dal nome del metodo da chiamare nell’html dell’oggetto associato

Esempio live 5

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });
</script>
</body>
</html>

Esempio 6

bind bi-direzionale. La prima parte è totalmente simile al primo esempio.
L’evoluzione sta nel trasformare la proprietà message in model in modo da ottenere un bind-bidirezionale, ovvero cambiando il testo dell’input si aggiorna live anche la nostra vista (html)

Esempio live 6

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
</body>
</html>

Esempio 7

Creazione di una lista partendo da un component.
La prima parte da osservare è la creazione del component todo-item, un component è un’istanza di vuejs con delle componenti predefinite, nel nostro caso un mini-template html con bind di dati e l’oggetto todo che contiene i dati stessi.
Dal punto di vista dell’html si tratta di un codice classico con l’introduzione del nuovo componente creato.
app7 invece svolge la funzione di controller connettendo l’array dei dati alla vista html che produrrà un output via component

Esempio live 7

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app-7">
        <ol>
            <todo-item v-for="item in miaLista" v-bind:todo="item"></todo-item>
        </ol>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    var app7 = new Vue({
        el: '#app-7',
        data: {
            miaLista: [
                { text: 'Pomodori' },
                { text: 'Zucchine' },
                { text: 'Melanzane' }
            ]
        }
    });
</script>
</body>
</html>

Esempio 8

Creazione di una tabella tramite chiamata ajax/json.
Per quanto riguarda la parte di html e di istanza vuejs non dovrebbero esserci grosse particolarità.
L’aspetto interessante è la chiamata ajax all’accadere dell’evento created (della pagina).
Viene creata una chiamata a una fonte di dati json con una sintassi che ricorda molto jquery, i dati vengono poi memorizzati in una variabile usata dal controller.
Nota importante: il modulo che permette la chiamata XMLHttpRequest non si trova nel core di vue js ma deve essere caricato separatamente e appositamente:

Esempio live 8

Codice sorgente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vuejs</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="app">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Posizione</th>
                <th>Squadra</th>
                <th>Giocate</th>
                <th>Vinte</th>
                <th>Pareggiate</th>
                <th>Perse</th>
                <th>Punti</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(dato, index) in dati">
                <td>{{ index+1 }}</td>
                <td>{{ dato.club_name }}</td>
                <td>{{ dato.matches_total}}</td>
                <td>{{ dato.matches_won}}</td>
                <td>{{ dato.matches_draw}}</td>
                <td>{{ dato.matches_lost}}</td>
                <td>{{ dato.points}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
    var classifica = new Vue({
        el: '#app',
        data: {
            dati: []
        },
        created: function() {
            var that;
            that = this;
            $.ajax({
                url: 'data/classifica.json',
                success: function(res) {
                    that.dati = res;
                }
            });
        }
    });
</script>
</body>
</html>

Vue.js è un framework abbastanza semplice quindi anche un buon punto di partenza! Se serve aiuto postate pure nei commenti.

Esempio 1

Esempio 2

Esempio 3

Esempio 4

Esempio 5

Esempio 6

Esempio 7

Esempio 8

Subscribe to our Mailing List