<!-- archivo index.html -->

<!DOCTYPE html>
<html lang="es">
  <head>
      <title>index.html</title>
      <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
  <body>
    <div id="app">
        <hola></hola>
    </div>
    <!-- carga de la librería 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 {
                    persona: {
                        nombre: "Franck",
                        edad: 32
                    }
                }
            },
            methods: {
                log() {
                    console.log("componente via mixin creado");
                }
            },
            created() {
                console.log(`Hola ${this.persona.nombre} - ${this.persona.edad} años`);
                this.log();
            }
        }

        Vue.component('hola', {
            mixins: [maMixin],
            data() {
                return {
                    persona: {
                        nombre: "Yoann",
                        apellido: "Durand"
                    }
                }
            },
            methods: {
                log() {
                    console.log("componente creado")
                }
            },
            created() {
                console.log(`Hola ${this.persona.nombre} ${this.persona.apellido} - ${this.persona.edad} años`);
                this.log();
            },
            template: `
                <span>Hola {{ persona.nombre }} {{ persona.apellido }} - {{ persona.edad }} años</span>
            `
        });

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