Vue.js – Dayo

Vue.js partie 2

19 mars 2016 Dayo 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: []
    }

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);
}

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: ''};
        }
    }
}

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>

1	<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>

<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

12 mars 2016 Dayo 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>

<!DOCTYPE html>

<head>

<title>Vue.js Lumen</title>

</head>

<body>

<h1>Ajouter un livre</h1>

<h2>{{ livre.nom }}</h2>

<p>{{ livre.commentaire }}</p>

<p>{{ livre.lu }}</p>

</div>

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.

Dayo

I ain't afraid of no code

Archives de
Catégorie : Vue.js

Vue.js partie 2

19 mars 2016 Dayo Commentaires 0 Commentaire

Vue.js – partie 1

12 mars 2016 Dayo Commentaires 0 Commentaire