VUEJS

De wikiserver
La revisió el 20:01, 23 feb 2024 per Amoncusi (Discussió | contribucions) (→‎Ejercicios)
Dreceres ràpides: navegació, cerca


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>  //CDN
<script>
     Vue.config.devtools = true;    
     var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"   //datos, hace referencia dentro de elemento #el {{mensaje}} 
        })
    }).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><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 : new Vue
  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>

Ejercicios

<button @click="eliminar(tarea)">X</button> 
        </div>
       <input type="text" v-model="tarea" v-on:keyup.enter="anadir"><button @click="anadir">+</button>
       

       Plantilla:$data

   </div>

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

<script> 

   var variable = Vue.createApp({
       data: () => ({

           tarea: "",

           tareas: []
       }),
       methods: {
           anadir: function(){
               this.tareas.push(this.tarea);
               console.log(this.tareas);
           },
           eliminar: function(tarea){
               let x=this.tareas.indexOf(tarea);
               this.tareas.splice(x, 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

solución: 

<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: {
        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;
        }
      }
    }).mount("#aplicacion")
  </script>
</body>


bind (enlace) a clases CSS

Se tiene la siguiente declaración de lenguajes de programación: 

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
          }]        
      },

Cuando se hace clic sobre una de las opciones tachar dicho lenguaje agregando una clase en forma dinámica: 

.tachar {
      text-decoration: line-through;
      color: blue;
    }

solución: 

<body>
  <div id="aplicacion">
    <ul style="font-size:2rem; list-style:none">
      <li v-for="lenguaje in lenguajes"
          v-on: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=new Vue({
      el: '#aplicacion',
      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=true;
        }
      }
    })
  </script>
</body>


Componentes en Vue

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

Solución: 

<body>
  <div id="aplicacion">
    <acerca-de></acerca-de>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  Vue.component('acerca-de', {
    template: `<div><p>Programa: xxxxxxxx</p>
                    <p>Versión: xx</p></div> `
  })

  new Vue({
    el: '#aplicacion'
  })
</script>

</body>


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' 

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

  var app=new Vue({
    el: '#aplicacion',
    data: {
      idioma: 'castellano'
    }
  })
</script>

</body>


Componentes: propiedades de tipo objeto y vector

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

Solución 


<body>
  <div id="aplicacion">
    <articulos v-bind:datos="datos"></articulos>
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  Vue.component('articulos', {
    props:['datos'],
    template: `<div>
                 <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>`
  })

  var app=new Vue({
    el: '#aplicacion',
    data: {
      datos: [{
              codigo: 1, 
              descripcion: 'papas',
              precio: 12.52
              },{
              codigo: 2, 
              descripcion: 'naranjas',
              precio: 21
              },{
              codigo: 3, 
              descripcion: 'peras',
              precio: 18.20
              }]      
    }
  })
</script>

</body>


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: 

<body>
  <div id="aplicacion">
    <contador></contador>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  
  Vue.component('contador', {
    template:`<div><button v-on:click="incrementar()">
              {{cantidad}}
              </button></div>`,
    data: function() {
      return {
        cantidad: 0
      }
    },
    methods: {
      incrementar: function() {
        this.cantidad++;
      }
    }
  });

  var app=new Vue({
    el: '#aplicacion'
  })

</script>
</body>


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


<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>

</body>

-->

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=17837»