Documentation Vue.js : https://vuejs.org/v2/guide/

Les bases de Vue.js

Étape 1

Reproduisez la movie-list présentée au tableau. Rappel des fonctionnalités :

  • Afficher un message (variable dans data)

  • Associer une variable à un paramètre de balise comme title (v-bind)

  • Cacher/Afficher un div avec la directive v-if

  • Afficher une liste de films à partir d’un tableau (v-for)

  • Réagir au click sur un bouton (v-on) pour ajouter un film dans le tableau

  • Synchroniser une variable et un champ de texte (v-model)

  • Afficher la 1ère lettre du texte entré dans l’input (variable dans computed)

Pour installer Vue.js, utilisez directement la balise html <script> :

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo DAWIN</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        // votre template
    </div>

    <script>
    const vm = new Vue({
        el: "#app",
        // votre code
    })
    </script>
</body>
</html>

Étape 2

Ajoutez l’édition et la suppression des films de votre movie-list et affichez le nombre total de films enregistrés.

Vous devez donc avoir : * un formulaire avec un champ texte pour y mettre le nom du film et un bouton pour valider * Un bouton "Éditer" et un bouton "Supprimer" sur chaque puce de la liste * Lorsqu’on clique sur "Éditer", remplir le champ de texte avec le nom du film

N’utilisez pas de composants pour l’instant

Étape 3

On souhaite maintenant stocker les films avec plus d’informations (sous forme d’objets). Modifiez la page pour faire en sorte d’entrer toutes les infos nécessaires (voir ci-dessous).

Affichage : la liste affiche le titre et l’année de sortie et les détails apparaissent en dessous lorsqu’on clique sur la ligne.

Informations d’un film à stocker dans les objets :

  • Titre (string)

  • Année de sortie (number)

  • Réalisateur (string)

  • Synospsis (string)

Utilisez des objets simples ({ title: "test"}), pas besoin de créer des classes

Étape 4

Ajoutez un seul champ de recherche qui trie selon tous les champs suivants :

  • Titre du film

  • Année de sortie

  • Réalisateur

Essayez d’utiliser map, reduce, filter selon les besoins.

Communication entre les composants

Afin de communiquer du parent vers le composant enfant, nous avons vu l’utilisation des props.

Comment communiquer une information de l’enfant vers le parent ? À l’aide des évènements.

Le système d’évènements de Vue utilise 2 fonctions : v-on et $emit.

  • Parent : Réagir à un évènement (avec autant de paramètres que nécessaire)

    //HTML
v-on:eventName="callback"
...
//JS
methods: {
    callback(parameter1) {
    }
}

  • Enfant : Émettre un évènement dans une de ses méthodes

    this.$emit("eventName", parameter1) // 1 paramètre
this.$emit("eventName") // Pas de paramètre

Sur un composant, v-on:click="callback" va réagir à l’évènement click émit par le composant. Pour réagir à l’évènement natif "click de la souris", il faut ajouter le modificateur .native : v-on:click.native="callback"

Afin de bien comprendre le fonctionnement, analysez le code suivant :

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment', this.counter)
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (counter) {
      this.total = counter
    }
  }
})

Étape 5

Créez le composant movie-item qui va prendre en paramètre un objet film (Vue.component et props). Commencez par une version qui ne contient pas les boutons "éditer" et "supprimer" (ils seront ajoutés à l’étape 6) Mettez à jour votre liste de film pour utiliser ce component "movie-item".

Étape 6

Ajoutez à la liste de films version composants (movie-item) les boutons d’édition et de suppression.

Le tableau de film se trouvant dans le composant parent, c’est uniquement dans ce composant qu’on peut supprimer un élément du tableau.

Lorsqu’on clique sur supprimer, le composant "movie-item" émet un évènement qui sera écouté par le composant prinicipal. À la réception de cet évènement, le composant parent supprime l’élément du tableau.