Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Vue Js Platzi
Vue Js Platzi
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.
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.
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:
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
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...
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
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.
-¿ Qué es?
Es una API de distribución de contenido.
¿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.
A estas acciones se las conoce como hooks y tienen unos propósitos claros:
beforeCreate.
created.
beforeMount.
mounted.
beforeUpdate.
updated.
beforeDestroy.
destroyed.
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().
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
npm run build. Generar la aplicación en modo producción. Genera una carpeta dist.
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:
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