Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script> <!-- get latest version (seria 3) -->
</head>
<body>

  <div id="app">
    <h1 v-if="showtitulo">{{ title }}</h1>  <!-- DIRECTIVA 1 v-if solo se muestra titulo si showtitulo true -->

    <ul>
        <li v-for="item in items" :key="item.id">{{ item.text }}</li> <!-- DIRECTIVA 2 v-for p/ iterar sobre elementos y mostrar el nombre -->
    </ul>


  <my-component></my-component>

  </div>


  <template id="my-component">
    <div>{{ message2 }}</div>
  </template>


  <script>
    const app = Vue.createApp({
      data() {
        return {
          showtitulo: true,
          title: 'Hello this is Maca testing title',
          items: [
            { id: 0, text: 'cosa 1' },
            { id: 1, text: 'cosa 2' },
            { id: 2, text: 'cosa 3' }
          ]
        }
      }
    });

    app.component('my-component', {
      template: '#my-component',
      data() {
        return {
          message2: 'This is my custom component! IS THIS WORKING?'
        }
      }
    });

    app.mount('#app');

    console.log('Mounted!');
  </script>


</body>
</html>