<!-- fichier index.html -->

<!DOCTYPE html>
<html lang="fr">
  <head>
      <title>index.html</title>
      <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
  <body>
    <div id="app">
        <bonjour></bonjour>
    </div>
    <!-- chargement de la librairie Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src=https://kit.fontawesome.com/5ef1aa4740.js crossorigin="anonymous"></script>

    <script>
        const maMixin = {
            data() {
                return {
                    personne: {
                        prenom: "Franck",
                        age: 32
                    }
                }
            },
            methods: {
                log() {
                    console.log("composant via mixin créé");
                }
            },
            created() {
                console.log(`Bonjour ${this.personne.prenom} - ${this.personne.age} ans`);
                this.log();
            }
        }

        Vue.component('bonjour', {
            mixins: [maMixin],
            data() {
                return {
                    personne: {
                        prenom: "Yoann",
                        nom: "Durand"
                    }
                }
            },
            methods: {
                log() {
                    console.log("composant créé")
                }
            },
            created() {
                console.log(`Bonjour ${this.personne.prenom} ${this.personne.nom} - ${this.personne.age} ans`);
                this.log();
            },
            template: `
                <span>Bonjour {{ personne.prenom }} {{ personne.nom }} - {{ personne.age }} ans</span>
            `
        });

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