Vue.js – partie 1

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.

Laisser un commentaire