Archives de
Catégorie : Vue.js

Vue.js et localstorage

Vue.js et localstorage

Commentaires 0 Commentaire

Afin d’utiliser les données https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series nous allons les récupérés a la création de notre application.

Pour ce faire nous regardons si nous avons dans le localstorage une date de défini ou de moins d’une heure. Si non, nous récupérons à l’aide de fetch les données, convertissons le csv a l’aide de papaparse puis stockons le résultats sous forme de JSON dans le localstorage.

Une fois les 3 fichiers chargés grâce à Promise.all, nous allons vers la route /single.

if (localStorage.date === undefined || localStorage.date < Date.now() - 3600) {
                this.$router.push('/');
                localStorage.date = Date.now();
                Promise.all([
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.confirmed = JSON.stringify(Papa.parse(data));
                        }),
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.recovered = JSON.stringify(Papa.parse(data));
                        }),
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.death = JSON.stringify(Papa.parse(data));
                        }),
                ])
                    .then(() => this.$router.push('/single'));
            }

Le dépôt est accessible sur: https://gitlab.com/dayo/covid19 et l’application: https://dayo.gitlab.io/covid19/single

Vue.js partie 2

Vue.js partie 2

Commentaires 0 Commentaire

Allons un peu plus loin en ajoutant un formulaire et une collection de livre.

Commençons par Vue.js. Pour ajouter un livre à une collection, il nous faut donc une collection de livre, un tableau feras l’affaire:

data: {
        livre: {nom: '', commentaire: '', lu: ''},
        livres: []
    }

Afin de commencer avec de livre, nous utilisons la fonction suivante qui est appelé lors de l’instanciation de Vue.js:

ready: function() {
    var livres = [
        { nom: 'Fondation', commentaire: 'Un bon livre de SF', lu: '12-03-2016'}
    ];
    this.$set('livres', livres);
}

Il nous reste une dernière chose a faire en Javascript, l’ajout d’un nouveau livre lors de l’envoie du formulaire. pour cela nous définissons une fonction qui vérifie que le livre que l’on veux ajouter à bien un nom, puis nous l’ajoutons a notre tableau et enfin réinitialisons le formulaire:

methods: {
    ajouterLivre: function() {
        if(this.livre.nom) {
            this.livres.push(this.livre);
            this.livre = {nom: '', commentaire: '', lu: ''};
        }
    }
}

Passons maintenant que html. De côté là, la première chose et d’ajouter un bouton qui va faire appelle a notre fonction Javascript:

<button v-on:click="ajouterLivre">Ajouter</button>

La syntaxe v-on:click= »ajouterLivre »  permet de dire à Vue.js d’invoquer la fonction ajouterLivre lors de l’événement click.

Dernière étape, afficher notre collection de livres. Pour cela nous allons itéré sur notre tableau et afficher chacun de livres en utilisant v-for  :

<div v-for="livre in livres">
    <h2>{{ livre.nom }}</h2>
    <p>{{ livre.commentaire }}</p>
    <p>{{ livre.lu }}</p>
</div>

Et voila, avec un peu de css vous pouvez voir ça ici.

 

Vue.js – partie 1

Vue.js – partie 1

Commentaires 0 Commentaire

Pour commencer à découvrir Vue.js, voyons avec un exemple simple comment fonctionne le Two–way Binding.

Le code suivant permet de bien comprendre le Two-way Binding en action:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js Lumen</title>
</head>
<body>

<div id="livres">
    <h1>Ajouter un livre</h1>
    <input v-model="livre.nom"><br />
    <textarea v-model="livre.commentaire"></textarea><br />
    <input v-model="livre.lu"><br /><br />

    <h2>{{ livre.nom }}</h2>
    <p>{{ livre.commentaire }}</p>
    <p>{{ livre.lu }}</p>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>
<script>
    new Vue({
        // Sélecteur pour notre application Vue.js
        el: '#livres',

        // Nos données serons stocké ici
        data: {
            livre: {nom: '', commentaire: '', lu: ''}
        }
    });
</script>
</body>
</html>

Commençons par le javascript, nous instancions Vue.js avec deux options:

  • el: ‘#livres’, fournit a Vue.js sa zone de travail dans le DOM
  • data: { livre: {nom:  », commentaire:  », lu:  »} } décrit les données qui serons accessible par Vue.js dans sa zone de travail

Pour la partie html du code, deux élément aussi:

  • v-model cet attribue permet à Vue.js de faire le lien avec le modèle décris plus haut
  • la syntaxe {{livre.nom}} permet d’afficher la valeur stocké par Vue.js pour cette variable.

Pour voir ce code en action: c’est par ici.