Archives de
Category: Vue.js

Vue.js et localstorage

Vue.js et localstorage

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. Le dépôt…

Lire la suite Lire la suite

Vue.js partie 2

Vue.js partie 2

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…

Lire la suite Lire la suite

Vue.js – partie 1

Vue.js – partie 1

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é…

Lire la suite Lire la suite