Vue.JS
Aspectos Básicos
David Daza
Full Stack Developer - Random Monkey
@ddazal
Platzi
Lugar · Bebidas · Comida
Antes de empezar
Nombre: Platzi Invitados GPRS
Password: invitados_platzi
Red WiFi
Recursos
¿Qué es Vue.js?
Declarativo
Semántico
Flexible
Documentación
¿Cómo empezar?
1. Crea un archivo HTML y usa el script de Vue
<script src="https://unpkg.com/vue"></script>2. Crea una instancia de Vue
new Vue({
el: '#demo'
})3. Agrega datos
new Vue({
el: '#demo',
data: {
message: 'Hola Vue!'
}
})4. Muéstralos
<div id="app">
<h1>{{ message }}</h1>
</div>1
2
3
4
1. Render declarativo
2. Componentes
3. Client-side routing
4. Manejo de estado
Directivas
- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-slot
- v-pre
- v-cloak
- v-once
v-show
v-if, v-else, v-else-if
Modifica la propiedad display de CSS, por tanto, el elemento siempre está presente en el DOM
Es utilizado para renderizar un elemento de manera condicional
v-on
v-bind
Nos permite enlazar métodos con eventos comunes
Nos permite enlazar datos de la instancia de Vue con atributos de los elementos HTML
Reto 1
Agregar un botón que permita reiniciar el contador
Boilerplate:
Solución:
v-for
Nos permite mostrar una lista de items basados en un arreglo o en un objeto
Reto 2
Haz que los botones para votar funcionen y muestra la suma total
Boilerplate:
Solución:
¡Hay más!
Filtros
Props
Mixins
Modificadores
Ciclos de vida
Manejo de estado
Directivas personalidadas
Routing
Animaciones
SSR
¡GRACIAS!
@ddazal
Vue.JS
By David Daza
Vue.JS
Slides para Meetup de Vue.JS en Bogotá. Febrero 20, 2019.
