Vue. js es un framework.

Conocemos a Vue como el Framework progresivo justamente por su vesatilidad. Es una

pequeña librería que se encarga de resolver el problema de la vista dentro de lo
que es el patrón MVC (Modelo, Vista, Controlador), pero también puede ser muy
potente cuando la combinamos con parte de su ecosistema, es decir,que Vue puede ir
escalando a medida que nuestro proyecto vaya incrementando los requerimientos o
vaya incrementando su complejidad. Podemos utilizar Vue para proyectos muy
sencillos como una Landing Page o un prototipo o para proyectos más complejos como
una SPA (Single Page Application). Es decir que a medida que tengamos cosas más
difíciles para resolver, vamos a ir incorporando herramientas para resolver esos
problemas específicos.

Vue es una librería enfocada a la vista que utiliza el Virtual DOM y es totalmente
reactiva. Tiene dos caracteristicas principales, el sistema declarativo y el
sistema de componentes.

El sistema declarativo o declarative rendering es una de las funcionalidades que

nos permite de forma imperativa poder manejar el DOM y interactuar con el mismo.

El sistema de componentes es lo que hace que podamos modularizar nuestra aplicación

en diferentes componentes reutilizables o no y que nos permitan tener un código
semántico, mucho más fácil de mantener y de leer.

Vue es un framework muy versátil, escalable puede utilizarse para cosas muy
sencillas como para cosas muy complejas.

Es un framework muy performante, tiene un tamaño muy pequeño y esta pensado para
trabajar con el DOM. Puede usarse para crear una landing page o una Single Page
Application.

Linkeo entre nuestra vista y nuestro codigo para disparar actualizaciones en

nuestro dom.
el: Es un pseudo-selector de CSS que nos permite con un selector obtener un
elemento dentro del dom.
data: una function que devuelve un objeto, dentro del el vamos a definir todas las
propiedades que usaremos dentro de nuestro template, si queremos usar una variable
title dentro de nuestra vista tenemos que definirla acá.

El Declarative Rendering es la opción que nos propone VueJS para interactuar con el
DOM, principal con el concepto de Two Way Data Binding, esto quiere decir que vamos
a tener:

Vista: aquí tenemos el HTML.

Estado: aquí tenemos nuestros datos de JS.
Usuario: es el que introduce cambios en la vista.
La vista se encarga de decirle al estado que hay cambios, a lo cual el estado va a
reaccionar y mandar una nueva vista.

El estado se encarga de decirle a la vista como y cuando tiene que compilar y cual
es el resultado que se tiene que lograr, esto lo hace con una función que se llama
render.

Expresiones y Propiedades
Dentro de una expresión {{ … }} podemos escribir casi cualquier código js válido.
Ejemplo: operaciones aritmeticas (suma, resta, multi, división), expresiones
lógicas, llamar funciones, etc. Las sentencias condiciones no se pueden usar dentro
de ellas (por ejemplo if and else, for, while, etc.), ya que Vue tiene su propia
forma de ejecutarlas atreves de algo llamado directivas
Binding de Atributos html
Los atributos en html son las propiedades que puede tener una etiqueta, mismos que
se pueden vincular (bind) a variables javascript con directivas.

Las directivas nos permiten vincular el dom con javascript de manera declarativa,
para hacer un data binding podemos utilizar la directiva v-bind:atributo=“valor”
vinculando el atributo a nuestro objeto de vue, creando en data(), recordando que
dentro del valor podemos poner código js.

• v-bind: Enlaza dinámicamente uno o mas atributos del elemento. Se puede abreviar
así “ :src = “img”.
• v-if: De acuerdo con el cumplimiento de la condición construye o destruye el
elemento.
• v-else-if: Funciona de la misma manera que “v-if”, pero para usarla debe existir
previamente la directiva “v-if” o “v-else-if”.
• v-else: Para usar esta directiva previamente debe existir la directiva “v-if” o
“v-else-if”.
• v-show: Dependiendo de la condición, cambia la propiedad “display” del atributo
style del elemento.

Emojis en Windows 10 => tecla windows + Tecla punto (.) o Tecla coma (,).
Mas información: https://es.vuejs.org/v2/api/#Directivas

Se utiliza la directiva v-for para recorrer el arreglo.

v-for = “p in prices”
.
Al utilizar esta directiva se recomienda el uso de key, ya que permite identificar
de manera unívoca a cada elemento. Esto permite que si la lista se reordene,
modifique o actualice la lista pueda seguir identificando cual es el elemento.
.
Podemos llamar al indice del elemento de la lista:
v-for="(p,i) in prices"

methods.
Es una propiedad de la instancia de Vue. Es un objeto donde se pueden definir
funciones que pueden ser disparados por acciones en la vista.
.
Para acceder a propiedades de otro scope se utiliza la keyword this seguido de un
punto y el nombre de la propiedad.
.
Por último agregar la directiva v-on ante determinado evento, en el HTML que
permite disparar el método.
Otra directiva que se puede utilizar en v-on, es mouseover
En esta clase se mencionan los Operadores Ternarios:
Las operaciones ternarias, o “nested ternaries” en inglés, son expresiones que se
utilizan en JavaScript para las condicionales
if... else...

Una expresión en JavaScript como por ejemplo:

if changepercent > 0 { show: 'green' } else { show: 'red' }

Es lo mismo que la siguiente operación ternaria:

changePercent > 0 ? 'green' : 'red'

Estilos en tiempo real

Para bindear alguna propiedad, como en este caso usamos v-bind:class podemos
utilizar el atajo :, por lo que si queremos bindear la clase podemos utilizar el
atajo como: :class, ambas maneras son válidas dentro de Vue.js
Computed Properties y Watchers
Propiedades computadas (Computed) = propiedades que se calculan en tiempo real en
base a los valores de otras propiedades.

Watcher = Funciones que ejecutan un código es decir que por medio de un cambio de
la observación de una variable se puede disparar determinado código o ejecutar una
función.
Podemos pensarlo como un Disparador de código.

La directiva v-model permite linkear las cosas que puede escribir el usuario
mediante un input con las propiedades que tenemos definidas en data. Es lo que
permite que cada vez que se cambia la vista a través de interacciones con el
usuario se refesque el código y cada vez que se refresque el código también se
actualice la vista, esto se le conoce como Two-Way Data Binding.
.
En index.html.
En app.js:
Dentro de data se agrega la propiedad value y se inicializa en 0. Y dentro de
computed porque se opera con dos propiedades de data se agrega esta función para
que retorne el valor de la operación

SISTEMA DE COMPONENTES

Los componentes son la segunda funcionalidad importante que tiene Vue. Se basan en
las especificaciones de web components APIs. Permiten modularizar mi aplicación en
diferentes pedazos de htm, javascript y Css para tener un código más legible y
semántico. Es decir, cada componente puede ser utilizado a lo largo del proyecto,
tiene todo lo que necesita para existir, tiene su lógica, tiene diseño y tiene
estructura.

Cuando trabajamos con Html y el DOM siempre tenemos una estructura de árbol, es
decir, una estructura jerárquica DOM. Tenemos un componente principal (en este
caso, el recuadro azul en la imagen abajo) y luego tenemos componentes hijos que
representan contenedores con diferente tipo de contenido. Además, podemos tener
otros componentes hijos, es decir, cada uno también tiene sus propios elementos
Html.
En resumen, para crear un componente se utiliza la propiedad component de Vue, la
cual tiene casi los mismos metodos que la instancia de Vue donde veniamos haciendo
todo, nada mas que este tiene el metodo template donde va a ir el “html” de nuestro
componente

En props definimos las propiedades que el componente padre le va a enviar al hijo.

Los props se utilizan igual que las propiedades de data, se utilizan a través de
this. El componente hijo no puede escribir o modificar los props que le mande el
padre.
.
El nombre del componente se escribe en Pascal Case, donde cada palabra inicia con
la primera letra en mayúscula. Al momento de llamar al componente en el HTML, Vue
parsea el nombre a Kebab Case, una nomenclatura con guiones lo cual permite
mantener una consistencia con los tags HTML.
.
Se recomienda mantener la consistencia entre los lenguajes, utilizar Pascal Case
dentro de JavaScript: CoinDetail ; y Kebab Case dentro de HTML: coin-detail.
.
Para pasarle las propiedades al componente se hace desde el HTML usando la
directiva v-bind: v-bind:change-percent = “changePercent”. Aquí también aplica lo
del Kebab Case.
.
Los componentes de Vue necesitan tener un componente padre único que encierre a
todos los demás.
.
Cuando las propiedades tienen un elemento central común es más cómodo trabajarlas
mediantes un objeto, así evitamos tener que estar pasando tantos props.

COMUNICACIÓN ENTRE COMPONENTES: EVENTOS (Clase 18)

¿Qué debemos hacer cuando un componente hijo necesita enviar información a un

componente padre? Lo que debemos hacer es enviar eventos. Las propiedades del
componente padre nunca deben ser actualizadas por el componente hijo. En caso de
que haya que modificar una de estas propiedades, el componente hijo tiene que
notificar al padre y esta notificación se hace a través de eventos. Se puede decir
entonces que la comunicación de padre a hijo es con propiedades y de hijos a padres
es con eventos. De esta manera mantenemos la consistencia en Vue.js.

Recordemos que usamos el v-bind para modificar en tiempo real o tener un atributo
dinámico en cuanto a las propiedades y vamos a usar la emisión de eventos con la
directiva v-on para que el componente hijo pueda enviar información al componente
padre.

Tomando el código de la clase precedente, lo que vamos a hacer ahora es modificar

la variable color del componente padre usando el componente hijo. El componente
hijo debe emitir un evento para avisarle al componente padre.

Vamos a hacerlo con la función this.$emit(‘change-color’) inserta en la función

toggleShowPrices() que está en methods del componente hijo.
Luego, en el Html , en <coin-detai> insertamos la directiva v-on: change-
color=”updateColor ” (Significa: escuchar al evento change-color)
Ahora, en el componente principal (el padre) se define, en este ejemplo, el
comportamiento de change-color, así:
Al momento de emitir un evento también podemos emitir un valor que vaya acompañando
ese evento. En el argumento de la función this.$emit(‘change-color’) colocaremos el
color que queremos, asi:
Luego en el componente principal podríamos cambiar el método updateColor() así:
De esta manera el color va a ser siempre ‘ff96C8’ (color rosa). Una variante que
podríamos hacer es esta:
Ahora bien, si repito el componente <coin-detail> de la forma como se ve enseguida,
cada <coin-detail> se va a comportar de manera aislada. Por eso es importante que
la función que tenemos dentro de data sea justamente una función que devuelva un
objeto. Si en lugar de una función tuviésemos un objeto no seríamos capaces de
mantener una referencia aislada para cada componente. De esta forma podemos
garantizar que cada componente tiene su propio estado y que cuando se modifica el
estado de un componente, por más que sea el mismo tipo de componente, no se va a
modificar el estado del otro.
SLOTS

-¿ Qué es?
Es una API de distribución de contenido.

¿Para qué se utiliza?

Para inyectar código HTML a un componente hijo

¿Cómo se utiliza?
En el componente hijo, dentro de su template ponemos:
Mientras que en el HTML, dentro del tag de nuestro componente ponemos:
Con el ejemplo que venimos manejando sería.

Ciclo de Vida y Hooks:

Vue tiene diferentes estados y esto nos permite usar ciertas acciones antes y
después de cada estado.

A estas acciones se las conoce como hooks y tienen unos propósitos claros:

Nos permite conocer como se crea, actualiza y se destruye un componente.

Podemos saber en que punto se encuentra el componente y poder actuar en
consecuencia.
A continuación vamos a ver los hooks que nos ofrece Vue:

beforeCreate.
created.
beforeMount.
mounted.
beforeUpdate.
updated.
beforeDestroy.
destroyed.

Temas vistos hasta ahora:

Vue.component: Para crear componentes reutilizables.

Props: Para enviar información al componente hijo.
Events: Para que el componente hijo se comunique con el componente padre.
Slots: Insertar código HTML en tiempo real enviándolo de padre a hijo.
Ciclo de vida: Funciones que permiten ejecutar código conforme el componente pasa
por este ciclo.

El vue-cli (es decir, la “interfaz de línea de comandos Vue”) es una herramienta

creada por el equipo Vue.js para ayudar a facilitar el rápido desarrollo de las
aplicaciones Vue.

Si bien puede usar Vue.js en el navegador directamente, la mayoría de las

aplicaciones frontales usan Node.js para las herramientas de compilación.

Con Vue podemos crear componentes de múltiples formas, la más sencilla es cómo
vismo en un post anterior donde utilizamos el método Vue.component().

Sin embargo esa forma, aunque es la más sencilla y práctica, no es la más

escalable, ya que nos obliga a escribir el HTML dentro del método Vue.component() o
a utilizar múltiples <templates> en el HTML.

Para solventar esto, existe una solución que junto con Webpack y un módulo (vue-
loader) nos permite tener en un único fichero la vista (template), el diseño (css)
y la lógica (javascript). Estos ficheros tienen una extensión .vue

Funcionalidades, UI y comandos básicos

npm run lint. Detectar errores de linteo

npm run build. Generar la aplicación en modo producción. Genera una carpeta dist.

npm i -g serve. Permite generar un servidor web local:

serve -s dist. Levanta un localhost.

vue ui. Genera una aplicación web local, que mediante una interfaz de usuario
permite gestionar los proyectos de Vue.
preset. A medida que se van creando proyectos con determinada configuración, el cli
de vue permite guardar esa configuración para más adelante poder utilizarla al
momento de crear un proyecto.

La diferencia entre npm install y vue add puede ser confusa pero trataré de
explicarlo:

npm install: Instala una dependecia dentro de nuestro proyecto, simplemente la

agrega para que podamos empezar a hacer uso de ella

vue add: Añade un plugin al CLI de vue, en este caso, añadimos un plugin que el
profesor creó, ese plugin ya se encargaba de installar a través de npm install la
dependencia de Tailwind, pero no solo lo instaló, sino que también lo configuró,
con npm install tendrías que hacer esas configuraciones tu mismo, en este caso, el
plugin del profesor ya hizo las configuraciones

El router-link internamnete utilizar el router.push. La diferencia es que una la

utilizas en los templates/html y la otra es para navegacion programatica, pero
ambas resuelven lo mismo.

El problema de reactividad se origina por que vue no puede detectar si una

propiedad existe debido a que fue agregada después que el objeto se creo y esta
propiedad no esta siendo rastreada por vue.
Para solucionarlo:
this.$set(this.someObject, ‘propiedadNueva’, valor)