Vue.JS

Aspectos Básicos

David Daza

Full Stack Developer - Random Monkey

@ddazal

Platzi

https://platzi.com/

Lugar · Bebidas · Comida

Antes de empezar

Nombre: Platzi Invitados GPRS

Password: invitados_platzi

Red WiFi

Recursos

Slides: https://slides.com/ddazal/vue-js-aspectos-basicos#/

Codepen: https://codepen.io/collection/nxzdwk/

Github: https://github.com/ddazal/vue-js-basics

¿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. 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:

https://codepen.io/ddazal/pen/omqPQX

Solución:

https://codepen.io/ddazal/pen/qgKNbr

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:

https://codepen.io/ddazal/pen/Vgxgpj

Solución:

https://codepen.io/ddazal/pen/ErRyyg

¡Hay más!

Filtros

Props

Mixins

Modificadores

Ciclos de vida

Manejo de estado

Directivas personalidadas

Routing

Animaciones

SSR

¡GRACIAS!

@ddazal