Scribd
Cargar
9 vistas

Modulo 1 - vue js

El curso de Vue.js cubre la interpolación de datos, el uso de directivas como v-bind, v-on, v-if, v-for y v-model, así como la creación de slots y directivas personalizadas. Se explica el flujo de datos entre componentes padres e hijos mediante props y eventos. Además, se proporcionan enlaces de interés para profundizar en el aprendizaje de Vue.js.

Cargado por

diego david almiron
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
9 vistas

Modulo 1 - vue js

El curso de Vue.js cubre la interpolación de datos, el uso de directivas como v-bind, v-on, v-if, v-for y v-model, así como la creación de slots y directivas personalizadas. Se explica el flujo de datos entre componentes padres e hijos mediante props y eventos. Además, se proporcionan enlaces de interés para profundizar en el aprendizaje de Vue.js.

Cargado por

diego david almiron
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 14

Vue.

Js

Módulo 01

Curso: Vue.Js
Mostrando datos
• Para mostrar datos del componente en un template necesitamos
realizar la interpolación de texto con variables reactivas.

• Para eso, vamos a escribir el nombre de la variable reactiva


encerrado entre {{ y }}

• Dentro de estas llaves podemos mostrar cualquier propiedad


reactiva, no solo las disponibles en data

Curso: Vue.Js
Directivas

• Las directivas son atributos HTML específicos de Vue para aportar


funcionalidad específica de esta librería a determinada etiqueta
HTML. Junto con la interpolación, son las formas de comunicar el
template con el script de Vue.
• Las directivas de Vue, para diferenciarse del resto de los atributos
HTML, empiezan con el prefijo v-.
• La sintaxis para estas directivas es kebab-case
• Vue viene incorporado con un conjunto de directivas nativas
• Podemos crear nuestras propias directivas
Curso: Vue.Js
v-bind
• Sirve para vincluar el valor de un atributo HTML a una variable
reactiva.
• Por ejemplo, podemos necesitar vincular la clase de un div a una
variable reactiva, que cambie en función de otras cosas (como el
click de un botón).
• Sintaxis:
<elemento v-bind:atributo=”variable_reactiva”>
• Sintaxis corta:
<elemento :atributo=”variable_reactiva”>

Curso: Vue.Js
v-on
• Sirve para vincluar un evento del elemento a una función del
componente en Vue
• Por ejemplo, podemos querer que un botón cambie el estilo de una
clase
• Es importante definir el método en la clave methods
• Sintaxis:
<elemento v-on:evento=”metodo”>
• Sintaxis corta:
<elemento @evento=”metodo”>

Curso: Vue.Js
v-if
• Sirve para renderizar un elemento en función del valor booleano de
una variable reactiva
• Por ejemplo, podemos querer mostrar un div de errores solo si hay
errores
• Sintaxis:
<elemento v-if=”variable_reactiva”>

Curso: Vue.Js
v-for
• Sirve para repetir el renderizado de un elemento en función de una
lista reactiva
• Por ejemplo, podemos querer llenar un ul con una lista de tareas
• Como los elementos se generan dinámicamente, Vue necesita que
cada elemento tenga un identificador único llamado key
• Sintaxis:
<ul>
<li v-for=”(item, index) in lista_reactiva” :key=”index”>
{{ item }}
</li>
</ul>
Curso: Vue.Js
v-model
• Sirve para vincular una variable reactiva al cambio de valor de un
componente de formulario
• La comunicación es de dos vías: el cambio en el input cambia el
valor de la variable, y el cambio del valor de la variable cambia el
valor mostrado en el input
• Sintaxis:
<input type=”text” v-model=”variable_reactiva” />

Curso: Vue.Js
Slots
• Los Slots nos sirven para controlar los elementos hijo de un
componente personalizado.

• Sirve, por ejemplo, para crear un componente de layout o maqueta,


para crear una “página maestra” común a toda la navegación.

• Mediante la etiqueta <slot></slot> en un template, renderizamos el


contenido HTML del componente al usarlo.

• Podemos crear varias secciones con los “named slots” (<slot


name=”header”></slot>)
Curso: Vue.Js
Directivas personalizadas

• Si bien conviene reutilizar código con componentes, hay casos en


donde se deben reutilizar características que no ameriten un
componente. En ese caso, consideremos crear nuestra propia
directiva.
• Las directivas se declaran a nivel global en la aplicación, en el
archivo main.ts
• Las directivas se crean mediante app.directive, que recibe como
primer parámetro el nombre de la directiva y como segundo
parámetro la función constructora. Dicha función modificará al
componente.
• Para usarlas, debemos respetar el prefijo v-
Curso: Vue.Js
Flujo de datos: de padres a hijos
• Para pasar un dato de un componente padre a sus hijos se utilizan
las props. Las props son propiedades reactivas en nuestros
componentes que le llegan por fuera.

• Se declaran en la clave props del componente hijo.

• Se pueden pasar con v-bind y así, al cambiar una propiedad reactiva


del padre, reaccionan también los hijos

Curso: Vue.Js
Flujo de datos: de hijos a padres
• Vue contempla un único sentido en el flujo de datos: de padres a hijos. De
donde se sigue, que un hijo no puede pasar un dato directamente al
padre.
• Para lograr eso, debe hacerlo de forma indirecta, emitiendo un evento.
• Así como podemos crear atributos y directivas, también podemos crear
eventos.
• Los eventos se declarar y emiten en el componente hijo, y se escuchan y
responden en el componente padre.
• De esa forma, el componente hijo ejecuta un método que está en el
componente padre

Curso: Vue.Js
Links de interés
https://es.vuejs.org/v2/guide/syntax.html
https://v3.vuejs.org/guide/component-slots.html
https://v3.vuejs.org/guide/migration/custom-directives.html#_3-x-syntax
https://v3.vuejs.org/guide/component-props.html
https://v3.vuejs.org/guide/component-custom-events.html#event-names

Curso: VueJs
¡Muchas gracias!
¡Sigamos trabajando!

Curso: VueJs

También podría gustarte