Sie sind auf Seite 1von 41

Bienvenidos al Curso Profesional de VueJS

Porque VueJS?
Su facilidad de aprendizaje y uso con respecto a otros frameworks y libraries como
ReactJS, su rendimiento comparado con AngularJS y la facilidad para usarlo y adaptarlo a
proyectos tanto grandes como pequeños, ha hecho que Vue gane cada vez más
popularidad.

En este Curso veremos no solo todo el sistema de vue sino q tambien veremos
herramientas para mejorar como desarrolladores entre las q tenemos:
 Vuex
 Vue Router
 Deploy de nuestra aplicacion
y muchas cosas mas que nos ayudaran a ser mejores profesionales de VUE.JS

Introducción a VueJS

Recomendación:
Si aún no tienes conocimientos básicos, te invitamos a ver el curso Básico de
VueJS aquí
Acerca de VueJS:
 Tiene complejidad inherente y complejidad instrumental.
 La complejidad inherente es la que se hereda del proyecto y no se puede
modificar.
 La complejidad instrumental es la que nosotros podemos controlar. Es el precio
que pagamos para resolver la complejidad inherente (herramientas).
-** VueJS** puede ser definido como el Framework Web Progresivo porque nos
permite progresivamente ir escalando nuestra aplicación a medida que lo vamos
necesitando.
Características del Framework:
 Está orientado a la vista.
 Es reactivo. Se puede enlazar el código con la vista. Se puede actualizar desde
cualquiera de los dos y se sincroniza todo en un círculo virtuoso.
 Está basado en Core, es una librería pequeña, resuelve algo específico y
concreto. Sin embargo es escalable y extendible.

Complejidad
Inherente vs. Instrumental
.
Inherente: la que heredamos del proyecto y no podemos modificar.
Instrumental: la que podemos controlar, es el precio que pagamos para resolver
la complejidad inherente.
.
Estas complejidades tiene que ser parejas, por lo cual tienen que crecer o
decrecer a la par.
.
A Vue lo podemos definir como el framework web progresivo.
.
Características más importantes de Vue:
 Está orientado a la vista: Se encarga solamente de la parte visual.
 Es reactivo: puedo tener enlazo con el código, donde se pueden actualizar
mutuamente desde cualquier de las dos direcciones.
 Está basado en un core: esto significa que es una librería pequeña,
resuelve algo especifico y concreto, pero es escalable, al core se le pueden más
cosas para aumentar la complejidad. Las características principales de este
core son: rendering declarativo y el sistema de componentes.
.
Las flechas rojas simbolizan el core de Vue, lo que hace por si solo.
Las flechas verdes son las cosas que podemos ir agregando a medida la vayamos
necesitando.
.
El renderizado declarativo está ligado al concepto de reactividad, implica tener un
estado centralizado desde donde podemos compartir información hacia la vista de
manera dinámica, es decir que cada vez que este estado mute se va a ver
reflejado en la vista y viceversa.
.
El sistema de componentes propone que podemos construir nuestra aplicación
mediante pequeños módulos HTML. Cada módulo maneja su propio estado y su
propia semántica, podemos establecer como se van a llamar los componentes.
.
En los archivos .vue podemos meter toda la lógica de nuestros componentes, lo
cual permite no solo tener una modularización a nivel lógico sino que a nivel físico.
Podemos tener componentes con HTML cada uno en su propio archivo, esto
genera un código fácil de mantener y cada componente tiene todo lo que necesita
para existir, su HTML, CSS y JS.
Herramientas y Experiencia de Desarrollo + Archivos
.vue

Enlace para descargar Node.js


Enlace a la extension de chrome
Enlace a la documentación de Vue-CLI

VUE-CLI, generados de aplicaciones para vue. para instalar vue-cli 3,


npm install -g @vue/cli

Los vuefiles o “single file components”, son estructuras que nos permiten


trabajar con un todo el componente detro de un mismo archivo, un archivo .vue va
a contenter la lógica (script), el estilo (diseño) y la estructura html (template), que
necesitamos para que ese elemento exista.
Los vuefiles son compilados y el resultado es interpretable por el Browser

CLI - Hello World

Para los que como yo, primero vieron el curso básico de Vue (que salió hace unos
meses) y después vino a ver este (que salió hace un par de años), para poder
iniciar la aplicación se debe hacer lo siguiente:
 vue create nombre_aplicacion
 npm run lint
 npm run build
 npm i -g serve (si están en linux quizá deban escribir sudo antes del
comando)
 vue ui (opcional) Este solo les mostrará de una manera visual los proyectos
de vue que tengan creados.

desde cli-vue 3, la forma de crear un nuevo proyecto es:


vue create platzi-music

Webpack

Webpack: Tiene el propósito de trabajar con diferentes archivos en nuestro


desarrollo local, pero generando un único archivo, aunque podemos configurarlo
para que sea uno, dos o tres archivos, eso depende de cómo lo necesitemos.
Webpack también nos permite agregar archivos de CSS, archivos .svg, imágenes,
urls y contenidos. Esto quiere decir que se puede compilar archivos de JavaScript
y archivos estáticos.

Por si se lo perdiero estos son los comando:


$ vue init webpack-simple mi-proyecto
$ cd mi-proyecto
$ npm install
$ npm run dev
$ npm run build(produccion)

Cuál es la diferencia entre webpack-simple y webpack cuando se usa vue-cli?


Hay varias diferencia…
*no solo la cantidad de **“herramientas” **que trae. Webpack obviamente trae mas (entre ellas
esta vue router).
*Jerarquía de archivos (como y donde estas ubicados los archivos no solo de configuración
si no los que vas a crear vos como desarollador).
***Complejidad **de la app a desarrollar (al principio de el curso mencionaron la complejidad
inherente) Si necesitas navegación obviamente vas a utilizar webpack, y si ademas de
navegación necesitas analytics por cada “pagina” vas a utilizar vuex.js.
*Básicamente esas son las diferencias si hay alguna mas que sumen su comentario

Babel

Babel es un transpilador de código. Una herramienta que transforma y compila


nuestro código. Esto quiere decir que nos permite escribir en un código compatible
con cualquier navegador.

Babel es una herramienta que nos permite transformar nuestro código JS de última
generación (o con funcionalidades extras) a JS que cualquier navegador o versión de
Node.js entienda.
babel-core: es lo que nos permite la compilación
babel-loader: es la regla que nos permite transformar nuestro código a través de
Webpack
babel-preset-env: es el conjunto de plugins que utiliza babel para transformar
nuestro código

Eslint

Eslint es un linter de código. Es una herramienta que nos permite hacer dos tipos
de chequeo. Por un lado nos permite establecer un estilo de código homogéneo
para todo el equipo de desarrollo. Permite definir ciertas reglas para que todos los
desarrolladores de ese proyecto las cumplan y las apliquen en el código.
Por otro lado nos facilita la configuración usando reglas predefinidas. Estas reglas
se instalan como librerías de NPM que ya fueron pensadas o desarrolladas por
otras personas para que podamos utilizarlas.

La nueva Vue CLI 3 ya permite crear proyectos con ESLint integrado y podemos olvidarnos de
toda la configuración complicada de webpack.
Ejecuten lo siguiente:
npm uninstall vue-cli -g
y después
npm install -g @vue/cli
Con eso tendrán la última versión, que les deja crear y administrar proyectos de forma muy
sencilla y visual.
Para crear un proyecto sólo usa
vue create nombre-proyecto
Y para explorar de forma grafica el proyecto usa
vue ui
Es mucho más facil así porque puedes seleccionar desde ahí la instalación de los paquetes
que necesitas (entre ellos el ESLint, pero sin problemas de configuración)
Saludos!

Para ahorrarles el viaje aqui les va


Eslint
npm install eslint-config-standard

Dependencias de las dependencias


npm install --save-dev eslint-config-standard eslint-plugin-standard
eslint-plugin-promise eslint-plugin-import eslint-plugin-node

correr los comandos de instalación para los plugins de eslint


npm i -D eslint-loader
npm i -D eslint-plugin-html
npm i -D eslint-plugin-vue
configurar .eslintrc de la siguiente forma
{
"extends": ["plugin:vue/recommended"],
"rules": {
"no-new":0
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2017,
"sourceType": "module"
},
"env": {
"node": true,
"es6": true
},
"plugins" : ["vue" , "html"]
}

Eslint es un linter de código. Es una herramienta que nos permite hacer dos tipos
de chequeo. Por un lado nos permite establecer un estilo de código homogéneo
para todo el equipo de desarrollo. Permite definir ciertas reglas para que todos los
desarrolladores de ese proyecto las cumplan y las apliquen en el código.
 es importante decir que al ser un curso desactualizado, es poco util lo visto
en esta clase. pues ya cli-vue 3, se configura automatico el eslint al momento de
crear un proyecto sencillo o con valores default.
SASS y BULMA

Una manera más limpia de hacer imports de node_modules es:


@import"~bulma/bulma.sass";

En cli-vue podemos instalar pre-procesadores.


# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus
y el archivo del componente verificamos q esta activo con:
<stylelang="scss">
h1 {
color: red;
}
</style>

PUG

PUG nos permite crear HTML con otro tipo de sintaxis, escribiendo menos código,


y a través de webpack compilarlo para que funcione en el navegador.

npm i -D pug-loader

Ejercicio de SASS y PUG


En este ejercicio te proveemos un par de Mockups para que
pongas en práctica los conocimientos adquiridos durante los
videos anteriores, recuerda que es muy importante compartir, así
que te invito a crear tus propios mockups, compartir tu código en
el sistema de discusiónes y a retroalimentar a más usuarios,
revisando su código, ayudándolos a resolver errores e inclusive
proponiendo mejoras.
Este es el primero de los ejercicios que debes realizar:
Ejercicio Avanzado de Pug y SASS
En este ejercicio te proveemos un par de Mockups para que
pongas en práctica los conocimientos adquiridos durante los
videos anteriores y para que al final puedas crear con todo lo
aprendido en este curso otra aplicación, con estilo muy
profesional que sin lugar a dudas se verá muy bien en tu
portafolio.
Recuerda que es muy importante compartir, así que te invito a
crear tus propios mockups o compartir tu código en el sistema de
discusiónes y a retroalimentar a más usuarios, revisando su
código, ayudándolos a resolver errores e inclusive proponiendo
mejoras.

Este es el segundo de los ejercicios que deberás realizar y más


adelante darle vida utilizando vue.js:

Aquí encuentras a detalle las vistas que debes crear:


Expresiones

Las expresiones son esos parámetros que ponemos entre llaves dentro de
nuestro HTML y nos permiten representar en pantalla valores de nuestro Vue
Model.

Las expresiones nos permiten representar valores del vue model. pueden representarse
variables, objetos, operaciones aritmeticas y llamada a funciones en los methods.

Directivas

Las Directivas son pequeños marcadores o atributos que podemos agregar a


nuestros elementos HTML que nos sirven para aplicar transformaciones en esos
mismos elementos.

Cabe aclarar que en el uso de la directiva v-if si queremos mostrar contenido entre
v-if y v-else cuando la condición sea cierta, hay que indentar nuestro código, de lo
contrario nos dara error, ejemplo:
p(v-if="showValue")
span Mensaje 01
p(v-else)
span Mensaje 02
En el caso de arriba funciona, pero si lo hacemos de la siguiente manera nos dará
error:
p(v-if="showValue")
span Mensaje 01
p(v-else)
span Mensaje 02

Las directiva Vue se utilizan para manipular el dom estas comienzan con “v” que
se refiere al nombre del FromeWork, existe muchas directivas algunas para los
eventos como v-on como tambien para interactuar que son v-show, v-if, v-else, v-
else-if.

Existen dos directivas en Vue para mostrar contenido condicional: v-if & v-show.


v-if nos renderiza el elemento en el DOM cuando la condición se cumple,
mientras que v-show nos muestra el elemento que ya se encuentra renderizado en
el DOM.
De esta forma, dependiendo de la interacción que tendrá el usuario, nos
convendrá usar una u otra.
Si un elemento será constantemente mostrado/ocultado, nos conviene que ya esté
renderizado para una mejor performance mediante v-if.
Mientras que si el elemento se mostrará eventualmente dado un evento
específico, nos conviene renderizarlo sólo en ese instante mediante v-show.

Data Binding

Data Binding implica que podamos enlazar datos desde nuestra vista a nuestro
código y desde nuestro código a nuestra vista. Esto quiere decir que cada vez que
algo se cambie en el código, va a reflejarse automáticamente en la vista, gracias al
concepto de reactividad, pero también cada vez que el usuario busca algún dato
en un campo de texto o interactue con otros sitios a través de eventos también
vamos a poder ver reflejados esos cambios en el código.

v-model: Nos permite que el usuario pueda ingresar información y que esta se
refresque automáticamente en nuestro código
v-bind: Nos permite cualquier atributo de un elemento de HTML con cualquiera de las
propiedades de Vue Model

Bind (enlazar). en Vue un enlace es mutuo. Si algo se cambia desde el código se ve


reflejado en la vista y si se cambia la vista se verá reflejado en el código.

Data Binding, implica que podamos enlazar datos desde nuestra vista a nuestro código y
desde nuestro código a nuestra vista. esto nos permite capturar la interaccion del usuario
con la UI.
La directiva v-model permite interactuar el dom con el codigo directamente
asignando datos entre si.

Computed properties

Computed Properties son son propiedades que se calculan a partir de los valores


de otras propiedades, esto quiere decir que podemos crear propiedades dinámicas
que van a ser regeneradas cada vez que otras propiedades cambien su valor.

un computed property es una propiedad que cambia dinamicamente, esta puede llamarse
dentro del template pero no puede ser invocada como si se puede hacer con un método.
Las computed properties solo cambian o se reevaluan cuando cambia algo en un componente
de la aplicación, los métodos se pueden invocar cuando sea quiera, por ejemplo por medio de
un boton.

Un metodo computed son valores que se calculan a partir de varias propiedades es decir
pueden mutar una propiedad sin manipularla directamente.

Watchers

Los Watchers nos permiten ejecutar código a partir de que una propiedad de


nuestro View Model cambia.
A diferencia de las Computed Properties no devuelven un valor, no son
propiedades y tampoco pueden ser utilizadas en expresiones.

Los watchers se enlazan directamente sobre una variable del view model, por lo
cual se tienen que llamar de la misma manera.

Los Watchers nos permite ejecutar código a partir de que una propiedad de nuestro view
model cambia. A diferencia de las Computed Properties no devuelven un valor, no son
propiedades y tampoco pueden ser utilizadas en expresiones.

Los Watchers nos permiten ejecutar código a partir de que una propiedad de nuestro


View Model cambia.
A diferencia de las Computed Properties no devuelven un valor, no son propiedades y
tampoco pueden ser utilizadas en expresiones.
Eventos

Los Eventos tanto como los inputs son la manera que el usuario tiene para
interactuar con nuestra aplicación.

s:
<!-- la propagación del evento 'click' será detenida -->
<a v-on:click.stop="doThis"></a>
<!-- el evento 'submit' no recargará la página -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- los modificadores pueden encadenarse -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- solo el modificador -->
<form v-on:submit.prevent></form>
<!-- usa el modo captura cuando agregas _listener_ de eventos -->
<div v-on:click.capture="doThis">...</div>
<!-- solo dispara la función controladora si event.target es este
elemento -->
<!-- quiere decir, no un elemento hijo -->
<div v-on:click.self="doThat">...</div>

<!-- el evento 'click' será disparado una vez como máximo -->
<a v-on:click.once="doThis"></a>

Los evento permiten manipular el don o darle funcionalidad a nuestro template existente el
evento se crea apartir con v-on: simplificado es @:
Los Methods se crean funciones realacionada con evento pero no necesariamente es un
evento… pueden ser funcionalidades aparte

Los Eventos tanto como los inputs son la manera que el usuario tiene para
interactuar con nuestra aplicación.
se llaman con la directiva v-on: o con un @
Evento click: v-on:click
Shorthand:@click
y la funcion debe estar en
methods: {
funcion () {
}
}

Evento click: v-on:click
Shorthand: @click

También están los modificadores de eventos que serian los siguientes:


.stop
.prevent
.capture
.self
.once
.passive
y se pueden usar de la siguiente manera
<! - la propagación del evento click se detendrá ->
<a v-on:click.stop="doThis"></a>

<! - el evento submit no recargara la página ->


<form v-on:submit.prevent="onSubmit"></form>

Integración a Platzi Music

La principal ventaja para las computed properties es que son almacenadas en caché y es por
eso que su consulta se hace de manera eficaz.
Por eso es un error usar una computed property para datos que no son reactivos ya que
siempre regresaran el mismo valor a pesar de que cambien. Por ejemplo:
computed: {
getDate () {
return new Date.now()
}
}
El anterior ejemplo siempre regresará el mismo resultado ya que no tiene en sus
dependencias ninguna propiedad reactiva.
Te dejo el link de la documentación oficial para que puedas ampliar la info.

Una de las ventajas de Vue es que se encarga de eliminar los EventListener


cuando se destruyen las vista.

Ejercicio de Manipulación del DOM


¿Qué tipo de material es este?
Hola, espero que hasta aquí estés disfrutando el curso, recuerda
que para dominar un lenguaje o framework de programación
debes practicar. Justamente por esto he creado este material para
ti, puedes hacerlo en tu entorno local o puedes hacerlo en alguna
herramienta como codepen.io. La idea es que practiques lo que
has aprendido hasta este punto del curso, te invito a que revises
el código de tus compañeros y que te animes a dar feedback así
todos podrán ir creciendo.
Manipulación del DOM con Vue.js
Este ejercicio consiste en practicar la funcionalidad de
renderizado declarativo que provee Vue.js, para eso vamos a
crear una pequeña aplicación web que nos permita hacer
seguimiento de tareas utilizando el local storage del Browser. Así
vamos a reforzar los conceptos básicos que nos ofrece Vue.js
para manipular e interactuar con el DOM.

Ejercicio:

 Crear dentro de data una propiedad “name” de tipo String y


una propiedad “tasks” de tipo de Array.

 Agregar una expresión para mostrar el valor de name y


utilizar la directiva apropiada para para mostrar en una lista
cada uno de los elementos dentro de task. Cada “task” es un
objeto con una propiedad “title” y otra “time”. Agreguemos las
expresiones necesarias para que en cada tarea podamos
visualizar ambas propiedades.

 Agregar funcionalidad para crear una nueva tarea:

o Vamos a necesitar una nueva propiedad llamada


“newTask” que sea un Object. Dentro de este objeto también
agregamos una propiedad “tilte” de tipo String y una propiedad
“time” de tipo Number. Recuerda inicializar las propiedades
con valores default.
o Vamos a crear un método llamado “addTask” que
agregue una nueva tarea al array “tasks”. Una vez agregada
también va a reiniciar los valores dentro de “newTaks”. Ten en
cuenta que antes de agregar la propiedad debemos chequear
con los valores de “newTask.title” y “newTask.time” existan
(sean distintos de “falsy”). Por otro lado es importante que
cada elemento nuevo que agreguemos al array de “tasks” sea
un objeto nuevo y no la instancia de “newTask”.
o Vamos a agregar el HTML, para esto necesitamos dos
“inputs” y un “button”. También debemos agregar las directivas
correspondientes para enlazar el código con la vista.
o Creamos también una funcionalidad para cancelar,
para eso debemos crear un método llamado “cancel” que
simplemente reinicie los valores de las propiedades de
newTask. Recordemos agregar un button de HTML donde
enlazar este nuevo método.
o Es momento de saber cuantas horas llevamos
trabajadas, para eso vamos a crear una computed property
llamada “totalTime” donde se recorran todas las tareas y se
calculo el total del tiempo trabajado. También vamos agregar
un elemento HTML con la expresión necesaria para visualizar
la propiedad.
o Debemos integrar la app con el local storage del
browser. Dentro del metodo “addTask”, guardamos toda la
lista de tareas en dicho storage usando este metodo:
“localStorage.setItem(‘tasks’, JSON.stringify(this.tasks))”.
o Guardando las tareas en el browser podemos persistir
la información aunque estemos cerrando o refrescando la
página. Además, al momento de crearse el componente,
debemos leer esta información para poder cargar la lista de
tareas. Para eso dentro del hook “created”, escribimos el
siguiente código: “this.tasks =
JSON.parse(localStorage.getItem(‘tasks’)) || []”
o Lo último que nos queda es poder eliminar las tareas
que ya no queremos. Para eso vamos a crear un método que
se llame “removeTask”. Este método debe recibir por
parámetro el indice de la tarea y podemos utilizar ese indice
(en conjunto con el método “splice” de Array) para eliminar el
elemento. Recordemos que tendremos que agregar un botón
por cada tarea y cada uno de estos se encarga de llamar al
método “removeTask” enviando por parámetro el indice
correspondiente. Recordemos invocar la funcionalidad que ya
pusimos en “addTask”, para actualizar el local storage del
Browser.
o Por último vamos a mejorar la UI, cuando no haya
tareas podemos mostrar un mensaje que indica que no hay
ninguna tarea cargada y por otro lado ocultar el lista vacía.

Si en algún punto del ejercicio te sientes perdido, te dejo la


versión que yo hice para que puedas consultarla en cualquier
momento: https://codepen.io/ianaya89/pen/NgEeVO

Servicios

Servicios, es un concepto es una forma de llamar a los archivos que van a tener
cierta logica de negocios.

Servicios son Api-Key eterna que no permiten aceder a diversas forma de


informacion

Fetch API & Trae

Trae es entonces una alternativa al axios??


Si, y conceptualmente son muy similares. Trae fue desarrollado en base a lo que Axios ofrece.
La diferencia esta en que Trae usa la nueva API Fetch del browser y Axios utiliza el
tradicional XmlHttpRequest.

Mi resumen creo que se explica bastante bien todo ojala a alguien le sirva
import platziMusicService from './platziMusicService'//esto no llama a un
archivo si no llama al export de platzi-music es un importe de archivo
pero diferente el .7 es por que esta al mismo nivel
const trackService = {}//objeto basio
trackService.search/*metodo search*/ = function (q/*indica query*/){
const type = 'track'//tipo de busqueda
//usamos promice, es una manera de rescribir los callback o codigo
sincronico usando objetos que complen con determinada caractersticas
principalmente tiene dos caracteristicas(metodo then, catch) ¿cuando se
va a repolver? y ¿cuando va a fallar?
//leer trae api y dice los metodos basicos
platziMusicService.get('/search'/*ejecuta el empoint serch dentro de
la api platziMusic*/,{
params:/*objeto*/ {q, type}
//{q:q, type:type} parametros que viajan dentro de la url
get.http
})
.then(res => res.tada)
/*.then((res) =>{return res.tada}) para mas de una linea se mantiene
el return y las llaves
.then(function(res){
return res.data//respuesta de la api
})*/
}
exportdefault trackService

Trae: Cliente HTTP minimalista para el navegador. Basado en Fetch API, permite que el
futuro sea a prueba, tenga una implementación limpia y soporte de transmisión entre otros
recursos.

Consumir API\'s REST

Para los que tienen problemas con la API de Platzi Music pues esta ya no
funciona. Les dejo un listado de APIs:
 Dog API => Es una API de perros y con la cual voy a reemplazar a Platzi
Music. La razón, es sencilla de utilizar y puedo subir contenido de mi perro
tambien 😄
 NASA api => Conjunto de APIS de la NASA, excelente material y muy
interesante
 Jikan API => API de anime bastante completa
 POKEMON API => API de pokemon
En mi caso ya no utilizare TRAE sino en cambio el Fetch que incorpora JS
No olviden cambiar la direccion de la api en config.js
Les dejo el link de la documentacion de MDN de como hacer fetch a apis
Si necesitas ayuda o quieres dar aportes no olvides utilizar la sección de
comentarios
NUNCA PARES DE APRENDER

trackService.search() esta retornando indefinido por esto falla, puedes compartir tu archivo
track.js para ayudarte a encontrar el problema.
1
La API es wrapper a la API de Spotify, la cual es gratuita pero para utilizarla tenes que
autenticar los request y ver como hacer eso se iba del alcance del curso. De hecho antes al
API de Spotify tenia un comportamiento diferente y tuvimos que crear este wrapper.
Aca podes ver el codigo de la API por si te interesa.

Component

Child y local son simplemente nombres que elegimos. Se supone que todos los componentes
que re utilizas son hijos de otro componente.
En realidad la diferencia esta en como instalas un componente, esa instalacion puede ser
local o global. En el video el ChildComponent es un componente local, eso quiere decir que
lo inyectas en el main.js y lo haces accesible inmediatamente en todos los componentes.
Eso esta bueno porque es mas facil pero por otro lado estas cargando algo en lugares donde
seguramente no lo utilices.
La otra manera es la instalacion local (de ahi el LocalComponent) y lo unico que cambia es
que en lugar de registrarlo a nivel de aplicacion, lo haces a nivel de componente, es decir que
en cada componente especificas cual es son los componentes hijos que va a tener disponible.
Pero recorda que en definitiva todos los componentes (menos el principal), son child (o hijos),
ya que los insertas dentro de otros.

Los componentes pueden ser globales para estar disponibles en toda nuestra aplicacion o
ser llamados de forma local en el archivo donde va ha ser usado.
Es recomendable hacer usos de los componentes y llamarlos de forma local.

Los componentes son parte de logica por ejemplo un boton donde puede ser reutilizable
en otro view componente se pueden utilizar de forma global como tambien de manea
local, los componente globales son aquellos que pueden ser utilizando en cualquier
componente relacionado con el proyecto y los componente los locales solo pueden ser
utilizados por el componente que lo llama o importa

Creación de componentes

Hola, el uso de PUG es solo un valor agregado extra al curso. Puedes usar perfectamente
HTML para tu codigo, no hay problema con eso. Usar PUG o no, no es una buena o mala
practica. Ambas maneras son correctas. En mi opinion PUG permite un codigo mas limpio,
ordenado y rapido y suele usarse bastante en el ecosistema Vue pero no es un estandard. Por
lo cual sentite libre de usar HTML.

Hay algún orden en el que se debe escribir tanto la data, component, computed,
etc
Yo considero que debe ser:

1. Props
2. Data
3. Las funciones propias del ciclo de vida del componente (created , etc)
4. Methods
5. Computed
6. Watchers

Si no usas el export default, a la hora de hacer el import tenes que especificar el nombre
de la variable/funcion que tenes que importar.
Si directamente no usas el export no funciona porque no estas exportando el
componente/objeto, la idea de usar modulos es justamente exportar algun
codigo/funcionalidad para importar en otro archivo/modulo.

Reactividad

Al mutar/cambiar una propiedad de un objeto dentro de data, este si cambia pero


el watcher nunca se entera de ese cambio por lo tanto no se ve reflejado en la
página (no hay reactividad). Hay dos soluciones.
La de vue
// $set es una función del framework

// this.$set(<objeto a agregar una propiedad>, <nombre de la propiedad>,


<valor de esa propiedad>)

this.$set(this.person, 'lastName', 'Anaya')


La de ES6
// Esto va a crear un objeto nuevo y se va a asignar al objeto deseado.
agregando lo que hacia falta

// this.person = Object.assign({}, <Objeto que quiero mezclar> , { <Que


se va a incorporar> })

this.person = Object.assign({}, this.person, { a: 1, b: 2 })

¿Cómo es el sistema reactivo en VueJS?


 El comportamiento interno de un componente de Vue está muy asentado en
el patrón MVVM y en el patrón Observer. Para conseguirlo, Vue presenta un
sistema interno como es el siguiente:
Cada vez que instanciamos un componente en nuestra aplicación, Vue se encarga
de hacer 3 cosas:
1. Envuelve los atributos de su objeto de datos (data()) con un método getters
y setters que son usados para la obtención y modificación del datos.
2. Incluye un manejador que observar ante posible cambios de estado interno
que es el encargado de rerenderizar vistas.
3. Cuando tiene esto preparado, renderizar el template con dichos datos
interpolados en el DOM.

Por fin entiendo el porqué de la existencia de $set.


Si bien es mejor declarar dicha propiedad del objeto en la data inicial del componente.
Puede ser que en la app el usuario quiera agregar mas de un dato a su registro (teléfono
3) y por ende debemos reaccionar al cambio de ese valor de manera reactiva.

Los problemas de reactividad se resuelven con:


this.$set(this.objeto, ‘nuevaPropiedad’, ‘valorPropiedad’)
La otra forma con Ecmascript 2015
this.objeto = Object.assign({}, this.object, {nuevas propiedades})

Ciclo de vida

beforeCreate: se ejecuta justo después de la inicialización de la instancia.


created: se ejecuta cuando la instancia y los eventos, las computed properties, el data y
los métodos están creados. Normalmente se utiliza para inicializar propiedades del objeto
data con consultas HTTP Get.
beforeMount: se ejecuta justo antes de que se añada al DOM.
mounted: se ejecuta después de añadirlo al DOM. Se puede utilizar para inicializar
librerías que dependan del DOM.
beforeUpdate: se ejecuta cuando el data cambia, pero el DOM aun no ha plasmado los
cambios.
updated: se ejecuta después de que el data cambie y el DOM muestre estos cambios.
beforeDestroy: se ejecuta justo antes de eliminar la instancia.
destroyed: se ejecuta cuando la instancia, los eventos, directivas e hijos del componente
se han eliminado.

Hay que tener en cuenta que:


created: En esta instancia todavia no existe el DOM, por lo cual no puedo acceder
a elementos HTML.
mounted: En esta instancia ya existe el DOM y es posible acceder al mismo.
destroyed: En esta instancia el componente ya no existe mas y no va a ser
posible acceder a variables declaradas en data, a métodos, etc.
Es importante entender estas limitaciones a la hora de usar los Hooks del ciclo de
vida de los components.

Cada instancia de Vue pasa a través de una serie de pasos de inicialización


cuando es creada - por ejemplo, se necesita configurar la observación de datos,
compilar la plantilla, montar la instancia en el DOM y actualizar el DOM cuando
cambian los datos. En el camino, también se ejecutan funciones llamadas hooks
del ciclo de vida, lo que brinda a los usuarios la oportunidad de agregar su propio
código en etapas específicas.
Por ejemplo, el hook created puede ser utilizado para ejecutar código después que
una instancia es creada

El ciclo de vida o hook son evento que permiten manipular las etapas de un componentes
los hook son eventos, los hook son los siguiente beforeCreate, Create monted,
beforeUpdate, update, beforeDestroy, destroyed, cada uno de estos se utilizan para
insertar codigo segun lo que combengan.

Instancias de Vue
Se pueden utilizar todos los Hook, disponibles en la pagina de vue.js, hay esta el
diagrama de vida de un objeto.
Algunas instancias de son:
create () {
//se utiliza para obtener información, hacer peticiones http... ES
IMPORTANTE SABER QUE SE OPTIMIZA EL TIEMPO DE CARGA
},
mounted () {
//Es un paso después de create, ya que es cuando esta montado
} ```
Todos los Hook, se declaran como funciones, a nivel dela data.
Cada Hook debe de estar en el orden apropiado

Comunicación entre componentes padres e hijos

track es el nombre que se definió en los props, puedes llamarlo canción, item, tema como lo
quieras llamar, solo tienes que respetar que como lo llames en los props lo vas a usar en en
template.

La comunicacion de un padre a un hijo es por medio de propiedades, mientras q la


comunicacion de un hijo a un padre es por medio de eventos.

1. Los props nos permiten compartir propiedades entre componentes padres e


hijos.
2. Primero hago un fetch para traer los valores en el componente padre, y
finalmente paso por el props los valores al componente hijo

Con respecto a la clase .is-1by1, son clases de bulma para la Relación de


aspecto, que en este caso significa 1 x 1 (cuadrado), también existen para definir
directamente el tamaño de la imágenes.
Para relación de aspecto:
.image.is-square// 1x1
.image.is-1by1// 1x1
.image.is-5by4// 5x4
.image.is-4by3// 4x3
.image.is-3by2// 3x2
.image.is-5by3// 5x3
.image.is-16by9// 16x9
.image.is-2by1 // 2x1
.image.is-3by1 // 3x1
.image.is-4by5 // 4x5
.image.is-3by4 // 3x4
.image.is-2by3 // 2x3
.image.is-3by5 // 3x5
.image.is-9by16// 9x16
.image.is-1by2 // 1x2
.image.is-1by3 // 1x3
Para dimensión:
.image.is-16x16// 16x16px
.image.is-24x24// 24x24px
.image.is-32x32// 32x32px
.image.is-48x48// 48x48px
.image.is-64x64// 64x64px
.image.is-96x96// 96x96px
.image.is-128x128// 128x128px
más información: aquí
Comunicación de hijos hacia padres

Yo aplique lo de ‘is-active’ de esta forma. En el archivo App.vue al component


track le paso otra propiedad
pm-
track(:track="track":key="track.id"@select="setSelectedTrack":active="tra
ck.id === selectedTrack")
En el archivo Track.vue coloque una propiedad llamada active de tipo Boolean
props: {
track: {
type: Object,
required: true
},
active: Boolean
}
Y en el mismo archivo llamo la propiedad active para validar la clase
.card(:class="{ 'is-active' : active }")

Al componente se le agrega una clase con Data Binding. Es decir, que la clase va mostrarse
según la condicion que se haga con los datos.
En este caso:
<pm-track v-bind:class="{'is-active': t.id === selectedTrack}"></pm-
track>
La clase is-active se va a mostrar cuando ** t**, es decir, un objeto del array track al que se le
hace un ** v-for** cuya ID sea igual al componente que se ha seleccionado (ve que se está
imprimiendo varios componentes pm-track para enlistar las canciones individualmente).
Recuerda que en la clase, al seleccionar una de las tarjetas se le asigna a la variable
selectedTrack la ID de la cancion que se está seleccionando, porque cada componente por
decirlo de alguna manera, corresponde a una cancion.
Entonces como existe el dataBinding, en el momento que selectedTrack tenga la misma ID
que uno los elementos que se ha iterado en el bucle, el componente clickeado se va a mostrar
con la clase is-active.

Utilización de Slots

Otro contexto de uso de slots.


Imaginen los famosos mensajes de advertencia. En el hijo tienes declarada la
estructura, presentación y comportamiento. pero desde los componentes padres
puedes pasarle la informació que queires que proyecten. Advertencia,
Satisfacción, Error, etc.

El Slot en Vue es una funcionalidad inspirada en la especificación de Wed Components


con la finalidad de poder definir zonas de contenido distribuido. Es por ello que en este
artículo se presentan las principales características, su sintaxis y un ejemplo real de
implementación en Vue.Js.
Comunicacion entre Componentes Genericos - Event Bus
y Plugins

Vuex permite solucionar esto de una manera mas eficiente usando los modules de vuex,
esto igualmente se ve en el curso, recomiendo que vean el codigo y lo analizen pero yo
no lo haria paso a paso porque justo para esto se desarrollo Vuex el cual es creado por el
equipo de desarrollo de Vue
Event Bus y Plugins permite la comunicacion entre componentes que no tienes relacion
de padre/hijo sino q son componentes llamos desde distintos puntos de la aplicacion.

Buenas comparto solución del reto, primeramente creo un objecto dentro


de data llamado notification dicho objecto contiene dos valores booleanos
uno isOpen para mostrar el componente PmNotification y isSuccess para validar
el color de la notification a mostrar. Ademas de esos creo la variable results para
mostrar el numero de resultados encontrados.
pm-notification(
v-show="notification.isOpen",
:isSuccess="notification.isSuccess"
)
p(v-if="!notification.isSuccess" slot="body")
| No se encontraron resultados
p(v-else slot="body")
| Se encontraron {{ results }} resultados
data () {
return {
searchQuery: '',
tracks: [],
results: 0,
selectedTrack: '',
isLoading: false,
notification: {
isOpen: false,
isSuccess: false
}
}
}
Methods y watcher
methods: {
search () {
if (this.searchQuery.trim()) {
this.isLoading = true
trackService.search(this.searchQuery)
.then(res => {
this.results = res.tracks.total
this.notification = {
isOpen: true,
isSuccess: res.tracks.total > 0
}
this.tracks = res.tracks.items
this.isLoading = false
})
}
},
setSelectedTrack (id) {
this.selectedTrack = id
}
},
watch: {
notification () {
if (this.notification.isOpen) {
setTimeout(() => {
this.notification = {
...this.notification,
isOpen: false
}
}, 3000)
}
}
}
Notification component
<templatelang="pug">
.container
.columns
.column.is-6.is-offset-3
.notification(
:class=`{
'is-danger': !isSuccess,
'is-success': isSuccess
}`
)
slot(name="body") Algo anduvo mal

</template>

<script>
exportdefault {
props: {
isSuccess: {
type: Boolean,
required: true
}
}
}
</script>

Introducción a Vue Router

Características de vue-router:
 Permite crear rutas anidadas
 Es modular
 Permite crear rutas con parámetros
 Permite aplicar transiciones a las rutas
 Permite trabajar con el modo historial HTML5

Vue Router es el enrutador oficial de Vue.js


Se integra profundamente con el núcleo de Vue.js para facilitar la creación de
aplicaciones de una sola página con Vue.js (SPA). Las características incluyen:
 Ruta anidada / mapeo de vista
 Configuración de enrutador modular basada en componentes
 Parámetros de ruta, consulta, comodines
 Ver los efectos de transición impulsados por el sistema de transición de
Vue.js
 Control de navegación de grano fino
 Enlaces con clases de CSS activas automáticas
 Modo de historial HTML5 o modo hash, con recuperación automática en IE9
 Comportamiento de desplazamiento personalizable

Vuye route es un plugin o inrutador que premite aplicar SPA (single page application) con
el objetivo de renderizar y mejor el rendimiento de la aplicacion tambien permite realizar
rutas annidadas, es modular es decir permite que cada componente tanga s propia ruta
tambien permite que la ruta utilize parametro como tambien brindar seguridad segun los
roles que correspondan, y por ultimo permite agregarle efectos visuales de transición

Instalar vue-router y configurar router view

Cuando ponemos en el main.js


import VueRouter from'vue-router'
Siempre tiene que ir abajo de import Vue From ‘vue’ o no importa el orden?
No importa el orden, lo importante es que estén los imports.

Todo va cobrando sentido ahora.


Las rutas hacen referencia a componentes de Vue para renderizarlos dentro del tag <vue-
router>
Dichos componentes pueden tener dentro referencias a otros componentes. VAYA ahora
si entiendo por que lo asocian con los cuadritos de LEGGO.

Por si no lo notaron el comando es:


npm i -S vue-router

Crear y Navegar Rutas con router-link

Es muy importante seguir las practicas de accesibilidad e incluir a todos los posibles
usuarios.
A veces para poder mostrar los ejemplos concretos es mas practico omitir cosas por temas de
practicidad. Pero es realmente muy bueno que lo aclares.
El componente router-link tambien lo usamos cuando vemos la parte del menu. En este
caso la idea era mostrar como podemos navegar las rutas usando código, es por eso que lo
hacemos con este patron.

Cuando se instancia el vue-router se obtienen 2 objetos:


 $route: la cual contiene información de un ruta especifica como
parametros, url, path, etc
 $router: sirve para usar las funcionalidades del vue-router, como por
ejemplo la navegación programática que vemos en esté capitulo del curso

<router-link> es el componente para habilitar la navegación del usuario en una


aplicación habilitada para enrutador. La ubicación de destino se especifica con el
prop. Se representa como una etiqueta <a> con href correcto de forma
predeterminada, pero se puede configurar con la etiqueta prop. Además, el enlace
obtiene automáticamente una clase CSS activa cuando la ruta de destino está
activa.
<router-link> se prefiere sobre <a href="…"> codificado por las siguientes
razones:
 Funciona de la misma manera tanto en el modo de historial HTML5 como
en el modo hash, por lo que si alguna vez decide cambiar de modo, o cuando el
enrutador vuelve al modo hash en IE9, no necesita cambiar nada.
 En el modo de historial HTML5, el enlace del enrutador interceptará el
evento de clic para que el navegador no intente volver a cargar la página.
 Cuando usa la opción base en el modo de historial HTML5, no necesita
incluirla en las URL de los accesorios.

Modifiers

Modificadores de eventos
Es una necesidad muy común llamar a event.preventDefault() o event.stopPropagation()
dentro de los controladores de eventos. Aunque podemos hacer esto fácilmente dentro de
los métodos, sería mejor si los métodos fueran puramente sobre lógica de datos en lugar
de tener que lidiar con los detalles del evento DOM.
Para solucionar este problema, Vue proporciona modificadores de eventos para v-on.
Recuerde que los modificadores son directivas postfijos marcados por un punto

Aquí la lista completa de los Key Modifiers:


@keyup.enter
@keyup.tab
@keyup.delete (captures both “Delete” and “Backspace” keys)
@keyup.esc
@keyup.space
@keyup.up
@keyup.down
@keyup.left
@keyup.right
Además es bien interesante leer la documentación, hay temas muuuuuy geniales:
Modifiers

Modifiers
Permite utilizar los directiva de cada evento por ejemplo preventDefault()
etc https://sodocumentation.net/es/vue-js/topic/8612/modificadores

¿Qué es el prevent default?


Hay elementos HTML que para ciertos eventos tienen un comportamiento default. Por ejemplo
un <a> tiene establecido que ante un evento de tipo click te va a re-direccionar al link segun
el atributo href. Algo similar ocurre en un form, que ante un evento submit intentara ejecutar
el valor del atributo action.
El metodo preventDefault() de los eventos de JavaScript se usa para evitar que cuando
nosotros agregamos un nuevo listener para un evento en un elemento HTML (puede
ser <a>, <form> o cualquier otro) no se ejecute el evento default de ese elemento. Ejemplo:
const a = document.getElementById('a')

a.addEventListener('click', (e) => {


e.preventDefault()

// resto del listener...


})
Vue nos ofrece el modifier prevent para poder implementar este patron de manera mas
sencilla sobre la directiva v-on.

Filtros

Un filtro es como un decorador para la data de nuestros componentes.

Los filtros permite filtrar texto comun y convertirlo en otro segun los criterio que se le
asignen estos mismos pueden declararse como una exprecio en un v-bind segun la
funcionalidad lo requiera la sintaxi tiene que ser de la siguiente forma “{{ OldText | Filter }}”
la sintaxi es predeterminada con un simbolo “pipe” pueden ser cleado de manera local
desde un componente o de manera global.
https://es.vuejs.org/v2/guide/filters.html

Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto
común. Se puede utilizar filtros en dos lugares: interpolaciones mustache y
expresiones v-bind. Los filtros se deben agregar al final de la expresión de
JavaScript, denotados por símbolo “pipe”:
<!-- en mustaches -->
{{ message | capitalize }}

<!-- en v-bind -->


<divv-bind:id=“rawId | formatId”></div>

Directivas Personalizadas

la directiva :key es muy importante para éstos casos.


Cuando realice una búsqueda después de otra, la segunda recordaba el blur de la
primera, la solución fue aplicar :key=“t.id” para que Vuejs reconociera
correctamente las nuevas pistas. y refrescara la blur directiva.

Comparto con ustedes la directiva para que pueda imprimir un sección en su


proyecto, espero les sea de ayuda y tengan una idea de como hacer uso delas
directivas en vue, para usarlo debe pasarle el id de la sección a imprimir. Ej. v-
print=" ‘printBorrowCard’ "
const print = {};

functionprintSection ( el, binding ){


//inserting css
let style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode("@media
screen{#printSection{display:none}}@media
print{#printSection,body{overflow:visible!important}body
*{visibility:hidden}#printSection,#printSection
*{visibility:visible}#printSection{position:absolute;left:0;top:0;right:0
}#printSection table{width:100%!important}}"));
document.body.appendChild(style);

let printSection = document.getElementById('printSection');

if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}

el.addEventListener('click', () => {
var elemToPrint = document.getElementById(binding.value);
if (elemToPrint) {
printSection.innerHTML = '';
printElement(elemToPrint);
}
});

functionprintElement( elem ){
let domClone = elem.cloneNode(true);
printSection.appendChild(domClone);
window.print();
}
}

print.install = function( Vue ){


Vue.directive('print',{
bind( el, binding){
printSection( el, binding )
}
})
}

exportdefault print

Interesante esto de las directivas. cambiar el comportamiento de los elementos


dependiendo del valor en la data

Además del conjunto predeterminado de directivas incluidas en el núcleo (v-model y v-


show), Vue también le permite registrar sus propias directivas personalizadas. la forma
primaria de reutilización y abstracción del código son los componentes; sin embargo,
puede haber casos en los que necesite un acceso al bajo nivel al DOM en elementos
simples, y aquí es donde las directivas personalizadas seguirían siendo útiles.

Tendras algun ejemplo de uso para los parametros NewNode y oldNode?


En realidad serian node y oldNode. Ambos contienen referencias del virtual DOM al node que
contiene la directiva en cuestion. El valor oldNode solo serviria dentro de los hooks de
directivas update o componentUpdated. La diferencia esta en que en oldNode podrias acceder
al estado del node antes de que se hayan modificado valores o estado.
Te dejo el link a la documentacion.

Mixins

Interesante esto de los mixin, con base en una comparativa los mixin son como
contenedores de código para compartir entre componentes.

Los mixins son una forma flexible de distribuir funcionalidades reutilizables para
componentes de Vue. Un objeto mixin puede contener cualquier opción de
componente. Cuando un componente usa un mixin, todas las opciones en el
mixins se “mezclan” en las propias opciones del componente.
en definitiva una funcionalidad excelente q nos permite poder reusar codigo de
forma correcta.

Vue Transitions y Animaciones de CSS

El componente transition-group nos permite añadir animaciones a una lista de


elementos como por ejemplo con un v-for. Sin embargo debemos tener las
siguientes consideraciones:
 Representa un elemento por defecto <span>, pero se puede cambiar por
otro elemento con la propiedad tag.
 Los elemento en el interior siempre deben tener un id. Con un v-
for podemos incluir la propiedad v-binding:key para que cada elemento posea un
id
 Las clases de transición CSS se aplicarán a elementos internos y no al
grupo / contenedor en sí.
Aquí mi código
Search.vue
.container.results
transition-group(name="move", tag="div", class="columns is-
multiline")
.column.is-one-quarter(v-for="t in tracks", :key="t.id")
pm-track(
v-blur="t.preview_url",
:track="t",
@select="setSelectedTrack",
:class="{'is-active' : t.id === selectedTrack}")

Mi template de Search.vue
.container.results
// .columns.is-multiline
transition-group(name="fade", tag="div" class="columns is-
multiline")
.column.is-one-quarter(v-for="t in tracks", :key="t.id")
pm-track(:track="t",
:class="{ 'is-active': t.id === selectedTrack }",
v-blur="t.preview_url",
@select="setSelectedTrack")
pTodoslosderechosreservados
En la sección de metodos del componente Search.vue
methods: {
search () {
//console.log(this.searchQuery)
//this.tracks = tracks
if (this.searchQuery === '') { return }
this.isLoading = true
this.tracks = []
trackService.search(this.searchQuery)
.then(res => {
console.log(res)
// Si el total de resultados es 0, entonces se establece en
true y se mostraria el mensaje de notificacon
this.showNotification = res.tracks.total === 0
// Ver en consola el cuerpo del res
//this.tracks = []
this.tracks = res.tracks.items
this.isLoading = false
})
},
setSelectedTrack (id) {
this.selectedTrack = id
}
}
MIs estilos
.fade-enter-active, .fade-leave-active {
transform: scale(1);
transition: all .8s linear;
}

.fade-enter, .fade-leave-to {
transform: scale(0);
}

Vue ofrece una variedad de maneras para aplicar efectos de transición cuando los
elementos son insertados, actualizados o eliminados del DOM. Esto incluye
herramientas para:
 aplicar clases para transiciones y animaciones CSS automáticamente
 integrar librerías externas de animación CSS, por ejemplo Animate.css
 usar JavaScript para manipular directamente el DOM durante hooks de
transición
 integrar librerías externas de animación por JavaScript, como Velocity.js

Vue tiene diferentes componente de transition


 El primero es
<transitionname="my style name">elemento, componente etc </>
Este permite que una transicion animada y suave segun lo estilo que le
apliquemos en nuestro css.
este
 El segundo metodo mas conocido es list transicion que es perfecto para
aplicarlo en elemento anidados o listas, tab es donde se especifica el elemento
padre
<transition-group name= "my style name"tab=""> lista de elementos </>

Vue transition permite efecto de entrada/salida como


Parametro de entrada
v-enter, v-enter-active, v-enter-to
Parametro de salida
v-leave, v-leave-active, v-leave-to
mas informacion https://es-vuejs.github.io/vuejs.org/v2/guide/transitions.html

Estado Centralizado, Flux y Vuex

Flux es un arquitectura. Redux y Vuex se basan en esa artitectura.

Vuex puede considerarse un Event Bus mas avanzado 


Vuex es como el localStorage de la aplicación Vue.
Todo se encuentra centralizado
Vuex es un patrón de gestión de estado + biblioteca para aplicaciones Vue.js. Sirve como
una tienda centralizada para todos los componentes de una aplicación, con reglas que
aseguran que el estado solo pueda mutarse de manera predecible. También se integra
con la extensión de devtools oficial de Vue

State

el store es para almacenar informacion que se comparte entre componentes. Los mixins son
para evitar duplicar funcionalidad.
De hecho podrias crear un mixin donde internamente se use el store o cualquiera de las
particularidades de Vuex y luego aplicar el mixin a los componentes.

el spread operator es bastante útil, sin embargo en este caso no me parece


necesario darle más carga a la transpilación de código añadiendo un nuevo
preset. Podemos optimizar nuestro bundle evitando instalar el preset. La manera
en la que se puede lograr utilizar tanto las propiedades que mapState devuelve,
como nuestras propiedades es utilizando la función nativa Object.assign de la
siguiente manera.
computed: Object.assign({}, mapState(['track']))
personalmente lo intenté y funcionó perfectamente y no añado plugins adicionales
para lograr ese objetivo.

Vuex se encarga de administrar la data de tu aplicación mediante el store. A traves de


acciones (actions), donde puedes hacer llamadas API y luego a través de los mutations
puedes modificar o agregar data a tu store.
Esto permite tener un solo origen de la data y que todos los componentes que hagan uso del
store tengan la información actualizada en el momento preciso.
Respecto a tu ultima pregunta, cada componente si puede seguir manejando su propia data
ya que, la usara para su propio beneficio.
Es muy recomendable usar Vuex cuando tu proyecto necesita intercambiar datos entre varios
componentes.
Como recomendación mantener en tu store un modulo por cada funcionalidad de tu
aplicación.

npm i -S vuex
Vuex utiliza un solo árbol de estado, es decir, este único objeto contiene todo el
estado de su nivel de aplicación y sirve como la “fuente única de verdad”. Esto
también significa que generalmente tendrá una sola tienda para cada aplicación.
Un solo árbol de estado facilita la localización de una parte específica del estado y
nos permite tomar fácilmente instantáneas del estado actual de la aplicación con
fines de depuración.
npm i -D babel-preset-stage-2

Mutations

Mutaciones, La única forma de cambiar realmente el estado en una tienda Vuex


es cometiendo una mutación. Las mutaciones de Vuex son muy similares a los
eventos: cada mutación tiene un tipo de cadena y un controlador. La función de
controlador es donde realizamos modificaciones de estado reales, y recibirá el
estado como primer argumento

Getters

Tenia entendido que para acceder a las propiedades del state es recomendable
siempre usar getters.

Los getters, Una cosa es cómo almaceno los datos en mi store global y otra
diferente qué datos me son útiles dentro de un componente. Por ejemplo, puede
que dentro de mi store se almacenen un numero considerable de propiedades,
pero que un componente solo necesite aquellos con una caracteristica unica.

Actions

Actions, son similares a las mutaciones, las diferencias son que:


 En lugar de mutar el estado, las acciones cometen mutaciones.
 Las acciones pueden contener operaciones asincrónicas arbitrarias.

Integración a Platzi Music

Si, uno de los objetivos de los estados es compartir información entre componentes y poder
dispara eventos cuando algo cambia en el estado, puedes tener información almacenada en el
estado o tenerla también en local storage.
2

si tus propiedades estan en el state y tus llamadas ajax van a setear valores sobre
ese state, creo que es recomendable delegar eso a las actions. Pero no siempre vas a
tener esa necesidad ya que tampoco es bueno sobrecargar el state con cosas que no
necesitas. Creo que en general vas a tener esquemas mixtos donde en algunos casos tus
peticiones ocurren dentro de actions en el store y en otros casos tenes componentes
interactuando directamente con los servicios (sin store en el medio).
Hay otro caso dentro de la aplicación en el que lo podemos usar para tener mejor
rendimiento: cuando se hace una búsqueda y se hace clic para ver el detalle de
una canción (clic directamente en 🌎), el objeto track o está vacío o tiene
información de una canción anterior, por lo cual el componente TrackDetail hará
el llamado a la API.
Lo que se puede hacer es almacenar la información del nuevo track antes de ir a
la vista de detalle desde el componente Track cambiando un poco el
método goToTrack, así:
1. El parámetro de la función goToTrack no es sólo el id, sino el objeto entero
button.level-item.button.is-warning(@click="goToTrack(track)")
span.icon.is-small 🌎
1. Se hace un commit al mutation setTrack para almacenar el valor sin tener
que llamar a la API
exportdefault {
methods: {
goToTrack (track) {
this.$store.commit('setTrack', track)
this.$router.push({ name: 'track', params: { id:
track.id } })
}
}
}

Server Side Rendering

Cuando debería optar por usar SSR? o en que tipo de aplicaciones/proyectos?


Cuando son landings donde es importante asegurarte que tu SEO sea bueno, ademas cuando
quieres que la carga de información sea más rápida con una información inicial y luego
actualizas con la información dinámica que llega desde el backend.

El enlace de Nuxt es: https://nuxtjs.org/

Nuxt.js

Si alguno acá necesita cambiar el host y el port donde esta escuchando el


proyecto, lo pueden hacer muy fácilmente desde su package.json
Ejemplo:
"dev": "nuxt--hostname 172.17.0.2--port 82",

Nuxt puede o no reemplazar express (en realidad Nuxt usa express internamente). Eso
depende de que tipo de app quieras hacer, si queres una app monolitica (servidor + cliente) o
una app cliente (con SSR pero sin logica en el server).
3
Nuxt te ayuda a hacer render de las paginas y componentes de react.
Nuxt y express se complementan.
https://github.com/nuxt/nuxt.js#using-nuxtjs-programmatically

Conceptos Básicos de Nuxt

**Nuxt.js ** es un framework para crear aplicaciones web universales (que se


ejecutan tanto en el cliente como en el servidor) basado en Vue.js. Está diseñado
para agilizar el desarrollo de web apps con necesidad de SSR (por ejemplo, para
sites que tienen mucho tráfico orgánico). Nuxt.js se ha concebido teniendo mucho
en cuenta la performance en el navegador, con funcionalidades como code
splitting o inlining de recursos en el HTML. ¡Hacer un site con Nuxt.js te asegurará
una muy buena nota en la auditoría de performance Lighthouse de Chrome!

Tuve que solventar 2 problemas al momento de crear el header:


1- Instalar pug-plain-loader con:
npm i -D pug-plain-loader
2- Utilizar el alias ~ igual que el @, es decir en lugar de definir el import asi:
import PmHeader from'~components/Header.vue'
lo hice asi:
import PmHeader from'~/components/Header.vue'

Para trabajar con Vue hay un framework de diseño MUY bueno llamado Vuetifyjs
(https://vuetifyjs.com/vuetify/quick-start) y tiene un template para Nuxt.

¿Como puedo saber cuando usar nuxtjs o solo vuejs?


Si necesitas Server Side Render entonces tienes que usar nuxt, de lo contrario solo usas vue.

Qué es now

Acabo de probar y esta funcionando perfectamente https://zeit.co/now


1
Configuración de now y deploy

Puedes hacer deploy en cualquier vps que quieras, solo tienes que instalar lo necesario como
node, un servidor http como nginx o apache y configurar todo.
5

Si estas usando vue cli el comando que debes ejecutar para transpilar el codigo seria, “npm
run build” si es tu directorio de perfil de github con esto basta, si vas a usar un hosting de
terceros Digital Ocean por ejemplo con esto basta, si vas a usar un repositorio de github que
no sea el de tu perfil, debes crear un archivo “vue.config.js” este debe contener un public path
asi:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}
Recuerda que el nombre de tu repo debe ir entre los slash y no debe faltar ninguno de los dos
slash, si no quieres usar la variable de node para el ambiente tambien puedes agregarlo asi:
module.exports = {
publicPath: '/my-project/'
}
despues ejecutar el comando:
npm run build
Ahora podras acceder a un nuevo directorio “dist” ahi ya solo ingresas con la terminal y
ejecutas tus comandos de git:
cd dist
git init
git add .
git commit -m "wip"
git fetch origin .... (mirar tu repo)
git push -u origin master
Por ultimo ya solo debes ir a tu repositorio y la pestana “settings” y hasta abajo agregar donde
dice github pages y seleccionar la rama en la que trabajaste que por defecto es “master”

Es necesario la instalación de serve para que se efectué el despliegue ?


Hola, es necesario porque es una aplicacion full client, no tenemos ningun backend.
Con serve iniciamos un servidor web para servir nuestra aplicacion. Si no es serve puede ser
otro modulo que haga lo mismo, incluso podrias hacer tu propio web server usando node y/o
express.

Cierre del curso


Internacionalización con vue-i18n

Es para que nuestra aplicación funcionen y darle soporte en diferentes idiomas

Unit Test Karma - Mocha &amp; Webpack

como puedo testear un componente de manera unitaria o e2e, donde el mismo hace una
llamada a una api? el tema esta en la llamada a la api, eso como se suele manejar, se
hace un fake o algo por el estilo?
Hola, lo que te recomiendo es hacer un mock (una simulacion de funcionalidad) de la llamada
a la API. Yo suelo utilizar una lbreria llamada Sinon.js que te permite resolver ese tipo de
cosas. Te recomiendo que revises el metodo stub de esa libreria.

Por otro lado analiza bien si necesitas testear el componente o simplemente testear el servicio
que contenga la llamada a la API. En ese caso el testeo seria mas sencillo. Te dejo un
ejemplo que tiene un caso de uso para testear un metodo de un servicio:

describe('getTrackById()', () => {
it('should return a given track', () => {
const track = { id: 1, name: 'Track 1'}

sinon.stub(trackService, 'getById').returns(Promise.resolve({ data:


track }))
const requestUrl = `/track/${track._id}`

return trackService.getById(track._id)
.then((res) => {
assert.equal(res.name, track.name)

sinon.assert.calledOnce(trackService.getById)
sinon.assert.calledWith(trackService.getById, requestUrl)

trackService.getById.restore()
})
})
})

Implementación de Autenticación de Usuarios en Vue


usando JWT

Das könnte Ihnen auch gefallen