Diferència entre revisions de la pàgina «VUEJS»
De wikiserver
(→Ejercicios) |
(→Ejercicios) |
||
| Línia 1.020: | Línia 1.020: | ||
</source> | </source> | ||
| + | |||
| + | '''Eventos :click''' | ||
| + | |||
| + | Crear dos inputs de tipo input(number) y un botón. Cuando se presione dicho botón mostrar la suma de los valores ingresados (usar método) | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| + | <body> | ||
| + | <div id="aplicacion"> | ||
| + | <p>Ingrese primer valor: | ||
| + | <input type="number" v-model="valor1"> | ||
| + | </p> | ||
| + | <p>Ingrese segundo valor: | ||
| + | <input type="number" v-model="valor2"> | ||
| + | </p> | ||
| + | <p>Ingrese primer valor: | ||
| + | <button v-on:click="sumarValores">Sumar</button> | ||
| + | </p> | ||
| + | <p>El resultado de la suma es igual a {{suma}}</p> | ||
| + | </div> | ||
| + | |||
| + | <script src="https://cdn.jsdelivr.net/npm/vue"></script> | ||
| + | <script> | ||
| + | var app=new Vue({ | ||
| + | el: '#aplicacion', | ||
| + | data:{ | ||
| + | valor1: 0, | ||
| + | valor2: 0, | ||
| + | suma: '' | ||
| + | }, | ||
| + | methods: { | ||
| + | sumarValores: function() { | ||
| + | this.suma = parseInt(this.valor1) + parseInt(this.valor2); | ||
| + | } | ||
| + | } | ||
| + | }) | ||
| + | </script> | ||
</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. | ||
<source lang="javascript"> | <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> | </source> | ||
Revisió del 13:18, 19 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
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
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>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
Crear Nuestro primer Componente Básico
<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
},
methods:
{
}
});
</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>
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>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>'
});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="(index, dato) in datos"> <!--añadimos indice-->
<peliculas :key="index" :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: ['key','titulo', 'imagen'],
template: `<div>
<img width="100px" v-bind:src="imagen" v-bind:alt="titulo"/>
<h2> {{titulo}}: {{key}} </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>Ejercicios
v-if, v-else, v-else-if, v-show
Tenemos dos inputs de tipo passwords y muestre un mensaje en caso que sean iguales
<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=new Vue({
el: '#aplicacion',
data:{
clave1 : '',
clave2 : ''
}
})
</script>
</body>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
<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=new Vue({
el: '#aplicacion',
data:{
dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
}
})
</script>
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
}]<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=new Vue({
el: '#aplicacion',
data:{
personas: [{
nombre: 'Jose',
edad: 12
},{
nombre: 'Ana',
edad: 43
},{
nombre: 'Pedro',
edad: 4
},{
nombre: 'María',
edad: 12
}]
}
})
</script>
</body>
Eventos :click
Crear dos inputs de tipo input(number) y un botón. Cuando se presione dicho botón mostrar la suma de los valores ingresados (usar método)
<body>
<div id="aplicacion">
<p>Ingrese primer valor:
<input type="number" v-model="valor1">
</p>
<p>Ingrese segundo valor:
<input type="number" v-model="valor2">
</p>
<p>Ingrese primer valor:
<button v-on:click="sumarValores">Sumar</button>
</p>
<p>El resultado de la suma es igual a {{suma}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
valor1: 0,
valor2: 0,
suma: ''
},
methods: {
sumarValores: function() {
this.suma = parseInt(this.valor1) + parseInt(this.valor2);
}
}
})
</script>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.
<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>
