Diferència entre revisions de la pàgina «VUEJS»

De wikiserver
Dreceres ràpides: navegació, cerca
(V-FOR)
(Ejercicios)
 
(111 revisions intermèdies per 3 usuaris que no es mostren)
Línia 1: Línia 1:
 +
 +
 +
[[Fitxer:vueimagen.png]]
 +
 +
https://www.youtube.com/watch?v=ub8ZU3JxNsM&list=PL7VXpoQP1k247QUTTxHcYBNyCg1j2ALfD
 +
 
v-text: para mostrar texto y que no parpadee
 
v-text: para mostrar texto y que no parpadee
  
 
v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"
 
v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"
 
v-if y v-else:
 
  
 
===V-TEXT===
 
===V-TEXT===
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
 
+
    <div id="el">
        <div id="el">
+
            <h1> {{mensaje}}</h1>    <!--podemos ver -->
                <h1> {{mensaje}}</h1>    <!--podemos ver -->
+
    </div>
        </div>
+
</body>
    </body>
 
 
      
 
      
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> //CDN
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>  
    <script>
+
<script>
        Vue.config.devtools = true;   
+
    var variable = Vue.createApp({
        new Vue({
+
        data: () => ({
            el: '#el',  //hace referencia al elemento id= el
+
             mensaje: "resultado"  //datos, hace referencia dentro de elemento  
             data: {
 
                mensaje: "resultado"  //datos, hace referencia dentro de elemento #el {{mensaje}}
 
            }
 
 
         })
 
         })
 +
    }).mount("#el") //hace referencia al elemento id= el
 
      
 
      
   
+
</script>
    </script>
 
 
</source>
 
</source>
  
Línia 31: Línia 31:
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
        <div id="el">
+
    <div id="el">
                <h1>Hola <span v-text="mensaje"> </span></h1>  <!--muestra "Hola" y luego en función del texto del input va rellenando-->
+
            <h1>Hola <span v-text="mensaje"> </span></h1>  <!--muestra "Hola" y luego en función del texto del input va rellenando-->
                <input type="text" class="text" v-model="mensaje">
+
            <input type="text" class="text" v-model="mensaje">
        </div>
+
    </div>
    </body>
+
</body>
   
+
 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
+
<script>
      
+
 
        var variable = new Vue({
+
     var variable = Vue.createApp({
            el: '#el',
+
        data: () => ({
            data: {
+
            mensaje: "resultado"
                mensaje: "resultado"
 
            }
 
 
         })
 
         })
 +
    }).mount('#el');
 
      
 
      
    </script>
+
</script>
 
</source>
 
</source>
 
  
 
===V-SHOW===
 
===V-SHOW===
Línia 66: Línia 64:
 
<script>
 
<script>
  
     var variable = new Vue({
+
     var variable = Vue.createApp({
        el: '#el',
+
         data: () => ({
         data: {
 
 
             mensaje: "resultado"
 
             mensaje: "resultado"
         }
+
         })
     })
+
     }).mount("#el")
  
  
Línia 80: Línia 77:
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
        <div id="el">
+
  <div id="el">
                <h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>  <!--si el mensaje es mayor que 2 muestra en caso contrario hace un display:none en css-->
+
    <h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>  <!--si el mensaje es mayor que 2 muestra en caso contrario hace un display:none en css-->
                <input type="text" class="text" v-model="mensaje">
+
    <input type="text" class="text" v-model="mensaje">
        </div>
+
  </div>
    </body>
+
</body>
   
+
 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
+
<script>
   
+
 
        var variable = new Vue({
+
  var variable = Vue.createApp({
            el: '#el',
+
    data: () => ({
            data: {
+
      mensaje: "resultado"
                mensaje: "resultado"
+
    })
            }
+
  }).mount("#el")
        })
+
 
   
+
</script>
    </script>
 
 
</source>
 
</source>
  
Línia 103: Línia 99:
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
        <div id="el">
+
  <div id="el">
                <h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>    <!--en vez de v-show podemos usar v-if-->
+
    <h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>    <!--en vez de v-show podemos usar v-if-->
                <h1 v-else>otra</h1>
+
    <h1 v-else>otra</h1>
                <input type="text" class="text" v-model="mensaje">
+
    <input type="text" class="text" v-model="mensaje">
        </div>
+
  </div>
    </body>
+
</body>
   
+
 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
+
<script>
   
+
 
        var variable = new Vue({
+
  var variable = Vue.createApp({
            el: '#el',
+
    data: () => ({
            data: {
+
      mensaje: "resultado"
                mensaje: "resultado"
+
    })
            }
+
  }).mount("#el")
        })
+
 
   
+
</script>
    </script>
 
 
</source>
 
</source>
 
  
 
===V-FOR===
 
===V-FOR===
Línia 130: Línia 124:
 
     <div id="el">
 
     <div id="el">
 
         <ul>
 
         <ul>
             <!-- <li v-text="profesores[0]"></li>-->
+
             <!-- <li v-text="profesores[0]"></li> -->
 
             <li v-for="profesor in profesores" v-text="profesor"></li>
 
             <li v-for="profesor in profesores" v-text="profesor"></li>
 
         </ul>
 
         </ul>
Línia 138: Línia 132:
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
     var variable = new Vue({
+
     var variable = Vue.createApp({
        el: '#el',
+
         data: () => ({
         data: {
 
 
             profesores: [      //utilizamos un array con cadenas
 
             profesores: [      //utilizamos un array con cadenas
 
                 "Julio Noguera",
 
                 "Julio Noguera",
 
                 "Albert Canela",
 
                 "Albert Canela",
 
                 "Alex Salinas"
 
                 "Alex Salinas"
 
 
             ]
 
             ]
         }
+
         })
     })
+
     }).mount("#el")
 
</script>
 
</script>
 
</source>
 
</source>
  
  
 
+
Recorriendo Objetos
  
 
<source lang="javascript">
 
<source lang="javascript">
Línia 159: Línia 151:
 
     <div id="el">
 
     <div id="el">
 
         <ul>
 
         <ul>
             <!-- <li v-text="profesores[0]"></li>-->
+
             <!-- <li v-text="profesores[0]"></li> -->
 
             <li v-for="profesor in profesores" v-text="profesor.nombre"></li>
 
             <li v-for="profesor in profesores" v-text="profesor.nombre"></li>
 
         </ul>
 
         </ul>
Línia 167: Línia 159:
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
     var variable = new Vue({
+
     var variable = Vue.createApp({
        el: '#el',
+
         data: () => ({    //utilizamos un array con objetos
         data: {    //utilizamos un array con objetos
 
 
             profesores: [   
 
             profesores: [   
 
                 {nombre:"Julio Noguera"},
 
                 {nombre:"Julio Noguera"},
Línia 176: Línia 167:
  
 
             ]
 
             ]
         }
+
         })
     })
+
     }).mount("#el")
 
</script>
 
</script>
 
</source>
 
</source>
 +
 +
Podemos especificar recorrer los objetos y mostrar o acceder a su contenido
  
 
<source lang="javascript">
 
<source lang="javascript">
    <div id="el">
+
<body>
 +
  <div id="el">
 
         <ul>
 
         <ul>
 
             <!-- <li v-text="profesores[0]"></li>-->
 
             <!-- <li v-text="profesores[0]"></li>-->
Línia 197: Línia 191:
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
     var variable = new Vue({
+
     var variable = Vue.createApp({
        el: '#el',
+
         data: () => ({
         data: {
 
 
             profesores: [{
 
             profesores: [{
 
                     nombre: "Julio Noguera",
 
                     nombre: "Julio Noguera",
Línia 214: Línia 207:
  
 
             ]
 
             ]
         }
+
         })
     })
+
     }).mount("#el")
 
</script>
 
</script>
  
 
//en Consola del navegador->
 
//en Consola del navegador->
 
// variable.profesores[0].nombre ="Pepe"
 
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas,"activo:true"})
+
// variable.profesores.push({nombre:"Joan Comas",activo:true})
 
</source>
 
</source>
  
EVENTOS y FUNCIONES
+
===EVENTOS y FUNCIONES ===
 +
 
 +
===CLICK===
 +
 
 +
Tenemos los datos mensajes y el array de profesores, también el método invertir que se ejecutará cuando se haga click en botón, también es interesante que para acceder a los datos se utiliza this.
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<body>
 
<body>
 
     <div id="el">
 
     <div id="el">
 
 
         <input type="text" v-model="mensaje">
 
         <input type="text" v-model="mensaje">
 
         <h1 v-text="mensaje"></h1>
 
         <h1 v-text="mensaje"></h1>
         <!-- <button @click="mensaje=mensaje.split('').reverse('').join('')">BOTON</button> <!-- @click es abreviación de v-on:click -->
+
         <!-- <button @click="mensaje=mensaje.split('').reverse('').join('')">BOTON</button> -->
 +
        <!-- @click es abreviación de v-on:click -->
 +
        <button @click="invertir">INVERTIR</button>
 +
    </div>
 +
</body>
 +
 
 +
<script>
 +
    var variable = Vue.createApp({
 +
        data: () => ({
 +
            mensaje: "",
 +
        }),
 +
        methods: {
 +
            invertir() {
 +
                this.mensaje = this.mensaje.split('').reverse().join('');
 +
            }
 +
        }
 +
    }).mount("#el");
 +
</script>
 +
</source>
  
         <button @click="invertir">INVERTIR</button>
+
Mostrar lista asociando evento click
 +
<source lang="javascript">
 +
<style>
 +
.false{background:blue}
 +
.true{background: green}
 +
</style>
 +
<body>
 +
    <div class="container">
 +
         <div id="el">
 +
            <ul>
 +
                <li v-for="profe in profesores">
 +
                    <span v-text="profe.nombre"></span>
 +
                    <span @click="profe.activo=false" v-if="profe.activo" class="false">X</span>
 +
                    <span @click="profe.activo=true" v-else class="true">X</span>
  
 +
                </li>
 +
            </ul>
 +
            <pre>{{$data}}</pre>
 +
        </div>
 
     </div>
 
     </div>
 
</body>
 
</body>
Línia 240: Línia 272:
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
     var variable = new Vue({
+
     var variable = Vue.createApp({
        el: '#el',
+
         data: () => ({
         data: {
 
 
 
            mensaje: " ",
 
 
 
 
             profesores: [{
 
             profesores: [{
 
                     nombre: "Julio Noguera",
 
                     nombre: "Julio Noguera",
Línia 260: Línia 288:
  
 
             ]
 
             ]
         },
+
 
        methods: {
+
         })
            invertir: function () {
+
    }).mount("#el");
                this.mensaje = this.mensaje.split('').reverse('').join('');
 
            }
 
        }
 
    })
 
 
</script>
 
</script>
 
</source>
 
</source>
  
BOTÓN- AÑADIR LISTA
+
 
 +
'''BOTÓN- AÑADIR LISTA'''
 +
 
 +
===KEYUP===
 +
 
 +
Eventos de teclado
 +
 
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
 
     <div id="el">
 
     <div id="el">
 
 
 
         <ul>
 
         <ul>
            <!-- <li v-text="profesores[0]"></li>-->
 
 
             <li v-for="profesor in profesores">
 
             <li v-for="profesor in profesores">
 
                 <span v-text="profesor.nombre"></span>
 
                 <span v-text="profesor.nombre"></span>
Línia 283: Línia 310:
 
                 <small v-else>-NO está</small>
 
                 <small v-else>-NO está</small>
 
             </li>
 
             </li>
 +
          <input v-on:keyup.enter="anadir" type="text" v-model="profe" >
  
            <input v-on:keyup.13="anadir" type="text" v-model="profe" >  //el 13 es enter en ascii
+
            <!-- <input @keyup.enter="anadir" type="text" v-model="profe" > -->
            <!-- <input v-on:keyup.enter="anadir" type="text" v-model="profe" >  -->
 
          <!-- <input type="text" v-model="profe"> -->
 
          <!-- <button @click="anadir">+ añadir</button>-->
 
 
         </ul>
 
         </ul>
 
     </div>
 
     </div>
 +
 +
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
    <script>
 +
        var variable = Vue.createApp({
 +
            data:() => ({
 +
              profe: "",
 +
                profesores: [
 +
                  { nombre: "Julio Noguera", activo: true },
 +
                  { nombre: "Albert Canela", activo: true },
 +
                  { nombre: "Alex Salinas", activo: false }
 +
                ]
 +
            }),
 +
            methods: {
 +
                anadir() {
 +
                    this.profesores.push({
 +
                        nombre: this.profe,
 +
                        activo: false
 +
                    });
 +
                    this.profe = ""; // Restableix el valor de profe a una cadena buida després d'afegir-lo
 +
                }
 +
            }
 +
        }).mount("#el");
 +
    </script>
 
</body>
 
</body>
 +
</source>
  
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
=== DIRECTIVA V-BIND===
<script>
+
 
    var variable = new Vue({
+
'''PARA ACTIVAR CLASES'''
        el: '#el',
 
        data: {
 
  
            profe: "",
+
<source lang="javascript">
 +
<style>
 +
    .rojo {
 +
        background: red;
 +
    }
  
            profesores: [{
+
    .verde {
                    nombre: "Julio Noguera",
+
        background: green;
                    activo: true
+
    }
                },
+
    .glyphicon{
                {
+
        color: white;
                    nombre: "Albert Canela",
+
    }
                    activo: true
+
</style>
                },
+
<body>
                {
 
                    nombre: "Alex Salinas",
 
                    activo: false
 
                }
 
  
             ]
+
      <div id="el">
        },
+
          <ul>
        methods: {
+
            <!--//en el caso de querer añadir varias clases-->
             anadir: function () {
+
             <!-- v-bind:class="['glyphicon',tarea.completo ? 'verde': 'rojo']" -->
 +
              <li v-for="tarea in tareas">
 +
                  <span v-bind:class="{ 
 +
                              'rojo': !tarea.completo,
 +
                              'verde': tarea.completo
 +
                                }" v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
 +
                  <input type="checkbox"  v-model="tarea.completo">
 +
              </li>
 +
          </ul>
 +
          <pre>
 +
             {{$data}}
 +
          </pre>
 +
      </div>
  
                this.profesores.push({
+
</body>
                    nombre: this.profe,
 
                    activo: false
 
                });
 
  
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script>
 +
  var variable = Vue.createApp({
 +
      data: () => ({
 +
          tareas: [
 +
            {
 +
                nombre: "Estudiar",
 +
                completo: true
 +
            },
 +
            {
 +
                nombre: "Repasar",
 +
                completo: true
 +
            },
 +
            {
 +
                nombre: "Examinar",
 +
                completo: false
 
             }
 
             }
        }
+
          ]
    })
+
      })
 +
  }).mount("#el");
 
</script>
 
</script>
 
</source>
 
</source>
Línia 331: Línia 404:
  
  
 +
'''INCREMENTAR'''
 +
 +
Como se puede ver, se produce un incremento de voto modificando su atributo directamente.
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
 
     <div class="container">
 
     <div class="container">
         <div id="elemento">
+
        <h1>veamos</h1>
 +
         <div>
 
             <ul>
 
             <ul>
                 <li v-for="profe in profesores">
+
                 <li v-for="storie in stories">
                     <span v-text="profe.nombre"></span>
+
                     <button  @click="storie.votos++">Vote {{storie.politico}}</button>
                     <span @click="profe.activo=false" v-if="profe.activo" class="glyphicon glyphicon-check"></span>
+
                     <!-- <button  @click="incrementVote(storie)">Vote {{storie.politico}}</button> -->
                     <span @click="profe.activo=true" v-else class="glyphicon glyphicon-unchecked"></span>
+
                     <pre v-text="storie.votos"></pre>
 
 
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
            <pre>
+
        </div>
                    {{$data}}
+
        <pre>{{$data}}</pre>
            </pre>
+
    </div>
 +
</body>
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script type="text/javascript">
 +
  const app = Vue.createApp({
 +
    data() {
 +
      return {
 +
        stories: [
 +
          { politico: "julio", votos: 1 },
 +
          { politico: "paco", votos: 2 },
 +
          { politico: "raúl", votos: 3 },
 +
          { politico: "jorge", votos: 4 }
 +
        ]
 +
      };
 +
    },
 +
    methods: {
 +
      incrementVote(storie) {
 +
        storie.votos++;
 +
      }
 +
    }
 +
  }).mount(".container");
  
 +
</script>
 +
</source>
  
        </div>
+
=== FILTRAR ===
 +
<source lang="javascript">
 +
<div id="aplicacion">
 +
    <input type="range" v-model="minimo" min="0" max="50"> 
 +
    <div v-text="minimo"></div>
 +
 
 +
 
 +
    <div v-for="dato in filtrar">
 +
      <div v-text="dato.descripcion"></div>
 +
    </div>
 +
 
 +
    <input type="search" v-model="campo">
 +
 
 +
    <div v-for="dato in busqueda">
 +
      <div v-text="dato.descripcion"></div>
 
     </div>
 
     </div>
</body>
 
  
 +
  </div>
 +
 +
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
  <script>
 +
    var app = Vue.createApp({
 +
      data:() => ({
 +
 +
        minimo: "5",
 +
 +
        campo: "",
 +
 +
        datos: [{
 +
          codigo: 1,
 +
          descripcion: 'papas',
 +
          precio: 12.52
 +
        }, {
 +
          codigo: 2,
 +
          descripcion: 'naranjas',
 +
          precio: 21
 +
        }, {
 +
          codigo: 3,
 +
          descripcion: 'peras',
 +
          precio: 18.20
 +
        }]
 +
      }),
 +
      computed: {
 +
        filtrar() {
 +
          return this.datos.filter((dato) => dato.precio > this.minimo);
 +
        },
 +
        busqueda() {
 +
          return this.datos.filter((dato) => dato.descripcion.includes(this.campo));
 +
        }
 +
 +
      }
 +
    }).mount("#aplicacion")
 +
 +
  </script>
 +
</source>
 +
 +
==Componentes==
 +
 +
1. Crear una nueva instancia de Vue con Vue.createApp
 +
 +
2. Existen 3 Objetos básicos y fundamentales que estarán en la mayoria de las aplicaciones web: el data y methods.
 +
 +
3. Se debe crear un contenedor con un id igual al del objeto el para establecer el alcance del framework
 +
 +
 +
Crear Nuestro primer Componente Básico
 +
 +
<source lang="javascript">
 +
<body>
 +
  <div id="aplicacion">
 +
    <!-- vue está disponible en todo este div-->
 +
    <hola-mundo></hola-mundo>
 +
  </div>
 +
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
 
<script>
 
<script>
    var variable = new Vue({
+
        el: '#elemento',
 
        data: {
 
  
            profe: "",
+
//nueva instacia de Vue : Vue.createApp
 
+
  var app= Vue.createApp({
            profesores: [{
+
    data:() => ({ //capa de datos
                    nombre: "Julio Noguera",
 
                    activo: true
 
                },
 
                {
 
                    nombre: "Albert Canela",
 
                    activo: true
 
                },
 
                {
 
                    nombre: "Alex Salinas",
 
                    activo: false
 
                }
 
  
            ]
+
    }),
 +
    methods:
 +
    {
  
        }
+
    }
 
     })
 
     })
 +
   
 +
    app.component('hola-mundo', {    //debe coincidir con el nombre del componente(etiqueta html)
 +
    template: `<p>
 +
                Hola mundo
 +
              </p>`
 +
  });
 +
   
 +
    app.mount('#aplicacion')  // el elemento donde se aplicará Vue, en este caso un div con id = main);
 
</script>
 
</script>
 
</source>
 
</source>
DIRECTIVA COMPUTED.
 
  
DIRECTIVA V-BIND -> PARA ACTIVAR CLASES
+
 
 +
 
 +
 
 +
'''PROPS'''
 +
 
 +
Props sirve para interpolar o pasar los valores que hayan dentro del atributo la etiqueta html (inglés, castellano) al objeto component
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
     <div class="container">
+
  <div id="aplicacion">
        <div id="elemento">
+
     <hola-mundo idioma="ingles"></hola-mundo>
            <ul>
+
    <hola-mundo idioma="castellano"></hola-mundo>
 +
  </div>
 +
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script>
 +
 
 +
  var app= Vue.createApp({
 +
  })
 +
 
 +
  app.component('hola-mundo', {
 +
    props: ['idioma'],
 +
    template: `<div>
 +
                  <p v-if="idioma=='castellano'">Hola mundo</p>
 +
                  <p v-if="idioma=='ingles'">Hello world</p>
 +
              </div>`
 +
  })
 +
 
 +
  app.mount("#aplicacion")
 +
</script>
 +
 
 +
</body>
 +
</source>
 +
 
 +
Otro Componente Básico
 +
 
 +
<source lang="javascript">
 +
<body>
 +
 +
<div id="app">
 +
<ejemplo nombre="Juan" apellido="Perez"></ejemplo>
 +
<ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo>  
 +
</div>
 +
 
 +
 
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script>
 +
 
 +
  var app= Vue.createApp({
 +
  })
 +
 
 +
 
 +
  app.component('ejemplo', {
 +
  props: ['nombre', 'apellido'],
 +
  template: '<p> Hola {{nombre}} {{apellido}} </p>'
 +
  });
  
<!--v-bind:class="['glyphicon',tarea.completo ? 'glyphicon-check': 'glyphicon-unchecked']" //en el caso de querer añadir varias clases-->
+
  app.mount("#app")
 +
</script>
  
                <li v-for="tarea in tareas">
 
                    <span v-text="tarea.nombre" @click="tarea.completo=!tarea.completo"    // cambia de true a false y viceversa
 
                    v-bind:class="{  //activas la clases
 
                                'glyphicon': true, 
 
                                'glyphicon-check':tarea.completo,
 
                                'glyphicon-unchecked': ! tarea.completo
 
                                  }"></span>
 
                </li>
 
            </ul>
 
            <pre>
 
                    {{$data}}
 
               
 
            </pre>
 
        </div>
 
    </div>
 
 
</body>
 
</body>
 +
</source>
 +
 +
Ejemplo de Componente, podemos ver que pasamos una peliculas "peliculon 1917" y una imagen en la etiqueta peliculas, que serán los valores que recibirá el componente para luego incluirlo en la plantilla.
 +
<source lang="javascript">
 +
<body>
 +
  <div class="container">
 +
    <peliculas titulo="peliculon 1917"
 +
      imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
 +
  </div>
 +
  
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
+
<script type="text/javascript">
    var variable = new Vue({
+
 
        el: '#elemento',
+
 
        data: {
+
  var app = Vue.createApp({
 +
 
 +
  })
 +
 
 +
  app.component('peliculas', {
 +
 
 +
    props: ['imagen', 'titulo'],  //los props reciben los datos externos del html en este caso será "peliculon 1917" y la ruta de la imagen
 +
    template:
 +
      `<div>
 +
      <img width="100px" v-bind:src="imagen" :alt="titulo"/>  <!-- v-bind:alt se reduce en :alt , al ser un atributo no se puede usar {{}} sino v-bind-->
 +
      <h2> {{titulo}} </h2>
 +
      </div>`
 +
  });
 +
 
 +
  app.mount(".container")
 +
 
 +
</script>
 +
</body>
 +
</source>
 +
 
 +
 
 +
Este ejemplo, viene a basarse en el ejemplo anterior pero además coje datos del JSON data y los va mostrando
 +
 
 +
<source lang="javascript">
 +
<body>
 +
  <div class="container">
 +
    <div v-for="(dato, index) in datos">  <!-- Corregido -->
 +
      <peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
 +
      </peliculas>
 +
    </div>
 +
  </div>
 +
 
 +
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  
            tareas: [{
+
  <script type="text/javascript">
                nombre: "Estudiar",
+
var app = Vue.createApp({
                completo: true
+
      data: () => ({
 +
          datos: [{
 +
              titulo: "star wars",
 +
              imagen: "https://vignette.wikia.nocookie.net/cine/images/8/88/Sw1.jpg/revision/latest?cb=20120930202439 "
 
             },
 
             },
 
             {
 
             {
                nombre: "Repasar",
+
              titulo: "Sonic",
                completo: true
+
              imagen: "https://www.smashbros.com/wiiu-3ds/images/character/sonic/main.png"
 
             },
 
             },
 
             {
 
             {
                nombre: "Examinar",
+
              titulo: "Mario bros",
                completo: false
+
              imagen: "https://imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png"
 
             }
 
             }
 +
          ]
  
            ]
+
        })
 +
    })
 +
 
 +
    app.component('peliculas', {
 +
    props: ['titulo', 'imagen'],
 +
      template: `<div>
 +
        <img width="100px" :src="imagen" :alt="titulo"/>
 +
        <h2>{{ titulo }}</h2>
 +
      </div>`
 +
    });
 +
   
 +
app.mount(".container")
 +
 
 +
  </script>
 +
</body>
 +
 
 +
</source>
 +
 
 +
 
 +
'''Componentes: definición de métodos y modelo de datos'''
 +
 
 +
 
 +
 
 +
<source lang="javascript">
 +
<body>
 +
  <div id="el" class="container">
 +
    <h1> Helados </h1>
 +
    <h2> Lista </h2>
 +
    <ul>
 +
      <li v-for="item in helados" :key="item.sabor">
 +
        <component-helado v-bind:helado="item"></component-helado>
 +
      </li>
 +
    </ul>
 +
    <h2> Seleccionados </h2>
 +
    <ul>
 +
      <li v-for="item in heladosSeleccionados" :key="item.sabor"> {{ item.sabor }} </li>
 +
    </ul>
 +
  </div>
 +
</body>
  
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script type="text/javascript">
 +
    var app = Vue.createApp({
 +
      data: () => ({
 +
        helados: [{
 +
            sabor: 'Chocolate',
 +
            seleccionado: false
 +
          },
 +
          {
 +
            sabor: 'Dulce de leche',
 +
            seleccionado: false
 +
          },
 +
          {
 +
            sabor: 'Frutilla',
 +
            seleccionado: false
 +
          },
 +
          {
 +
            sabor: 'Limón',
 +
            seleccionado: false
 +
          },
 +
          {
 +
            sabor: 'Vainilla',
 +
            seleccionado: false
 +
          }
 +
        ]
 +
      }),
 +
      computed: {
 +
        heladosSeleccionados() {
 +
          return this.helados.filter(helado => helado.seleccionado);
 
         }
 
         }
     })
+
      }
 +
    });
 +
 
 +
    app.component('component-helado', {
 +
      props: ['helado'],
 +
      template: `
 +
        <div>
 +
          <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button>
 +
          <button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button>
 +
          <span> {{ helado.sabor }} </span>
 +
          <hr/> 
 +
        </div>  `,
 +
      methods: {
 +
        agregar(helado) {
 +
          helado.seleccionado = true;
 +
        },
 +
        eliminar(helado) {
 +
          helado.seleccionado = false;
 +
        }
 +
      }
 +
     });
 +
 
 +
    app.mount('#el');
 
</script>
 
</script>
 
</source>
 
</source>
 +
 +
== Ejercicios ==
 +
 +
'''v-if, v-else, v-else-if, v-show'''
 +
 +
Crear dos inputs de tipo password y mostrar un mensaje en caso de que sean iguales
 +
 +
'''solución:'''
  
 
<source lang="javascript">
 
<source lang="javascript">
<div class="container">
+
<body>
<h1>Lets hear some stories!</h1>
+
  <div id="aplicacion">
<div>
+
    <p>Ingrese la clave:
<h3>Alex's stories</h3>
+
      <input type="password" v-model="clave1">
<ul class="list-group">
+
    </p>
<li v-for="story in stories | filterBy 'Alex' in 'writer'"
+
    <p>Repita la clave:
class="list-group-item"
+
      <input type="password" v-model="clave2">
>
+
    </p>
{{ story.writer }} said "{{ story.plot }}"
+
    <p v-if="clave1===clave2">Las claves son iguales.</p>
</li>
+
    <p v-else>Las claves son distintas.</p>
</ul>
+
  </div>
<h3>John's stories</h3>
 
<ul class="list-group">
 
<li v-for="story in stories | filterBy 'John' in 'writer'"
 
class="list-group-item"
 
>
 
{{ story.writer }} said "{{ story.plot }}"
 
</li>
 
</ul>
 
<div class="form-group">
 
<label for="query">
 
What are you looking for?
 
</label>
 
<input v-model="query" class="form-control">
 
</div>
 
<h3>Search results:</h3>
 
<ul class="list-group">
 
<li v-for="story in stories | filterBy query in 'plot'"
 
class="list-group-item"
 
>
 
{{ story.writer }} said "{{ story.plot }}"
 
</li>
 
</ul>
 
</div>
 
</div>
 
  
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
  <script>
 +
    var app = Vue.createApp({
 +
      data:() => ({
 +
        clave1 : '',
 +
        clave2 : ''
 +
      })
 +
    }).mount("#aplicacion")
 +
  </script>
 +
</body>
 
</source>
 
</source>
  
  
 +
'''v-for'''
  
 +
Crear un array en data con los días de la semana y generar una tabla de 1 columna y 7 filas en HTML
  
 +
'''solución:'''
  
 +
<source lang="javascript">
 +
<body>
 +
  <div id="aplicacion">
 +
    <table border="1">
 +
      <template v-for="dia in dias">
 +
        <tr><td>{{dia}}</td></tr>
 +
      </template>
 +
    </table>
 +
  </div>
  
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
  <script>
 +
    var app= Vue.createApp({
 +
      data:() => ({
 +
        dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
 +
      })
 +
    }).mount("#aplicacion")
 +
  </script>
 +
</body>
 +
</source>
  
  
 +
'''v-for con array de objetos literales'''
  
 +
Definir un array con objetos que almacenan los nombres y edades de 6 personas. Mostrar en una lista ordenada el nombre de cada persona y entre paréntesis si es mayor o no de edad.
  
 +
<source lang="javascript">
 +
personas: [{
 +
                    nombre: 'Julio',
 +
                    edad: 32
 +
                  },{
 +
                    nombre: 'Albert',
 +
                    edad: 50
 +
                  },{
 +
                    nombre: 'Alex',
 +
                    edad: 35
 +
                  },{
 +
                    nombre: 'Ramón',
 +
                    edad: 50
 +
                  }]
 +
</source>
  
 +
'''solución:'''
  
 
<source lang="javascript">
 
<source lang="javascript">
  
 
<body>
 
<body>
    <div class="container">
+
  <div id="aplicacion">
        <h1>veamos</h1>
+
    <ul>
         <div>
+
      <template v-for="persona in personas">
            <ul>
+
         <li>
              <!--  <li v-for="storie in stories"><button  @click="storie.votos++">Vote</button><pre v-text="storie.votos"></pre></li>-->
+
          {{persona.nombre}}
                <li v-for="storie in stories"><button  @click="incrementar()">Vote</button><pre v-text="storie.votos"></pre></li>
+
          <span v-if="persona.edad>=18">(Mayor)</span>
            </ul>
+
          <span v-else>(Menor)</span>
         </div>
+
        </li>
        <pre>
+
      </template>
{{$data | json}}
+
    </ul>
</pre>
+
  </div>
     </div>
+
 
 +
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>  
 +
  <script>
 +
    var app= Vue.createApp({
 +
      data:() => ({
 +
         personas: [{
 +
                    nombre: 'Jose',
 +
                    edad: 12
 +
                  },{
 +
                    nombre: 'Ana',
 +
                    edad: 43
 +
                  },{
 +
                    nombre: 'Pedro',
 +
                    edad: 4
 +
                  },{
 +
                    nombre: 'María',
 +
                    edad: 12
 +
                  }]
 +
 
 +
      })
 +
     }).mount("#aplicacion")
 +
  </script>
 
</body>
 
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
 
<script type="text/javascript">
 
    new Vue({
 
        el: '.container',
 
        data: {
 
            stories: [{
 
                    politico: "julio",
 
                    votos: 1
 
                },
 
                {
 
                    politico: "paco",
 
                    votos: 2
 
                },
 
                {
 
                    politico: "raúl",
 
                    votos: 3
 
                },
 
                {
 
                    politico: "jorge",
 
                    votos: 4
 
                },
 
            ]
 
        }       
 
    })
 
 
</source>
 
</source>
  
 +
<!--
 +
===Ejercicios===
 +
 +
Se desea mostrar una lista de profesores, donde se pueda insertar un nuevo profesor e incrementar la edad de cada uno de ellos. Cada profesor nuevo empezará con 0 años.
  
Ejercicio Incrementar edad y añadir nuevo profe
+
'''Solución''':
  
 
<source lang="js">
 
<source lang="js">
 
     <div id="el">  
 
     <div id="el">  
 
         <div v-for="profesor in profesores" >
 
         <div v-for="profesor in profesores" >
             <div v-text="profesor.nombre" ></div> <div v-text="profesor.edad"></div><span @click="incrementar(profesor)">+</span>
+
             <div v-text="profesor.nombre" ></div> <div v-text="profesor.edad"></div>
 +
            <button @click="incrementar(profesor)">+</span>
 
         </div>
 
         </div>
         <input type="text" v-model="profesor" @click="anadir">
+
         <input type="text" v-model="profesor"><button @click="anadir">Añadir</button>
 
         <br>
 
         <br>
 
         {{$data}}
 
         {{$data}}
Línia 541: Línia 912:
 
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
    Vue.config.devtools = true
+
     var variable = Vue.createApp({
     var variable = new Vue({
+
         data: () => ({
        el: '#el',
 
         data: {
 
  
 
             profesor: " ",
 
             profesor: " ",
Línia 562: Línia 931:
  
 
             ]
 
             ]
         },
+
         }),
 
         methods: {
 
         methods: {
 
             anadir: function(){
 
             anadir: function(){
Línia 572: Línia 941:
 
             }
 
             }
 
         }
 
         }
     });
+
     }).mount("#el");
 
     </script>
 
     </script>
 
</source>
 
</source>
hacer calculadora
 
  
hacer CRUD
+
 
<source lang="js">
+
 
 +
 
 +
'''Eventos :click'''
 +
 
 +
Crear dos inputs de tipo input(number) y un botón. Cuando se presione dicho botón mostrar la suma de los valores ingresados (usar método)
 +
 
 +
'''solución:'''
 +
 
 +
<source lang="javascript">
 +
<body>
 +
  <div id="aplicacion">
 +
    <p>Ingrese primer valor:
 +
      <input type="number" v-model="valor1">
 +
    </p>
 +
    <p>Ingrese segundo valor:
 +
      <input type="number" v-model="valor2">
 +
    </p>
 +
    <p>Ingrese primer valor:
 +
      <button v-on:click="sumarValores">Sumar</button>
 +
    </p>
 +
    <p>El resultado de la suma es igual a {{suma}}</p>
 +
  </div>
 +
 
 +
  <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 +
  <script>
 +
    var app= Vue.createApp({
 +
      data: () => ({
 +
        valor1: 0,
 +
        valor2: 0,
 +
        suma: ''
 +
      }),
 +
      methods: {
 +
        sumarValores: function() {
 +
          this.suma = parseInt(this.valor1) + parseInt(this.valor2);
 +
        }
 +
      }     
 +
    }).mount("#aplicacion")
 +
  </script>
 +
</source>
 +
 
 +
===Ejercicio===
 +
-->
 +
 
 +
'''methods'''
 +
 
 +
Se desea mostrar una lista de tareas, se pide que se pueda eliminar el item seleccionado.
 +
 
 +
'''Solución''':
 +
 
 +
<source lang="javascript">
 
<body>
 
<body>
 
     <div id="el">  
 
     <div id="el">  
         <div v-for="tarea in tareas" >
+
         <div v-for="tarea in tareas" >    <div v-for="(item, index) in tareas" >  
 
             <div v-text="tarea" ></div> <span @click="eliminar(tarea)">X</span>
 
             <div v-text="tarea" ></div> <span @click="eliminar(tarea)">X</span>
 
         </div>
 
         </div>
         <input type="text" v-model="tarea"><span @click="anadir">+</span>
+
         <input type="text" v-model="tarea">
 +
        <button @click="anadir">+</button>
 +
       
 
         <br>
 
         <br>
 
         {{$data}}
 
         {{$data}}
Línia 591: Línia 1.010:
  
 
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
+
    <script>
    Vue.config.devtools = true
+
        var variable = Vue.createApp({
    var variable = new Vue({
+
            data() {
         el: '#el',
+
                return {
        data: {
+
                    tarea: "",
 +
                    tareas: []
 +
                }
 +
            },
 +
            methods: {
 +
                anadir() {
 +
                    this.tareas.push(this.tarea);
 +
                    console.log(this.tareas);
 +
                },
 +
                eliminar(tarea) {
 +
                    let index = this.tareas.indexOf(tarea);
 +
                    if (index !== -1) {
 +
                        this.tareas.splice(index, 1);
 +
                    }
 +
                }
 +
            }
 +
         }).mount('#el');
 +
    </script>
 +
</body>
 +
 
 +
</html>
 +
</source>
 +
 
 +
 
 +
'''Eventos: v-on:keypress, v-on:keyup'''
 +
 
 +
Tenemos un input de tipo text que introducimos un texto, a medida que vayamos escribiendo texto deberá ir mostrando la cantidad de 'a' y 'A' que hay
  
            tarea: "",
+
<!--
 +
'''solución:'''
  
            tareas: []
+
<source lang="javascript">
         },
+
<body>
 +
    <div id="aplicacion">
 +
      <p>Ingrese una frase:
 +
        <input v-model="frase" v-on:keyup="contabilizarLetrasA" type="text" size="80">
 +
      </p>
 +
      <p>Cantidad de letras 'a o 'A'':{{cantidadLetrasa}}</p>
 +
    </div>
 +
 
 +
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
    <script>
 +
      var app = Vue.createApp({
 +
        data:() => ({
 +
          cantidadLetrasa: 0,
 +
          frase: ''
 +
         }),
 
         methods: {
 
         methods: {
            anadir: function(){
+
          contabilizarLetrasA: function() {
                this.tareas.push(this.tarea);
+
            var cant=0;
                console.log(this.tareas);
+
            for(var f=0; f<this.frase.length; f++)
            },
+
              if (this.frase[f]=='a' || this.frase[f]=='A')
            eliminar: function(tarea){
+
                cant++;
                let x=this.tareas.indexOf(tarea);
+
            this.cantidadLetrasa=cant;
                this.tareas.splice(x, 1);
+
          }
            }
 
           
 
 
         }
 
         }
    });
+
      }).mount('#aplicacion');
 
     </script>
 
     </script>
 +
  </source>
 +
 +
 +
'''bind (enlace) a clases CSS'''
 +
 +
Se tiene la siguiente declaración de lenguajes de programación:
 +
 +
<source lang="javascript">
 +
data:{
 +
        lenguajes: [
 +
          {
 +
            nombre: 'C',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Java',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'PHP',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Python',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Ruby',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Kotlin',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'C#',
 +
            tachado:false
 +
          }]       
 +
      },
 +
</source>
 +
Cuando se hace clic sobre una de las opciones tachar dicho lenguaje agregando una clase en forma dinámica:
 +
 +
<source lang="css">
 +
  .tachar {
 +
      text-decoration: line-through;
 +
      color: blue;
 +
    }
 +
</source>
 +
 +
'''solución:'''
 +
 +
<source lang="javascript">
 +
<body>
 +
  <style>
 +
    .tachar {
 +
      text-decoration: line-through;
 +
      color: blue;
 +
    }
 +
  </style>
 +
  <div id="aplicacion">
 +
    <ul style="font-size:2rem; list-style:none">
 +
      <li v-for="lenguaje in lenguajes"
 +
          @click="presion(lenguaje)"
 +
          v-bind:class="{tachar: lenguaje.tachado }">
 +
        {{lenguaje.nombre}}
 +
      </li>
 +
    </ul>
 +
  </div>
 +
 +
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
  <script>
 +
var app= Vue.createApp({
 +
      data: () => ({
 +
        lenguajes: [
 +
          {
 +
            nombre: 'C',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Java',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'PHP',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Python',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Ruby',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'Kotlin',
 +
            tachado:false
 +
          },
 +
          {
 +
            nombre: 'C#',
 +
            tachado:false
 +
          }]       
 +
      }),
 +
      methods: {
 +
        presion: function(lenguaje) {
 +
          lenguaje.tachado= !lenguaje.tachado;
 +
        }
 +
      }
 +
    }).mount('#aplicacion');
 +
  </script>
 
</body>
 
</body>
 +
</source>
 +
-->
  
</html>
+
'''Componentes en Vue'''
</source>
 
  
https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s
+
Crear una componente llamada 'acerca-de' que muestre el nombre del programa y la versión del mismo.
  
==Componentes==
+
<!--
 +
'''Solución:'''
  
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
 
   <div id="aplicacion">
 
   <div id="aplicacion">
     <hola-mundo></hola-mundo>
+
     <acerca-de></acerca-de>
 
   </div>
 
   </div>
 
   
 
   
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script>
  
<script>
+
  var app = Vue.createApp({
   Vue.component('hola-mundo', {   //debe coincidir con el nombre del componente(etiqueta html)
+
  })
     template: `<p>
+
 
                Hola mundo
+
   app.component('acerca-de', {
              </p>`
+
    data: () => ({
   });
+
      navigator: navigator.appCodeName || 'Unknown',
 +
      version: navigator.appVersion
 +
    }),
 +
     template: `<div><p>Programa: {{navigator}}</p>
 +
                    <p>Versión: {{version}}</p></div> `
 +
   })
  
   var app=new Vue({
+
   app.mount('#aplicacion')
    el: '#aplicacion'
 
  });
 
 
</script>
 
</script>
 +
 
</body>
 
</body>
 
</source>
 
</source>
  
 +
 +
'''Componentes: propiedades'''
 +
 +
Modificar el ejemplo de la componente 'hola-mundo' de tal forma que se pueda seleccionar el idioma que se debe mostrar utilizando un control de formulario 'select'
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
 
   <div id="aplicacion">
 
   <div id="aplicacion">
     <hola-mundo idioma="ingles"></hola-mundo>
+
     <p><select v-model="idioma">
     <hola-mundo idioma="castellano"></hola-mundo>
+
      <option>castellano</option>
 +
      <option>ingles</option>
 +
    </select></p>  
 +
     <hola-mundo v-bind:idioma="idioma"></hola-mundo>
 
   </div>
 
   </div>
 
   
 
   
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
   Vue.component('hola-mundo', {
+
 
 +
 
 +
   var app = Vue.createApp({
 +
    data: () => ({
 +
      idioma: 'castellano'
 +
    })
 +
  })
 +
 
 +
  app.component('hola-mundo', {
 
     props: ['idioma'],
 
     props: ['idioma'],
 
     template: `<div>
 
     template: `<div>
Línia 662: Línia 1.252:
 
   })
 
   })
  
   var app=new Vue({
+
   app.mount('#aplicacion');
    el: '#aplicacion'
 
  })
 
 
</script>
 
</script>
  
Línia 670: Línia 1.258:
 
</source>
 
</source>
  
'''FILTRAR'''
 
<source lang="javascript">
 
<div id="aplicacion">
 
    <input type="range" v-model="minimo" min="0" max="50"> 
 
    <div v-text="minimo"></div>
 
  
 +
'''Componentes: propiedades de tipo objeto y vector'''
  
    <div v-for="dato in filtrar">
+
Crear una componente llamada 'articulos' que tenga una propiedad que reciba un vector de objetos literales. El objetivo de la componente es mostrar los datos del vector de articulos en una tabla HTML
      <div v-text="dato.descripcion"></div>
 
    </div>
 
  
    <input type="search" v-model="campo">
+
'''Solución'''
  
    <div v-for="dato in busqueda">
 
      <div v-text="dato.descripcion"></div>
 
    </div>
 
  
 +
<source lang="javascript">
 +
<body>
 +
  <div id="aplicacion">
 +
    <articulos v-bind:datos="datos"></articulos>
 
   </div>
 
   </div>
 
+
 
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
+
<script>
    Vue.config.devtools = true;
+
 
    var app = new Vue({
+
  var app= Vue.createApp({
      el: '#aplicacion',
+
    data: () => ({
      data: {
+
      datos: [{
 
+
           codigo: 1,  
        minimo: "5",
 
 
 
        campo: "",
 
 
 
        datos: [{
 
           codigo: 1,
 
 
           descripcion: 'papas',
 
           descripcion: 'papas',
 
           precio: 12.52
 
           precio: 12.52
         }, {
+
         },{
           codigo: 2,
+
           codigo: 2,  
 
           descripcion: 'naranjas',
 
           descripcion: 'naranjas',
 
           precio: 21
 
           precio: 21
         }, {
+
         },{
           codigo: 3,
+
           codigo: 3,  
 
           descripcion: 'peras',
 
           descripcion: 'peras',
 
           precio: 18.20
 
           precio: 18.20
         }]
+
         }]    
      },
+
    })
      computed: {
+
  })
        filtrar() {
+
 
          return this.datos.filter((dato) => dato.precio > this.minimo);
+
  app.component('articulos', {
        },
+
    props:['datos'],
        busqueda() {
+
    template: `<div>
          return this.datos.filter((dato) => dato.descripcion.includes(this.campo));
+
                <table border="1">
        }
+
                <tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
 +
                <tr v-for="art in datos"><td>{{art.codigo}}</td><td>{{art.descripcion}}</td><td>{{art.precio}}</td></tr>
 +
                </table>
 +
              </div>`
 +
  })
 +
 
 +
 
 +
  app.mount('#aplicacion');
 +
</script>
  
      }
+
</body>
    })
 
  </script>
 
 
</source>
 
</source>
  
  
 +
'''Componentes: definición de métodos y modelo de datos'''
 +
 +
Crear una componente que contenga un botón que en su interior tenga el valor 0. Cada vez que se lo presione se debe incrementar en 1.
 +
 +
'''Solución:'''
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
<body>
 +
  <div id="aplicacion">
 +
    <contador></contador>
 +
  </div>
 +
 +
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 +
<script>
 +
 
 +
 +
  var app= Vue.createApp({
 +
  })
 +
 +
  app.component('contador', {
 +
    template:`<div><button v-on:click="incrementar()">
 +
              {{cantidad}}
 +
              </button></div>`,
 +
    data: () => ({
 +
      cantidad: 0
 +
    }),
 +
    methods: {
 +
      incrementar: function() {
 +
        this.cantidad++;
 +
      }
 +
    }
 +
  });
  
 +
  app.mount('#aplicacion');
 +
 +
 +
</script>
 +
</body>
 
</source>
 
</source>
 +
 +
-->
 +
 +
https://www.tutorialesprogramacionya.com/vueya/
 +
 +
https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s

Revisió de 19:34, 15 març 2024


Vueimagen.png

https://www.youtube.com/watch?v=ub8ZU3JxNsM&list=PL7VXpoQP1k247QUTTxHcYBNyCg1j2ALfD

v-text: para mostrar texto y que no parpadee

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

V-TEXT

<body>
    <div id="el">
            <h1> {{mensaje}}</h1>    <!--podemos ver -->
    </div>
</body>
    
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
     var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"   //datos, hace referencia dentro de elemento 
        })
    }).mount("#el") //hace referencia al elemento id= el
    
</script>


<body>
    <div id="el">
            <h1>Hola <span v-text="mensaje"> </span></h1>   <!--muestra "Hola" y luego en función del texto del input va rellenando-->
            <input type="text" class="text" v-model="mensaje">
    </div>
</body>
   
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"
        })
    }).mount('#el');
    
</script>

V-SHOW

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

<body>

    <div id="el">
            <h1 v-show="mensaje.length > 2">Ejemplo <span v-text="mensaje"> {{mensaje}}</span></h1>  <!--al recargar la pagina, se puede ver {{mensaje}} para evitar esto se usa la directiva v-text-->
            <input type="text" class="text" v-model="mensaje">
    </div>
</body>

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

    var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"
        })
    }).mount("#el")


</script>


<body>
  <div id="el">
    <h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>   <!--si el mensaje es mayor que 2 muestra en caso contrario hace un display:none en css-->
    <input type="text" class="text" v-model="mensaje">
  </div>
</body>

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

  var variable = Vue.createApp({
    data: () => ({
      mensaje: "resultado"
    })
  }).mount("#el")

</script>

V-IF

<body>
  <div id="el">
    <h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>    <!--en vez de v-show podemos usar v-if-->
    <h1 v-else>otra</h1>
    <input type="text" class="text" v-model="mensaje">
  </div>
</body>

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

  var variable = Vue.createApp({
    data: () => ({
      mensaje: "resultado"
    })
  }).mount("#el")

</script>

V-FOR

<body>
    <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li> -->
            <li v-for="profesor in profesores" v-text="profesor"></li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({
            profesores: [      //utilizamos un array con cadenas
                "Julio Noguera",
                "Albert Canela",
                "Alex Salinas"
            ]
        })
    }).mount("#el")
</script>


Recorriendo Objetos

<body>
    <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li> -->
            <li v-for="profesor in profesores" v-text="profesor.nombre"></li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({    //utilizamos un array con objetos
            profesores: [   
                {nombre:"Julio Noguera"},
                {nombre: "Albert Canela"},
                {nombre: "Alex Salinas"}

            ]
        })
    }).mount("#el")
</script>

Podemos especificar recorrer los objetos y mostrar o acceder a su contenido

<body>
   <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li>-->
            <li v-for="profesor in profesores">
                <span v-text="profesor.nombre"></span>
                <small v-if="profesor.activo">-Activo</small>
                <small v-else>-NO está</small>
               
            </li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({
            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        })
    }).mount("#el")
</script>

//en Consola del navegador->
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas",activo:true})

EVENTOS y FUNCIONES

CLICK

Tenemos los datos mensajes y el array de profesores, también el método invertir que se ejecutará cuando se haga click en botón, también es interesante que para acceder a los datos se utiliza this.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
    <div id="el">
        <input type="text" v-model="mensaje">
        <h1 v-text="mensaje"></h1>
        <!-- <button @click="mensaje=mensaje.split('').reverse('').join('')">BOTON</button> --> 
        <!-- @click es abreviación de v-on:click -->
        <button @click="invertir">INVERTIR</button>
    </div>
</body>

<script>
    var variable = Vue.createApp({
        data: () => ({
            mensaje: "",
        }),
        methods: {
            invertir() {
                this.mensaje = this.mensaje.split('').reverse().join('');
            }
        }
    }).mount("#el");
</script>

Mostrar lista asociando evento click

<style>
.false{background:blue}
.true{background: green}
</style>
<body>
    <div class="container">
        <div id="el">
            <ul>
                <li v-for="profe in profesores">
                    <span v-text="profe.nombre"></span>
                    <span @click="profe.activo=false" v-if="profe.activo" class="false">X</span>
                    <span @click="profe.activo=true" v-else class="true">X</span>

                </li>
            </ul>
            <pre>{{$data}}</pre>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({
            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]

        })
    }).mount("#el");
</script>


BOTÓN- AÑADIR LISTA

KEYUP

Eventos de teclado

<body>
    <div id="el">
        <ul>
            <li v-for="profesor in profesores">
                <span v-text="profesor.nombre"></span>
                <small v-if="profesor.activo">-Activo</small>
                <small v-else>-NO está</small>
            </li>
          <input v-on:keyup.enter="anadir" type="text" v-model="profe" >

            <!-- <input @keyup.enter="anadir" type="text" v-model="profe" > -->
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var variable = Vue.createApp({
            data:() => ({
              profe: "",
                profesores: [
                  { nombre: "Julio Noguera", activo: true },
                  { nombre: "Albert Canela", activo: true },
                  { nombre: "Alex Salinas", activo: false }
                ]
            }),
            methods: {
                anadir() {
                    this.profesores.push({
                        nombre: this.profe,
                        activo: false
                    });
                    this.profe = ""; // Restableix el valor de profe a una cadena buida després d'afegir-lo
                }
            }
        }).mount("#el");
    </script>
</body>

DIRECTIVA V-BIND

PARA ACTIVAR CLASES

<style>
    .rojo {
        background: red;
    }

    .verde {
        background: green;
    }
    .glyphicon{
        color: white;
    }
</style>
<body>

      <div id="el">
          <ul>
            <!--//en el caso de querer añadir varias clases-->
            <!-- v-bind:class="['glyphicon',tarea.completo ? 'verde': 'rojo']" -->
              <li v-for="tarea in tareas"> 
                  <span v-bind:class="{  
                               'rojo': !tarea.completo,
                               'verde': tarea.completo
                                }" v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
                  <input type="checkbox"  v-model="tarea.completo">
              </li>
          </ul>
          <pre>
            {{$data}}
          </pre>
      </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var variable = Vue.createApp({
      data: () => ({
          tareas: [
            {
                nombre: "Estudiar",
                completo: true
            },
            {
                nombre: "Repasar",
                completo: true
            },
            {
                nombre: "Examinar",
                completo: false
            }
          ]
      })
  }).mount("#el");
</script>


INCREMENTAR

Como se puede ver, se produce un incremento de voto modificando su atributo directamente.

<body>
    <div class="container">
        <h1>veamos</h1>
        <div>
            <ul>
                <li v-for="storie in stories">
                    <button  @click="storie.votos++">Vote {{storie.politico}}</button>
                    <!-- <button  @click="incrementVote(storie)">Vote {{storie.politico}}</button> -->
                    <pre v-text="storie.votos"></pre>
                </li>
            </ul>
        </div>
        <pre>{{$data}}</pre>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  const app = Vue.createApp({
    data() {
      return {
        stories: [
          { politico: "julio", votos: 1 },
          { politico: "paco", votos: 2 },
          { politico: "raúl", votos: 3 },
          { politico: "jorge", votos: 4 }
        ]
      };
    },
    methods: {
      incrementVote(storie) {
        storie.votos++;
      }
    }
  }).mount(".container");

</script>

FILTRAR

<div id="aplicacion">
    <input type="range" v-model="minimo" min="0" max="50">  
    <div v-text="minimo"></div>


    <div v-for="dato in filtrar">
      <div v-text="dato.descripcion"></div>
    </div>

    <input type="search" v-model="campo">

    <div v-for="dato in busqueda">
      <div v-text="dato.descripcion"></div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = Vue.createApp({
      data:() => ({

        minimo: "5",

        campo: "",

        datos: [{
          codigo: 1,
          descripcion: 'papas',
          precio: 12.52
        }, {
          codigo: 2,
          descripcion: 'naranjas',
          precio: 21
        }, {
          codigo: 3,
          descripcion: 'peras',
          precio: 18.20
        }]
      }),
      computed: {
        filtrar() {
          return this.datos.filter((dato) => dato.precio > this.minimo);
        },
        busqueda() {
          return this.datos.filter((dato) => dato.descripcion.includes(this.campo));
        }

      }
    }).mount("#aplicacion")

  </script>

Componentes

1. Crear una nueva instancia de Vue con Vue.createApp

2. Existen 3 Objetos básicos y fundamentales que estarán en la mayoria de las aplicaciones web: el data y methods.

3. Se debe crear un contenedor con un id igual al del objeto el para establecer el alcance del framework


Crear Nuestro primer Componente Básico

<body>
  <div id="aplicacion">
    <!-- vue está disponible en todo este div-->
    <hola-mundo></hola-mundo>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
 

//nueva instacia de Vue : Vue.createApp
  var app= Vue.createApp({
    data:() => ({ //capa de datos

    }),
    methods:
    {

    }
    })
    
    app.component('hola-mundo', {    //debe coincidir con el nombre del componente(etiqueta html)
    template: `<p>
                 Hola mundo
              </p>`
  });
    
    app.mount('#aplicacion')  // el elemento donde se aplicará Vue, en este caso un div con id = main);
</script>



PROPS

Props sirve para interpolar o pasar los valores que hayan dentro del atributo la etiqueta html (inglés, castellano) al objeto component

<body>
  <div id="aplicacion">
    <hola-mundo idioma="ingles"></hola-mundo>
    <hola-mundo idioma="castellano"></hola-mundo>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  
  var app= Vue.createApp({
  })
  
  app.component('hola-mundo', {
    props: ['idioma'],
    template: `<div>
                  <p v-if="idioma=='castellano'">Hola mundo</p>
                  <p v-if="idioma=='ingles'">Hello world</p>
              </div>`
  })
  
  app.mount("#aplicacion")
</script>

</body>

Otro Componente Básico

<body>
 
 <div id="app">
 <ejemplo nombre="Juan" apellido="Perez"></ejemplo> 
 <ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo> 
</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  
  var app= Vue.createApp({
  })
  
  
  app.component('ejemplo', {
   props: ['nombre', 'apellido'],
   template: '<p> Hola {{nombre}} {{apellido}} </p>' 
  });

  app.mount("#app")
</script>

</body>

Ejemplo de Componente, podemos ver que pasamos una peliculas "peliculon 1917" y una imagen en la etiqueta peliculas, que serán los valores que recibirá el componente para luego incluirlo en la plantilla.

<body>
  <div class="container">
    <peliculas titulo="peliculon 1917"
      imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
  </div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  

  var app = Vue.createApp({
  
  })
  
  app.component('peliculas', {

    props: ['imagen', 'titulo'],  //los props reciben los datos externos del html en este caso será "peliculon 1917" y la ruta de la imagen
    template: 
      `<div>
      <img width="100px" v-bind:src="imagen" :alt="titulo"/>  <!-- v-bind:alt se reduce en :alt , al ser un atributo no se puede usar {{}} sino v-bind-->
      <h2> {{titulo}} </h2>
      </div>`
  });
  
  app.mount(".container")

</script>
</body>


Este ejemplo, viene a basarse en el ejemplo anterior pero además coje datos del JSON data y los va mostrando

<body>
  <div class="container">
    <div v-for="(dato, index) in datos">   <!-- Corregido -->
      <peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
      </peliculas>
    </div>
  </div>

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

  <script type="text/javascript">
		var app = Vue.createApp({
      data: () => ({
          datos: [{
              titulo: "star wars",
              imagen: "https://vignette.wikia.nocookie.net/cine/images/8/88/Sw1.jpg/revision/latest?cb=20120930202439 "
            },
            {
              titulo: "Sonic",
              imagen: "https://www.smashbros.com/wiiu-3ds/images/character/sonic/main.png"
            },
            {
              titulo: "Mario bros",
              imagen: "https://imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png"
            }
          ]

        })
    })

    app.component('peliculas', {
     props: ['titulo', 'imagen'],
      template: `<div>
        <img width="100px" :src="imagen" :alt="titulo"/>
        <h2>{{ titulo }}</h2>
      </div>`
    });
    
		app.mount(".container")

  </script>
</body>


Componentes: definición de métodos y modelo de datos


<body>
  <div id="el" class="container">
    <h1> Helados </h1>
    <h2> Lista </h2>
    <ul>
      <li v-for="item in helados" :key="item.sabor">
        <component-helado v-bind:helado="item"></component-helado>
      </li>
    </ul>
    <h2> Seleccionados </h2>
    <ul>
      <li v-for="item in heladosSeleccionados" :key="item.sabor"> {{ item.sabor }} </li>
    </ul>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var app = Vue.createApp({
      data: () => ({
        helados: [{
            sabor: 'Chocolate',
            seleccionado: false
          },
          {
            sabor: 'Dulce de leche',
            seleccionado: false
          },
          {
            sabor: 'Frutilla',
            seleccionado: false
          },
          {
            sabor: 'Limón',
            seleccionado: false
          },
          {
            sabor: 'Vainilla',
            seleccionado: false
          }
        ]
      }),
      computed: {
        heladosSeleccionados() {
          return this.helados.filter(helado => helado.seleccionado);
        }
      }
    });

    app.component('component-helado', {
      props: ['helado'],
      template: `
        <div> 
          <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button> 
          <button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button> 
          <span> {{ helado.sabor }} </span> 
          <hr/>  
        </div>  `,
      methods: {
        agregar(helado) {
          helado.seleccionado = true;
        },
        eliminar(helado) {
          helado.seleccionado = false;
        }
      }
    });

    app.mount('#el');
</script>

Ejercicios

v-if, v-else, v-else-if, v-show

Crear dos inputs de tipo password y mostrar un mensaje en caso de que sean iguales

solución:

<body>
  <div id="aplicacion">
    <p>Ingrese la clave:
      <input type="password" v-model="clave1">
    </p>
    <p>Repita la clave:
      <input type="password" v-model="clave2">
    </p>  
    <p v-if="clave1===clave2">Las claves son iguales.</p>
    <p v-else>Las claves son distintas.</p>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = Vue.createApp({
      data:() => ({ 
        clave1 : '',
        clave2 : ''
      })
    }).mount("#aplicacion")
  </script>
</body>


v-for

Crear un array en data con los días de la semana y generar una tabla de 1 columna y 7 filas en HTML

solución:

<body>
  <div id="aplicacion">
    <table border="1">
      <template v-for="dia in dias">
        <tr><td>{{dia}}</td></tr>
      </template>
    </table>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app= Vue.createApp({
      data:() => ({ 
        dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
      })
    }).mount("#aplicacion")
  </script>
</body>


v-for con array de objetos literales

Definir un array con objetos que almacenan los nombres y edades de 6 personas. Mostrar en una lista ordenada el nombre de cada persona y entre paréntesis si es mayor o no de edad.

personas: [{
                    nombre: 'Julio', 
                    edad: 32
                   },{
                    nombre: 'Albert', 
                    edad: 50
                   },{
                    nombre: 'Alex', 
                    edad: 35
                   },{
                    nombre: 'Ramón', 
                    edad: 50
                   }]

solución:

<body>
  <div id="aplicacion">
    <ul>
      <template v-for="persona in personas">
        <li>
          {{persona.nombre}}
          <span v-if="persona.edad>=18">(Mayor)</span>
          <span v-else>(Menor)</span>
        </li>
      </template>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>   
  <script>
    var app= Vue.createApp({
      data:() => ({ 
        personas: [{
                    nombre: 'Jose', 
                    edad: 12
                   },{
                    nombre: 'Ana', 
                    edad: 43
                   },{
                    nombre: 'Pedro', 
                    edad: 4
                   },{
                    nombre: 'María', 
                    edad: 12
                   }]

      })
    }).mount("#aplicacion")
  </script>
</body>


methods

Se desea mostrar una lista de tareas, se pide que se pueda eliminar el item seleccionado.

Solución:

<body>
    <div id="el"> 
        <div v-for="tarea in tareas" >    <div v-for="(item, index) in tareas" > 
            <div v-text="tarea" ></div> <span @click="eliminar(tarea)">X</span>
         </div>
        <input type="text" v-model="tarea">
        <button @click="anadir">+</button>
        
        <br>
        {{$data}}

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var variable = Vue.createApp({
            data() {
                return {
                    tarea: "",
                    tareas: []
                }
            },
            methods: {
                anadir() {
                    this.tareas.push(this.tarea);
                    console.log(this.tareas);
                },
                eliminar(tarea) {
                    let index = this.tareas.indexOf(tarea);
                    if (index !== -1) {
                        this.tareas.splice(index, 1);
                    }
                }
            }
        }).mount('#el');
    </script>
</body>

</html>


Eventos: v-on:keypress, v-on:keyup

Tenemos un input de tipo text que introducimos un texto, a medida que vayamos escribiendo texto deberá ir mostrando la cantidad de 'a' y 'A' que hay


Componentes en Vue

Crear una componente llamada 'acerca-de' que muestre el nombre del programa y la versión del mismo.


https://www.tutorialesprogramacionya.com/vueya/

https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s