FRAMEWORKS
FRONT
Instalamos Vue 3
- Se recomienda leer el Quick Start de la documentación.
- Para crear un proyecto actualmente recomiendan usar
Proyecto vue
Anteriormente, se usaba la estructura de webpack, ahora se parece más y concuerda con la típica estructura de Vite.
¿Te recuerda al mkweb?
.VUE
Vamos a trabajar con la "Options"
Repasando el componente más básico
Creando y usando nuestro propio componente
<template>
<h1> {{ name }} </h1>
</template>
<script>
export default {
name : 'todo-list',
data () {
return {
name : 'Pruebas'
}
}
}
</script>
<style scoped>
</style>
Ejercicio Individual
Ejercicio Individual
- Al introducir los 3 campos válidamente se añadirá una nueva fruta.
- Añade una última fila a la "factura" que ponga Total : y salga el total de la compra.
- Añade debajo una posibilidad de borrar/cancelar una compra.
Lo hacemos en directo
Siguiente ejercicio en grupo
Pues lo mismo pero con VueJS :P
¿ Recuerdan este ejercicio ?
- Le ponemos validaciones a medida que el usuario va haciendo blur
- Le añadimos feedback visual si el formulario ya está correcto o si hay algo mal (deshabilitamos botón)
- Añadimos un buscador por texto y/o buscador por cada campo
Cosas que puntuan
Siguiente ejercicio en grupo
Pensando en componentes
Divide y vencerás
Divide y vencerás
Este contenedor podría ser nuestro App.vue
Divide y vencerás
Esto podría ser un componente, que se encarga de cargar y mostrar el listado de commits CommitsList.vue o CommitsLoader.vue
Divide y vencerás
Esto podría ser un componente, que se encarga de cargar y mostrar el listado de ramas BranchesSelector.vue
Divide y vencerás
Esto podría ser un componente, que se encarga de recibir un objeto de tipo commit y representarlo en la pantalla Commit-item.vue
Teóricamente
<div id="app">
<h2>últimos commits del repo</h2>
<branches-selector/>
<commit-list/>
</div>Nuestro App.vue
<div class="branches">
<div class="branch"
v-for="branch in branches">
<input type="radio">
<label>{{branch.name}}</label>
</div>
</div>Nuestro BranchesSelector.vue
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item></commit-item>
</div>
</div>Nuestro CommitList.vue
<div class="commit">
<!-- all the display -->
</div>Nuestro CommitItem.vue
<div id="app">
<h2>últimos commits del repo</h2>
<branch-selector/>
<commit-list/>
</div>Nuestro App.vue
Recuerda que tendrás que declarar en el módulo de el App.vue que se están usando dos componentes
import CommitList from './components/CommitList';
import BranchSelector from './components/BranchSelector';
export default {
name: 'App',
components: {
CommitList,
BranchSelector
},
};Comunicar un componente con otro
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item></commit-item>
</div>
</div>Necesitas indicarle al componente <commit-item> que quieres que trabaje y dibuje un determinado commit que tu te has encargado de encontrar y que de hecho está dando vueltas en el v-for
props
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item :dato="commit">
</commit-item>
</div>
</div><template>
<h2> El nombre del commit {{ dato.name }} </h2>
</template>
<script>
export default {
name : 'commit-item',
props : [ 'dato' ]
}
</script>props
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item :dato="commit">
</commit-item>
</div>
</div>De esta manera le estamos pasando como atributo o como propiedad al componente <commit-item> nuestro objeto o variable commit y el nombre del atributo que hemos usado ha sido 'dato'
Pregunta: ¿por qué he puesto los : ?
<template>
<h2> El nombre del commit {{ dato.name }} </h2>
</template>
<script>
export default {
name : 'commit-item',
props : [ 'dato' ]
}
</script>De esta manera, si el componente quiere usar y acceder a ese commit que le han pasado, el ha de indicar que le llega una propiedad externa con el nombre "dato" para poder usarla
props
Probamos esto con el todo-list en directo
Comunicación de dentro hacia afuera
<!-- Esto sería en el fichero list.vue -->
<div class="lista">
<list-item :item="item" v-for="item in items" />
</div
<!-- Esto sería en el fichero list-item.vue -->
<div class="item">
<span>{{item.name}} x {{item.price}}</span>
<button @click="borrarAEste(item.name)">Borrar</button>
</div><!-- Esto sería en el fichero list.vue -->
<div class="lista">
<list-item
:item="item"
v-for="item in items"
v-on:borrarFruta="doThis"
/>
</div>
methods : {
doThis (nombreFruta) {
console.log(nombreFruta)
}
}Paso 1. Definimos un evento
<div class="item">
<span>{{item.name}} x {{item.price}}</span>
<button
@click="$emit('borrarFruta', item.name)">Borrar</button>
</div>Paso 2. Ejecutamos/emitimos ese evento en el componente hijo
<div class="item">
<span>{{item.name}} x {{item.price}}</span>
<button
@click="$emit('borrarFruta', item.name)">Borrar</button>
</div>Resultado final
<div class="lista">
<list-item
:item="item"
v-for="item in items"
@borrarFruta="doThis"
/>
</div>
Spoiler
- Realizamos al menos dos componentes
- Le añadimos feedback visual si el formulario ya está correcto o si hay algo mal (deshabilitamos botón)
- Añadimos un buscador por texto y/o buscador por cada campo
Cosas que puntuan
Siguiente ejercicio en grupo
IMPORTANTE
Antes de picar nada ni de crear repo ni nada, papel y lapiz.
Dibujen la interfaz en papel y piensen como la quieren trocear, que componentes creen que deberían de hacer, de que componente se encargaría cada uno, que cada uno tenga claro lo que va a hacer su componente y lo que necesita del otro, definir que propiedades necesitarás que te pasen para funcionar, etc etc
Vue Router
Router
index.html
<router-view>
</router-view>
V 3.0 Ejercicio
Creamos un proyecto con router.
Vamos a realizar un proyecto con una vista en modo lista donde mostramos la previsualización de unos elementos, en este caso de los usuarios y donde cada cajita tiene un botón de "ver más".
Al clickar en ver más navegamos a /details/:id y en esta vista vamos a renderizar una vista nueva donde vamos a buscar a la api ese usuario a la API y donde mostramos todos sus campos y un botón de "volver atrás"
Curso de Frontend EOI-Telefonica Noviembre 2024. Cuarto Día VueJS Repaso
By Yunior González Santana
