Scribd
Cargar
549 vistas66 páginas

Introduccion y Fundamentos de Vue Js

Este documento presenta una introducción a Vue.js, incluyendo sus fundamentos de componentes, el patrón MVVM, la configuración del entorno, interpolación de datos, atributos reactivos, eventos de usuario, comunicación entre componentes, el ciclo de vida de los componentes y más. El documento explica conceptos clave de Vue como la separación de la interfaz en estado, vista y modelo, y cómo los componentes son la unidad básica para construir interfaces.

Cargado por

Tobias leonel Perez
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
549 vistas66 páginas

Introduccion y Fundamentos de Vue Js

Este documento presenta una introducción a Vue.js, incluyendo sus fundamentos de componentes, el patrón MVVM, la configuración del entorno, interpolación de datos, atributos reactivos, eventos de usuario, comunicación entre componentes, el ciclo de vida de los componentes y más. El documento explica conceptos clave de Vue como la separación de la interfaz en estado, vista y modelo, y cómo los componentes son la unidad básica para construir interfaces.

Cargado por

Tobias leonel Perez
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

Curso de Vue.

js:
Introducción y
Fundamentos
Diana Martínez
VueJS
Evan You
Fundamentos
de componentes
Desarrollo basado
en componentes
Interfaz

Componente Componente
Interfaz

Carrito de Procesador
compra de pagos
Misma
Interfaz

Punto de Procesador
venta de pagos
Componentes UI
<input
type="date"
value="2022-01-01"
/>
<input-date
type="range"
from="2019-01-01"
to="2019-02-14"
/>
Partes de un
componente
Vista
Es la parte visual del componente con la
que el usuario interactúa

Button
Estado
Es el estado interno del componente

Button Button

Habilitado Deshabilitado
Interfaz
Es la forma en que el resto del sistema
interactúa con el componente

<input
type=”button”
value=”Click” Click
onclick=”alert(‘click!’);”
/>
El patrón
MVVM
Two-way data binding

Modelo Modelo de Vista


la vista

{
from: “2019-01-01”
to: “2019-02-19”
}
Configuración
del entorno
Primer contacto
Interpolación de
datos
Atributos
reactivos
Eventos de
usuario
Inputs reactivos
Propiedades
computadas
Watchers
Estilos
reactivos
Condicionales
Listas
Componentes
El árbol de componentes
Slots
Comunicación
de componente
padre a hijo
Comunicación
de componente
hijo a padre
Custom
v-model
Comunicación
con componentes
profundos
Deep components
Virtual DOM
Document Object Model
<html> document
<head></head>
head
<body>
<div id=”app”> body
<h1></h1>
div #app
<div class=”button”></div>
<p></p> h1

</div> div .button


</body>
</html> p
Virtual Document
Object Model
Template vDOM DOM
{
el: “div”, div
<div>
children: [
<h1></h1>
{ el: “h1” }, h1
<div></div>
{ el: “div” },
<p></p>
{ el: “p” }, div
</div>
]
} p
Ciclo de vida
de los componentes
Instancias de
componentes
Vue progresivo
Esto es solo
el comienzo

Curso de Vue.js: Introducción y Fundamentos Diana Martínez
VueJS
Evan You
Fundamentos de componentes
Desarrollo basado en componentes
Componente Componente Interfaz
Carrito de compra Procesador de pagos Interfaz
Punto de venta Procesador de pagos Misma Interfaz
Componentes UI

También podría gustarte