Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<html lang="fr">
 <head>
   <meta charset="UTF-8">
<title>Todo VueJS avec composants</title>
<script src="https://unpkg.com/vue">
</script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.core.min.js"></script>
​
</head>
 <body>
   
   
<!-- 
http://jsbin.com/pufamak/5/edit?html,output
​
En vous aidant de l'exemple fait en classe en live coding
​
  1) Créez un <div> et prenez-en le controle avec une instance de Vue
  2) Vous afficherez une liste de hobbies dans ce <div>, contenus dans un tableau JS 
     (fournissez quelques hobbies par defaut)
  3) Ajoutez un bouton 'Nouveau Hobby'  + un champ <input>
     Quand on clique le bouton on ajoutera le hobby et la vue se mettra à jour
  4) Rendez chaque hobby clickable. Si on clique un hobby on le supprime 
  5) Faites apparaitre un message <p>Hobby supprimé! dans un </p> 
     qui ne sera visible que lorsque au moins un hobby a été supprimé
     (soyez créatifs! Il y a plusieurs manières de faire)
  6) Ajouter un compteur de hobbies (<p>Nombre de Hobbies: ...</p>) 
     au-dessus de la liste des hobbies
  7) Changez le style CSS du compteur, selon sa valeur: vert si moins de 3 hobbies
     rouge sinon
  8) Transformez les éléments <li> en un composant réutilisable <app-hobby>
-->
   
   <div id="app">
       <div>
         <h2>Mes Hobbies</h2>
         <p v-bind:style="{color: countStyle()}">Nombre de Hobbies: {{ hobbies.length }}</p>
         <ul>
           <!-- <li v-for="(h, index) in hobbies" v-on:click="removeHobby(index)">{{h}}</li> -->
           <app-hobby v-for="(h, index) in hobbies"
                      v-bind:name="h"
                      v-on:hobbyclicked="removeHobby(index)">
           </app-hobby>
         </ul>
         <input type="text" v-model="hobbyInput" placeholder="Ecrivez une hobby ..">
         <button v-on:click="addHobby(hobbyInput)"
                 :disabled="hobbyInput.trim() == ''">Nouveau Hobby</button>
       </div>
   </div>
  </body>
</html>
 
 
 
    Vue.component('app-hobby', {
      props: ['name'],
      data: function() {
        return {
        }
      },
      template: '<li v-on:click="removeHobby">{{ name }}</li>',
      methods: {
        removeHobby: function(){
          this.name = "Hobby supprimé!"
          // j'ai passé longtemps pour découvrir 
          // qu'il ne faut pas utliser des lettres majuscules
          // pour nommer un événement, donc c'est pas hobbyClicked
          // mais plustot hobbyclicked
          this.$emit('hobbyclicked', this.hobbyName);
        }
        
      }
    });
    new Vue({
      el: '#app',
      data: {
        hobbies: ['Football', 'Natation', 'Dessin', 'Lecture'],
        hobbyInput: '',
      },
      methods: {
        removeHobby: function(index) {
          
          // pour preserver le 'this', on dois utiliser un
          // arrow function pour binder le context au parent
          // et donc pouvoir acceder au tableau des hobbies
          setTimeout(() => {
            this.hobbies.splice(index, 1);
          }, 400);
          
        },
        addHobby: function(hobby) {
            this.hobbies.push(hobby);
            this.hobbyInput = '';
        },
        countStyle: function(){
          return this.hobbyCount<=3 ? "red" : "green"
        }
      }
    })
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers