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.

Laisser un commentaire