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

Revisió del 12:01, 11 març 2020

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-if y v-else:

Contingut

1 V-TEXT
2 V-SHOW
3 V-IF
4 V-FOR
5 EVENTOS y FUNCIONES
6 CLICK
7 KEYUP
8 DIRECTIVA V-BIND
9 Ejercicio
10 Componentes

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;    
         new Vue({
            el: '#el',   //hace referencia al elemento id= el
            data: {
                mensaje: "resultado"   //datos, hace referencia dentro de elemento #el {{mensaje}} 
            }
        })
    
    
    </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 = new Vue({
            el: '#el',
            data: {
                mensaje: "resultado"
            }
        })
    
     </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 = new Vue({
        el: '#el',
        data: {
            mensaje: "resultado"
        }
    })


</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 = new Vue({
            el: '#el',
            data: {
                mensaje: "resultado"
            }
        })
    
     </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 = new Vue({
            el: '#el',
            data: {
                mensaje: "resultado"
            }
        })
    
     </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 = new Vue({
        el: '#el',
        data: {
            profesores: [      //utilizamos un array con cadenas
                "Julio Noguera",
                "Albert Canela",
                "Alex Salinas"

            ]
        }
    })
</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 = new Vue({
        el: '#el',
        data: {    //utilizamos un array con objetos
            profesores: [   
                {nombre:"Julio Noguera"},
                {nombre: "Albert Canela"},
                {nombre: "Alex Salinas"}

            ]
        }
    })
</script>

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

<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 = new Vue({
        el: '#el',
        data: {
            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        }
    })
</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.

<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 src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {

            mensaje: " ",

            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        },
        methods: {
            invertir: function () {
                this.mensaje = this.mensaje.split('').reverse('').join('');  //utilizamos this.mensaje para acceder a los datos 
            }
        }
    })
</script>

Mostrar lista asociando evento click

<body>
    <div class="container">
        <div id="elemento">
            <ul>
                <li v-for="profe in profesores">
                    <span v-text="profe.nombre"></span>
                    <span @click="profe.activo=false" v-if="profe.activo" class="glyphicon glyphicon-check"></span>
                    <span @click="profe.activo=true" v-else class="glyphicon glyphicon-unchecked"></span>

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


        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#elemento',
        data: {

            profe: "",

            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]

        }
    })
</script>

BOTÓN- AÑADIR LISTA

KEYUP

Eventos de teclado

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

             <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 v-on:keyup.enter="anadir" type="text" v-model="profe" >  -->
           <!-- <input type="text" v-model="profe"> -->
           <!-- <button @click="anadir">+ añadir</button>-->
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {

            profe: "",

            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        },
        methods: {
            anadir: function () {

                this.profesores.push({
                    nombre: this.profe,
                    activo: false
                });

            }
        }
    })
</script>

DIRECTIVA COMPUTED.

DIRECTIVA V-BIND

PARA ACTIVAR CLASES

<body>
  <div class="container">
      <div id="elemento">
          <ul>

<!--v-bind:class="['glyphicon',tarea.completo ? 'glyphicon-check': 'glyphicon-unchecked']"  //en el caso de querer añadir varias clases-->

              <li v-for="tarea in tareas"> 
                  <span v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
                  <input type="checkbox"  v-model="tarea.completo">
                 <span v-bind:class="{  
                               'glyphicon': true,   
                               'glyphicon-check':tarea.completo,
                               'glyphicon-unchecked': ! tarea.completo
                                }"></span>
              </li>
          </ul>
          <pre>
                  {{$data}}
               
          </pre>
      </div>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var variable = new Vue({
      el: '#elemento',
      data: {

          tareas: [{
              nombre: "Estudiar",
              completo: true
          },
          {
              nombre: "Repasar",
              completo: true
          },
          {
              nombre: "Examinar",
              completo: false
          }

          ]

      }
  })
</script>
</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</button><pre v-text="storie.votos"></pre></li>
            </ul>
        </div>
        <pre>
{{$data | json}}
</pre>
    </div>
</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
                },
            ]
        }        
    })

Ejercicio

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.

Solución:

Ejercicio: Se desea mostrar una lista de tareas, se pide que se pueda eliminar el item seleccionado. Solución: https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s

Componentes

1. Crear una nueva instancia de Vue con new Vue

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

<body>
  <div id="aplicacion">
    <!-- vue está disponible en todo este div-->
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></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
  var app=new Vue({
    el: '#aplicacion',  // el elemento donde se aplicará Vue, en este caso un div con id = main
data:{ //capa de datos

}

  });
</script>

Crear Nuestro primer Componente Básico

<body>
  <div id="aplicacion">
    <hola-mundo></hola-mundo>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
  Vue.component('hola-mundo', {    //debe coincidir con el nombre del componente(etiqueta html)
    template: `<p>
                 Hola mundo
              </p>`
  });

  var app=new Vue({
    el: '#aplicacion'
  });
</script>
</body>

Otro Componente Básico

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

Vue.component('ejemplo', {
 props: ['nombre', 'apellido'],
 template: '<p> Hola {{nombre}} {{apellido}} </p>' 
});

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>
  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'
  })
</script>

</body>

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>
    Vue.config.devtools = true;
    var app = new Vue({
      el: '#aplicacion',
      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));
        }

      }
    })
  </script>

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://pbs.twimg.com/profile_banners/1207170793177640960/1576648504/1080x360"></peliculas>
  </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('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>`
  });
  new Vue({
    el: '.container'
  })
</script>

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 in datos">
      <peliculas :titulo="dato.titulo" :imagen="dato.imagen">
      </peliculas>
    </div>
  </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('peliculas', {
    props: ['titulo', 'imagen'],
    template: `<div>
      <img width="100px" v-bind:src="imagen" v-bind:alt="titulo"/>
      <h2> {{titulo}} </h2>
      </div>`
  });
  new Vue({
    el: '.container',
    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://cdn02.nintendo-europe.com/media/images/05_packshots/games_13/nes_1/PS_NES_SuperMarioBros.jpg"
        }
      ]

    }
  })
</script>

EJERCICIO

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

@@ Línia 502: / Línia 502: @@
 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.
+'''Solución''':
 <!--
 <source lang="js">
@@ Línia 552: / Línia 554: @@
 -->
-hacer calculadora
-hacer CRUD
+Ejercicio:
 Se desea mostrar una lista de tareas, se pide que se pueda eliminar el item seleccionado.
+'''Solución''':
+<!--
 <source lang="js">
 <body>
@@ Línia 598: / Línia 600: @@
 </source>
+-->
 https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s

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

Revisió del 12:01, 11 març 2020

Contingut

V-TEXT

V-SHOW

V-IF

V-FOR

EVENTOS y FUNCIONES

CLICK

KEYUP

DIRECTIVA V-BIND

Ejercicio

Componentes

Menú de navegació

Eines de l'usuari

Espais de noms

Variants

Vistes

Més

Cerca

Navegació

Mòduls

Eines