VUEJS
De wikiserver
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"
Contingut
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
