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

De wikiserver
Dreceres ràpides: navegació, cerca
(→‎V-FOR)
(→‎Ejercicios)
 
(34 revisions intermèdies per 2 usuaris que no es mostren)
Línia 17: Línia 17:
 
</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({
 
     var variable = Vue.createApp({
 
         data: () => ({
 
         data: () => ({
−
             mensaje: "resultado"  //datos, hace referencia dentro de elemento #el {{mensaje}}
+
             mensaje: "resultado"  //datos, hace referencia dentro de elemento  
 
         })
 
         })
−
     }).mount(#el) //hace referencia al elemento id= el
+
     }).mount("#el") //hace referencia al elemento id= el
 
      
 
      
 
</script>
 
</script>
Línia 224: Línia 223:
  
 
<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>
 
         <button @click="invertir">INVERTIR</button>
−
 
 
     </div>
 
     </div>
 
</body>
 
</body>
  
−
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
 
<script>
 
<script>
−
     var variable = new Vue({
+
     var variable = Vue.createApp({
−
        el: '#el',
+
         data: () => ({
−
         data: {
+
             mensaje: "",
−
 
+
         }),
−
             mensaje: " ",
 
−
 
 
−
            profesores: [{
 
−
                    nombre: "Julio Noguera",
 
−
                    activo: true
 
−
                },
 
−
                {
 
−
                    nombre: "Albert Canela",
 
−
                    activo: true
 
−
                },
 
−
                {
 
−
                    nombre: "Alex Salinas",
 
−
                    activo: false
 
−
                }
 
−
 
 
−
            ]
 
−
         },
 
 
         methods: {
 
         methods: {
−
             invertir: function () {
+
             invertir() {
−
                 this.mensaje = this.mensaje.split('').reverse('').join(''); //utilizamos this.mensaje para acceder a los datos
+
                 this.mensaje = this.mensaje.split('').reverse().join('');
 
             }
 
             }
 
         }
 
         }
−
     })
+
     }).mount("#el");
 
</script>
 
</script>
 
</source>
 
</source>
Línia 276: Línia 256:
 
<body>
 
<body>
 
     <div class="container">
 
     <div class="container">
−
         <div id="elemento">
+
         <div id="el">
 
             <ul>
 
             <ul>
 
                 <li v-for="profe in profesores">
 
                 <li v-for="profe in profesores">
Línia 285: Línia 265:
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
−
             <pre>
+
             <pre>{{$data}}</pre>
−
                    {{$data}}
 
−
            </pre>
 
−
 
 
−
 
 
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Línia 296: 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: '#elemento',
+
         data: () => ({
−
         data: {
 
−
 
 
−
            profe: "",
 
−
 
 
 
             profesores: [{
 
             profesores: [{
 
                     nombre: "Julio Noguera",
 
                     nombre: "Julio Noguera",
Línia 317: Línia 289:
 
             ]
 
             ]
  
−
         }
+
         })
−
     })
+
     }).mount("#el");
 
</script>
 
</script>
 
</source>
 
</source>
Línia 332: Línia 304:
 
<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 341: 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" >  <!-- cuando apretamos el ENTER hace el evento (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>
−
</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: {
+
              profe: "",
−
 
+
                profesores: [
−
            profe: "",
+
                  { nombre: "Julio Noguera", activo: true },
−
 
+
                  { nombre: "Albert Canela", activo: true },
−
            profesores: [{
+
                  { nombre: "Alex Salinas", activo: false }
−
                    nombre: "Julio Noguera",
+
                 ]
−
                    activo: true
+
            }),
−
                },
+
            methods: {
−
                {
+
                 anadir() {
−
                    nombre: "Albert Canela",
+
                     this.profesores.push({
−
                    activo: true
+
                        nombre: this.profe,
−
                 },
+
                        activo: false
−
                 {
+
                    });
−
                     nombre: "Alex Salinas",
+
                    this.profe = ""; // Restableix el valor de profe a una cadena buida després d'afegir-lo
−
                    activo: false
 
 
                 }
 
                 }
−
 
−
            ]
 
−
        },
 
−
        methods: {
 
−
            anadir: function () {
 
−
 
−
                this.profesores.push({
 
−
                    nombre: this.profe,
 
−
                    activo: false
 
−
                });
 
−
 
 
             }
 
             }
−
         }
+
         }).mount("#el");
−
     })
+
     </script>
−
</script>
+
</body>
 
</source>
 
</source>
  
Línia 399: Línia 353:
 
     .verde {
 
     .verde {
 
         background: green;
 
         background: green;
 +
    }
 +
    .glyphicon{
 +
        color: white;
 
     }
 
     }
 
</style>
 
</style>
 
<body>
 
<body>
  
−
       <div id="elemento">
+
       <div id="el">
 
           <ul>
 
           <ul>
−
 
+
            <!--//en el caso de querer añadir varias clases-->
−
<!--v-bind:class="['glyphicon',tarea.completo ? 'glyphicon-check': 'glyphicon-unchecked']" //en el caso de querer añadir varias clases-->
+
            <!-- v-bind:class="['glyphicon',tarea.completo ? 'verde': 'rojo']" -->
−
 
 
 
               <li v-for="tarea in tareas">  
 
               <li v-for="tarea in tareas">  
−
                   <span v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
+
                   <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">
 
                   <input type="checkbox"  v-model="tarea.completo">
−
                <span v-bind:class="{ 
 
−
                              'rojo':tarea.completo,
 
−
                              'verde': ! tarea.completo
 
−
                                }"></span>
 
 
               </li>
 
               </li>
 
           </ul>
 
           </ul>
 
           <pre>
 
           <pre>
−
                  {{$data}}
+
            {{$data}}
−
             
 
 
           </pre>
 
           </pre>
 
       </div>
 
       </div>
Línia 427: Línia 381:
 
<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: '#elemento',
+
       data: () => ({
−
       data: {
+
           tareas: [
−
 
+
            {
−
           tareas: [{
+
                nombre: "Estudiar",
−
              nombre: "Estudiar",
+
                completo: true
−
              completo: true
+
            },
−
          },
+
            {
−
          {
+
                nombre: "Repasar",
−
              nombre: "Repasar",
+
                completo: true
−
              completo: true
+
            },
−
          },
+
            {
−
          {
+
                nombre: "Examinar",
−
              nombre: "Examinar",
+
                completo: false
−
              completo: false
+
            }
−
          }
 
−
 
 
 
           ]
 
           ]
−
 
+
       })
−
       }
+
   }).mount("#el");
−
   })
 
−
</script>
 
 
</script>
 
</script>
 
</source>
 
</source>
Línia 458: Línia 408:
 
Como se puede ver, se produce un incremento de voto modificando su atributo directamente.  
 
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">
Línia 464: Línia 413:
 
         <div>
 
         <div>
 
             <ul>
 
             <ul>
−
              <li v-for="storie in stories"><button  @click="storie.votos++">Vote</button><pre v-text="storie.votos"></pre></li>
+
                <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>
 
             </ul>
 
         </div>
 
         </div>
−
         <pre>
+
         <pre>{{$data}}</pre>
−
{{$data | json}}
 
−
</pre>
 
 
     </div>
 
     </div>
 
</body>
 
</body>
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
−
    new Vue({
+
  const app = Vue.createApp({
−
        el: '.container',
+
    data() {
−
        data: {
+
      return {
−
            stories: [{
+
        stories: [
−
                    politico: "julio",
+
          { politico: "julio", votos: 1 },
−
                    votos: 1
+
          { politico: "paco", votos: 2 },
−
                },
+
          { politico: "raúl", votos: 3 },
−
                {
+
          { politico: "jorge", votos: 4 }
−
                    politico: "paco",
+
        ]
−
                    votos: 2
+
      };
−
                },
+
    },
−
                {
+
    methods: {
−
                    politico: "raúl",
+
      incrementVote(storie) {
−
                    votos: 3
+
         storie.votos++;
−
                },
+
      }
−
                {
+
     }
−
                    politico: "jorge",
+
  }).mount(".container");
−
                    votos: 4
+
 
−
                },
+
</script>
−
            ]
 
−
         }      
 
−
     })
 
 
</source>
 
</source>
  
Línia 519: Línia 467:
 
   <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 = Vue.createApp({
−
     var app = new Vue({
+
       data:() => ({
−
      el: '#aplicacion',
 
−
       data: {
 
  
 
         minimo: "5",
 
         minimo: "5",
Línia 541: Línia 487:
 
           precio: 18.20
 
           precio: 18.20
 
         }]
 
         }]
−
       },
+
       }),
 
       computed: {
 
       computed: {
 
         filtrar() {
 
         filtrar() {
Línia 551: Línia 497:
  
 
       }
 
       }
−
     })
+
     }).mount("#aplicacion")
 +
 
 
   </script>
 
   </script>
 
</source>
 
</source>
Línia 557: Línia 504:
 
==Componentes==
 
==Componentes==
  
−
1. Crear una nueva instancia de Vue con new Vue
+
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.
 
2. Existen 3 Objetos básicos y fundamentales que estarán en la mayoria de las aplicaciones web: el data y methods.
Línia 576: Línia 523:
  
 
<script>
 
<script>
−
  Vue.component('hola-mundo', {    //debe coincidir con el nombre del componente(etiqueta html)
+
−
    template: `<p>
 
−
                Hola mundo
 
−
              </p>`
 
−
  });
 
  
−
//nueva instacia de Vue : new Vue
+
//nueva instacia de Vue : Vue.createApp
−
   var app=new Vue({
+
   var app= Vue.createApp({
−
     el: '#aplicacion',  // el elemento donde se aplicará Vue, en este caso un div con id = main
+
     data:() => ({ //capa de datos
−
    data:{ //capa de datos
 
  
−
     },
+
     }),
 
     methods:
 
     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>
Línia 611: Línia 561:
 
<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({
 +
  })
 +
 
 +
  app.component('hola-mundo', {
 
     props: ['idioma'],
 
     props: ['idioma'],
 
     template: `<div>
 
     template: `<div>
Línia 618: Línia 572:
 
               </div>`
 
               </div>`
 
   })
 
   })
−
 
+
 
−
   var app=new Vue({
+
   app.mount("#aplicacion")
−
    el: '#aplicacion'
 
−
  })
 
 
</script>
 
</script>
  
Línia 630: Línia 582:
  
 
<source lang="javascript">
 
<source lang="javascript">
−
<div id="app">
+
<body>
 +
 +
<div id="app">
 
  <ejemplo nombre="Juan" apellido="Perez"></ejemplo>  
 
  <ejemplo nombre="Juan" apellido="Perez"></ejemplo>  
 
  <ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo>  
 
  <ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo>  
 
</div>
 
</div>
  
−
Vue.component('ejemplo', {
+
 
−
props: ['nombre', 'apellido'],
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
−
template: '<p> Hola {{nombre}} {{apellido}} </p>'  
+
<script>
−
});
+
 
 +
  var app= Vue.createApp({
 +
  })
 +
 
 +
 
 +
  app.component('ejemplo', {
 +
  props: ['nombre', 'apellido'],
 +
  template: '<p> Hola {{nombre}} {{apellido}} </p>'  
 +
  });
 +
 
 +
  app.mount("#app")
 +
</script>
 +
 
 +
</body>
 
</source>
 
</source>
  
Línia 648: Línia 615:
 
       imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
 
       imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
 
   </div>
 
   </div>
−
</body>
 
  
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js">
+
 
−
</script>
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
−
   Vue.config.devtools = true;
+
    
  
−
   Vue.component('peliculas', {
+
   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
 
     props: ['imagen', 'titulo'],  //los props reciben los datos externos del html en este caso será "peliculon 1917" y la ruta de la imagen
Línia 664: Línia 634:
 
       </div>`
 
       </div>`
 
   });
 
   });
 +
 
 +
  app.mount(".container")
  
−
 
−
  new Vue({
 
−
    el: '.container'
 
−
  })
 
 
</script>
 
</script>
 +
</body>
 
</source>
 
</source>
  
Línia 678: Línia 647:
 
<body>
 
<body>
 
   <div class="container">
 
   <div class="container">
−
     <div v-for="(index, dato) in datos">  <!--añadimos indice-->
+
     <div v-for="(dato, index) in datos">  <!-- Corregido -->
 
       <peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
 
       <peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
 
       </peliculas>
 
       </peliculas>
 
     </div>
 
     </div>
 
   </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>
 
</body>
  
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js">
+
</source>
−
</script>
+
 
−
<script type="text/javascript">
+
 
−
  Vue.config.devtools = true;
+
'''Componentes: definición de métodos y modelo de datos'''
 +
 
 +
 
  
−
   Vue.component('peliculas', {
+
<source lang="javascript">
−
     props: ['key','titulo', 'imagen'],
+
<body>
−
     template: `<div>
+
   <div id="el" class="container">
−
       <img width="100px" v-bind:src="imagen" v-bind:alt="titulo"/>
+
    <h1> Helados </h1>
−
       <h2> {{titulo}}: {{key}} </h2>
+
     <h2> Lista </h2>
−
      </div>`
+
     <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);
 +
        }
 +
      }
 +
    });
  
−
  new Vue({
+
    app.component('component-helado', {
−
    el: '.container',
+
      props: ['helado'],
−
    data: {
+
      template: `
−
      datos: [{
+
        <div>
−
           titulo: "star wars",
+
           <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button>
−
           imagen: "https://vignette.wikia.nocookie.net/cine/images/8/88/Sw1.jpg/revision/latest?cb=20120930202439 "
+
           <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) {
−
           titulo: "Sonic",
+
           helado.seleccionado = false;
−
          imagen: "https://www.smashbros.com/wiiu-3ds/images/character/sonic/main.png"
 
−
        },
 
−
        {
 
−
          titulo: "Mario bros",
 
−
          imagen: "https://cdn02.nintendo-europe.com/media/images/05_packshots/games_13/nes_1/PS_NES_SuperMarioBros.jpg"
 
 
         }
 
         }
−
       ]
+
       }
−
 
+
     });
−
     }
 
−
  })
 
  
 +
    app.mount('#el');
 
</script>
 
</script>
−
 
 
</source>
 
</source>
  
−
==Ejercicios ==
+
== Ejercicios ==
−
 
 
−
<!--
 
  
 
'''v-if, v-else, v-else-if, v-show'''
 
'''v-if, v-else, v-else-if, v-show'''
  
−
Tenemos dos inputs de tipo passwords y muestre un mensaje en caso que sean iguales
+
Crear dos inputs de tipo password y mostrar un mensaje en caso de que sean iguales
  
 
'''solución:'''
 
'''solución:'''
Línia 746: Línia 789:
 
   </div>
 
   </div>
  
−
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>  
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
   <script>
 
   <script>
−
     var app=new Vue({
+
     var app = Vue.createApp({
−
      el: '#aplicacion',
+
       data:() => ({  
−
       data:{  
 
 
         clave1 : '',
 
         clave1 : '',
 
         clave2 : ''
 
         clave2 : ''
−
       }
+
       })
−
     })
+
     }).mount("#aplicacion")
 
   </script>
 
   </script>
 
</body>
 
</body>
Línia 762: Línia 804:
 
'''v-for'''
 
'''v-for'''
  
−
Tenemos un array en data con los días de la semana, se trata de generar una tabla de 1 columna y 7 filas en HTML
+
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:'''
 
'''solución:'''
Línia 776: Línia 818:
 
   </div>
 
   </div>
  
−
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>  
+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
   <script>
 
   <script>
−
     var app=new Vue({
+
     var app= Vue.createApp({
−
      el: '#aplicacion',
+
       data:() => ({  
−
       data:{  
 
 
         dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
 
         dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
−
       }
+
       })
−
     })
+
     }).mount("#aplicacion")
 
   </script>
 
   </script>
 +
</body>
 
</source>
 
</source>
−
 
  
  
Línia 810: Línia 851:
  
 
'''solución:'''
 
'''solución:'''
−
 
  
 
<source lang="javascript">
 
<source lang="javascript">
Línia 829: Línia 869:
 
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>   
 
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>   
 
   <script>
 
   <script>
−
     var app=new Vue({
+
     var app= Vue.createApp({
−
      el: '#aplicacion',
+
       data:() => ({  
−
       data:{  
 
 
         personas: [{
 
         personas: [{
 
                     nombre: 'Jose',  
 
                     nombre: 'Jose',  
Línia 846: Línia 885:
 
                   }]
 
                   }]
  
−
       }
+
       })
−
     })
+
     }).mount("#aplicacion")
 
   </script>
 
   </script>
 
</body>
 
</body>
 
</source>
 
</source>
  
−
 
+
<!--
 
===Ejercicios===
 
===Ejercicios===
  
Línia 862: Línia 901:
 
     <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 872: 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 893: Línia 931:
  
 
             ]
 
             ]
−
         },
+
         }),
 
         methods: {
 
         methods: {
 
             anadir: function(){
 
             anadir: function(){
Línia 903: Línia 941:
 
             }
 
             }
 
         }
 
         }
−
     });
+
     }).mount("#el");
 
     </script>
 
     </script>
 
</source>
 
</source>
Línia 933: Línia 971:
 
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>   
 
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>   
 
   <script>
 
   <script>
−
     var app=new Vue({
+
     var app= Vue.createApp({
−
      el: '#aplicacion',
+
       data: () => ({  
−
       data:{  
 
 
         valor1: 0,
 
         valor1: 0,
 
         valor2: 0,
 
         valor2: 0,
 
         suma: ''
 
         suma: ''
−
       },
+
       }),
 
       methods: {
 
       methods: {
 
         sumarValores: function() {
 
         sumarValores: function() {
Línia 945: Línia 982:
 
         }
 
         }
 
       }       
 
       }       
−
     })
+
     }).mount("#aplicacion")
 
   </script>
 
   </script>
 
</source>
 
</source>
  
 
===Ejercicio===
 
===Ejercicio===
 +
-->
 +
 +
'''methods'''
  
 
Se desea mostrar una lista de tareas, se pide que se pueda eliminar el item seleccionado.
 
Se desea mostrar una lista de tareas, se pide que se pueda eliminar el item seleccionado.
Línia 955: Línia 995:
 
'''Solución''':
 
'''Solución''':
  
−
<source lang="js">
+
<source lang="javascript">
 
<body>
 
<body>
 
     <div id="el">  
 
     <div id="el">  
−
         <div v-for="tarea in tareas" >     // <div v-for="(item, index) 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 968: 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: []
−
            tarea: "",
+
                }
−
 
 
−
            tareas: []
 
−
        },
 
−
        methods: {
 
−
            anadir: function(){
 
−
                this.tareas.push(this.tarea);
 
−
                console.log(this.tareas);
 
 
             },
 
             },
−
             eliminar: function(tarea){
+
             methods: {
−
                let x=this.tareas.indexOf(tarea);
+
                anadir() {
−
                this.tareas.splice(x, 1);
+
                    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>
 
     </script>
 
</body>
 
</body>
Línia 995: Línia 1.036:
 
</html>
 
</html>
 
</source>
 
</source>
−
 
−
 
−
 
−
 
−
 
−
'''Eventos: v-on:keypress, v-on:keyup'''
 
−
 
−
Mediante un control de tipo input permitir el ingreso de una frase. Mostrar por pantalla cada vez que presionamos una tecla la cantidad de letras 'a' que tiene la
 
−
oración.
 
−
 
−
'''solución:'''
 
−
 
−
<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=new Vue({
 
−
      el: '#aplicacion',
 
−
      data:{
 
−
        cantidadLetrasa: 0,
 
−
        frase: ''
 
−
      },
 
−
      methods: {
 
−
        contabilizarLetrasA: function () {
 
−
          var cant=0;
 
−
          for(var f=0; f<this.frase.length; f++)
 
−
            if (this.frase[f]=='a' || this.frase[f]=='A')
 
−
              cant++;
 
−
          this.cantidadLetrasa=cant;
 
−
        }
 
−
      }
 
−
    })
 
−
  </script>
 
−
</body>
 
−
 
−
</source>
 
−
 
  
  
Línia 1.045: Línia 1.042:
 
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
 
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
  
 +
<!--
 
'''solución:'''
 
'''solución:'''
  
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
−
  <div id="aplicacion">
+
    <div id="aplicacion">
−
    <p>Ingrese una frase:
+
      <p>Ingrese una frase:
−
      <input v-model="frase" v-on:keyup="contabilizarLetrasA" type="text" size="80">
+
        <input v-model="frase" v-on:keyup="contabilizarLetrasA" type="text" size="80">
−
    </p>
+
      </p>
−
    <p>Cantidad de letras 'a o 'A'':{{cantidadLetrasa}}</p>
+
      <p>Cantidad de letras 'a o 'A'':{{cantidadLetrasa}}</p>
−
  </div>
+
    </div>
−
 
+
 
−
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
−
  <script>
+
    <script>
−
    var app=new Vue({
+
      var app = Vue.createApp({
−
      el: '#aplicacion',
+
        data:() => ({  
−
      data:{  
+
          cantidadLetrasa: 0,
−
        cantidadLetrasa: 0,
+
          frase: ''
−
        frase: ''
+
        }),
−
      },
+
        methods: {
−
      methods: {
+
          contabilizarLetrasA: function() {
−
        contabilizarLetrasA: function () {
+
            var cant=0;
−
          var cant=0;
+
            for(var f=0; f<this.frase.length; f++)
−
          for(var f=0; f<this.frase.length; f++)
+
              if (this.frase[f]=='a' || this.frase[f]=='A')
−
            if (this.frase[f]=='a' || this.frase[f]=='A')
+
                cant++;
−
              cant++;
+
            this.cantidadLetrasa=cant;
−
          this.cantidadLetrasa=cant;
+
          }
 
         }
 
         }
−
       }
+
       }).mount('#aplicacion');
−
     })
+
     </script>
−
  </script>
+
  </source>
−
</source>
 
  
  
Línia 1.128: Línia 1.125:
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
 +
  <style>
 +
    .tachar {
 +
      text-decoration: line-through;
 +
      color: blue;
 +
    }
 +
  </style>
 
   <div id="aplicacion">
 
   <div id="aplicacion">
 
     <ul style="font-size:2rem; list-style:none">
 
     <ul style="font-size:2rem; list-style:none">
 
       <li v-for="lenguaje in lenguajes"
 
       <li v-for="lenguaje in lenguajes"
−
           v-on:click="presion(lenguaje)"
+
           @click="presion(lenguaje)"
 
           v-bind:class="{tachar: lenguaje.tachado }">
 
           v-bind:class="{tachar: lenguaje.tachado }">
 
         {{lenguaje.nombre}}
 
         {{lenguaje.nombre}}
Línia 1.140: Línia 1.143:
 
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
   <script>
 
   <script>
−
var app=new Vue({
+
var app= Vue.createApp({
−
      el: '#aplicacion',
+
       data: () => ({  
−
       data:{  
 
 
         lenguajes: [
 
         lenguajes: [
 
           {
 
           {
Línia 1.172: Línia 1.174:
 
             tachado:false
 
             tachado:false
 
           }]         
 
           }]         
−
       },
+
       }),
 
       methods: {
 
       methods: {
 
         presion: function(lenguaje) {
 
         presion: function(lenguaje) {
−
           lenguaje.tachado=true;
+
           lenguaje.tachado= !lenguaje.tachado;
 
         }
 
         }
 
       }
 
       }
−
     })
+
     }).mount('#aplicacion');
 
   </script>
 
   </script>
 
</body>
 
</body>
 
</source>
 
</source>
−
 
+
-->
  
 
'''Componentes en Vue'''
 
'''Componentes en Vue'''
Línia 1.188: Línia 1.190:
 
Crear una componente llamada 'acerca-de' que muestre el nombre del programa y la versión del mismo.
 
Crear una componente llamada 'acerca-de' que muestre el nombre del programa y la versión del mismo.
  
 +
<!--
 
'''Solución:'''
 
'''Solución:'''
  
Línia 1.198: Línia 1.201:
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
−
   Vue.component('acerca-de', {
+
 
−
    template: `<div><p>Programa: xxxxxxxx</p>
+
   var app = Vue.createApp({
−
                    <p>Versión: xx</p></div> `
 
 
   })
 
   })
  
−
   new Vue({
+
   app.component('acerca-de', {
−
     el: '#aplicacion'
+
     data: () => ({
 +
      navigator: navigator.appCodeName || 'Unknown',
 +
      version: navigator.appVersion
 +
    }),
 +
    template: `<div><p>Programa: {{navigator}}</p>
 +
                    <p>Versión: {{version}}</p></div> `
 
   })
 
   })
 +
 +
  app.mount('#aplicacion')
 
</script>
 
</script>
  
Línia 1.227: Línia 1.236:
 
<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 1.235: Línia 1.252:
 
   })
 
   })
  
−
   var app=new Vue({
+
   app.mount('#aplicacion');
−
    el: '#aplicacion',
 
−
    data: {
 
−
      idioma: 'castellano'
 
−
    }
 
−
  })
 
 
</script>
 
</script>
  
Línia 1.262: Línia 1.274:
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
<script>
 
<script>
−
   Vue.component('articulos', {
+
    
 +
  var app= Vue.createApp({
 +
    data: () => ({
 +
      datos: [{
 +
          codigo: 1,
 +
          descripcion: 'papas',
 +
          precio: 12.52
 +
        },{
 +
          codigo: 2,
 +
          descripcion: 'naranjas',
 +
          precio: 21
 +
        },{
 +
          codigo: 3,
 +
          descripcion: 'peras',
 +
          precio: 18.20
 +
        }]     
 +
    })
 +
  })
 +
 
 +
  app.component('articulos', {
 
     props:['datos'],
 
     props:['datos'],
 
     template: `<div>
 
     template: `<div>
Línia 1.272: Línia 1.303:
 
   })
 
   })
  
−
   var app=new Vue({
+
 
−
    el: '#aplicacion',
+
   app.mount('#aplicacion');
−
    data: {
 
−
      datos: [{
 
−
              codigo: 1,
 
−
              descripcion: 'papas',
 
−
              precio: 12.52
 
−
              },{
 
−
              codigo: 2,
 
−
              descripcion: 'naranjas',
 
−
              precio: 21
 
−
              },{
 
−
              codigo: 3,
 
−
              descripcion: 'peras',
 
−
              precio: 18.20
 
−
              }]     
 
−
    }
 
−
  })
 
 
</script>
 
</script>
  
Línia 1.311: Línia 1.326:
 
<script>
 
<script>
 
    
 
    
−
   Vue.component('contador', {
+
 +
   var app= Vue.createApp({
 +
  })
 +
 
 +
  app.component('contador', {
 
     template:`<div><button v-on:click="incrementar()">
 
     template:`<div><button v-on:click="incrementar()">
 
               {{cantidad}}
 
               {{cantidad}}
 
               </button></div>`,
 
               </button></div>`,
−
     data: function() {
+
     data: () => ({
−
       return {
+
       cantidad: 0
−
        cantidad: 0
+
     }),
−
      }
 
−
     },
 
 
     methods: {
 
     methods: {
 
       incrementar: function() {
 
       incrementar: function() {
Línia 1.327: Línia 1.344:
 
   });
 
   });
  
−
   var app=new Vue({
+
   app.mount('#aplicacion');
−
    el: '#aplicacion'
 
−
  })
 
  
−
</script>
 
−
</body>
 
−
</source>
 
−
 
−
 
−
'''Componentes: definición de métodos y modelo de datos'''
 
  
−
 
−
 
−
<source lang="javascript">
 
−
<body>
 
−
  <div id="app" class="container">
 
−
    <h1> Helados </h1>
 
−
    <h2> Lista </h2>
 
−
    <ul>
 
−
      <li v-for="item in helados">
 
−
        <component-helado v-bind:helado="item"></component-helado>
 
−
      </li>
 
−
    </ul>
 
−
    <h2> Seleccionados </h2>
 
−
    <ul>
 
−
      <li v-for="item in helados" v-if="item.seleccionado"> {{ item.sabor }} </li>
 
−
    </ul>
 
−
  </div>
 
−
</body>
 
−
 
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js">
 
−
</script>
 
−
<script type="text/javascript">
 
−
  Vue.config.devtools = true;
 
−
    Vue.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: function (p_helado) {
 
−
          p_helado.seleccionado = true;
 
−
        },
 
−
        eliminar: function (p_helado) {
 
−
          p_helado.seleccionado = false;
 
−
        }
 
−
      }
 
−
    });
 
−
 
−
    new Vue({
 
−
      el: '#app',
 
−
      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
 
−
          }
 
−
        ]
 
−
      }
 
−
    });
 
 
</script>
 
</script>
−
 
 
</body>
 
</body>
−
 
 
</source>
 
</source>
  
 
-->
 
-->
−
 
−
<source lang="javascript">
 
−
</source>
 
  
 
https://www.tutorialesprogramacionya.com/vueya/
 
https://www.tutorialesprogramacionya.com/vueya/
  
 
https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s
 
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

Obtingut de «http://wikiserver.infomerce.es/index.php?title=VUEJS&oldid=17906»