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:

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

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:

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:

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  :

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

 

Vue.js – partie 1

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

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

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.