Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Introducci贸n al Rendering Declarativo

4/38
Recursos

Aportes 53

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola, espero que a todos nos vaya super bien con Vue, les comparto mis apuntes de esta clase:

<h1>2.1 Introducci贸n al Rendering Declarativo</h1>

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.

Two way data binding

.
Two-way data binding es un patr贸n MVVM (model -> view -> view -> model) donde se enlazan 2 elementos en 2 direcciones (cuando cambia uno cambia el otro)
.
Sirve para mantener sincronizados los datos con el DOM sin esfuerzos adicionales
.
Two-way data binging y en vue pasa de la siguiente manera:
.
El estado comunica a la vista qu茅 es lo que va a modificar y la vista (donde el usuario interact煤a con la app) responde con los cambios provocados por el usuario para que el estado vuelva a empezar con el proceso.

Two-way data binding es una de las caracter铆sticas principales del declarative rendering de Vue. Permite mantener sincronizados los datos con el DOM sin tener que hacer nada.
Two-way data binging en Vue es un patr贸n MVVM

Me permite tener sincronizados lo que pasa en la vista, en el Browser, con lo que tengo en memoria en el Estado, es decir, que si el usuario, por alguna raz贸n hace un cambio dentro de lo que es la vista, voy a actualizar mi estado y si mi estado, cambia por alguna cosa de JS. por alguna funci贸n, o lo que sea, tambi茅n se va a sincronizar y
va a disparar una nueva vista. Se va a lograr un linkeo en tiempo real con lo que se tiene en el HTML y JavaScript.

Hola Devs:
-Aca les comparto una lectura sobre el Two-way data binding que en verdad esta muy bueno para aprender como funciona e implementarlo de la manera correcta: Click Aqui
-Este articulo tambien lo explica bien claro: Click Aqui

Recuerda, #NuncaParesDeAprender 馃挌

El Super circulo virtuoso :3

Ojala el Estado en mi pais fuera como el estado de este patron

Una analogia del two away data binding podria ser un espejo. Lo que se refleja en el espejo viene siendo la vista, y el estado es el espejo en si mismo, lo que se refleje en el espejo es lo que se va a visualizar en el estado.

Hola Devs:
-Aca les tengo un ejemplo practico de como funciona el 鈥淭wo-Way data binding鈥 utilizando la directiva de v-model: codepen
-Aca documentacion para entender para que funciona la directiva v-model: Click Aqui
Recuerda, #NuncaParesDeAprender 馃挌

Descrito el comportamiento desde el ciclo de vida Vue.js
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

bindings de datos bidireccionales (two-way data binding)

Mejor que hacer los listening de Jquery

two-way data binding

Introducci贸n al Rendering Declarativo

Vue usa 2 way data binding para que los datos se actualicen en el DOM.

  • Vista -> HTML
  • Estado -> JS

JS le dice al HTML c贸mo y cuando tiene que hacer render.

El usuario est谩 en medio de ambos y entonces la vista le dice al estado que hay cambios, entonces el estado va a reaccionar y nuevamente actualizar谩 la vista.

B谩sicamente el Two Model Binding es conectar el c贸digo con la vista, as铆 cuando algo cambia en la vista se refleja en el estado y viceversa, as铆 es como VueJS funciona

que programa uso el profesor para hacer sus dibujos?

El estado afecta la vista. yla vista al estado鈥

Introducci贸n al Rendering Declarativo

Forma que propone Vue Js de interactuar con el DOM.
Caracter铆sticas principales:

  • Tow Way Data Binding: Permite tener sincronizado lo que pasa en la vista del usuario y el estado de la aplicaci贸n (y viceversa). Esto lo logra teniendo en cuenta los conceptos de vista, estado y render.

4.-Introducci贸n al Rendering Declarativo

El declarative rendering es la forma que nos propone Vue.js de interactuar con el DOM, principalmente con el concepto de Two-way data binding, es decir, tendremos una vista (HTML) o un usuario y tambi茅n nuestro estado, dentro de este estado vamos a tener los datos de JS, en Vue.js es el estado el que se encarga de decirle a la vista como y cuando tiene que compilar y que resultado se tiene que lograr a partir de, lo hace con una funci贸n llamada render. En medio de estos dos est谩 el usuario que es quien introduce cambios en la vista a trav茅s de formularios, eventos, etc. Es la vista la que le avisa al estado que hay cambios y ante esos cambios el estado va a reaccionar y manda una nueva vista.

Permite tener sincronizado lo que pasa en la vista con lo que tengo en memoria en el estado.

Introducci贸n al rendering declarativo

Tenemos una vista (html), un usuario y un estado (los datos de javascript). El estado le dice a la vista c贸mo y cu谩ndo compilar usando RENDER. El usuario introduce cambios en la vista sea atrav茅s de un form, diferentes eventos, etc. La vista le avisa al estado que hay cambios, el estado reacciona y env铆a una nueva vista. Este proceso se llama TWO WAY DATA BINDING. Me permite tener sincronizado lo que pasa en la vista y lo que tengo en el estado, si mi estado cambia dispara una nueva vista.

Que buen concepto, con el ejemplo de la clase pasada me quedo m谩s claro, esta muy bueno

Mejor explicado imposible!!!

La "vinculaci贸n de datos bidireccional" es un enfoque en la programaci贸n y dise帽o de interfaces de usuario en el que los cambios en una parte de los datos se reflejan autom谩ticamente en otra, y viceversa. Esto permite que los datos se sincronicen en ambas direcciones, facilitando la actualizaci贸n en tiempo real de la interfaz de usuario en respuesta a cambios en los datos subyacentes y viceversa.

nice

is really

good

really?

very good

thanks

Rendering Declarativo

Es la forma que Vue.js nos propone interactuar con el DOM, nosotros vamos a tener una vista y un estado.

En el estado es donde vamos a tener los datos de JS y dentro de la vista tendremos el HTML, en Vue.js es el estado el que se encarga de decirle a la vista como y cuando debe compilar y cual es el resultado que debemos obtener a partir de esa compilaci贸n y esto lo hace con una funci贸n llamada render().

Por otro lado tenemos a alguien en el medio que es el usuario introduciendo de alguna forma cambios en la vista, es cuando la vista le avisa al estado que ha sufrido cambios y es en estos cambios cuando el estado reacciona y nuevamente manda una vista para avisarle al navegador que tiene nuevo HTML.

Aqu铆 estamos logrando un linkeo en tiempo real, de lo que esta en la parte del HTML con lo que esta en la parte de JS.

Rendering Declarativo: es la forma en la que interactuamos con Vuejs y el DOM.

Vamos a tener una vista (html) y un estado (datos JS). El usuario introducir谩 cambios a trav茅s de la vista, con ello el estado reaccionar谩 y cambiar谩 la vista. Este proceso se le conoce como Two Way Data Binding.

esta genial el curso!

Basicamente es un proceso iterativo: el resultado cambia dependeidnto la cantidad de inteacciones que el usuario genere (claramente tendra alcance hasta que el programa sea programado)

Les comparto mis notas:

2 Way Data Binding

O bindeo de ambos lados. En el estado se tienen los datos de JS, mientras que en la vista tenemos el HTML. En VueJS el estado es el que le dice a la vista c贸mo y cuando tiene que compilar y cu谩l es el resultado de esa compilaci贸n eso se hace con una funci贸n llamada Render. EL usuario es el que introduce cambios en la vista, mediante los eventos del DOM, la vista le avisa al Estado que hay cambios, y mediante esos cambios el Estado va a reaccionar y nuevamente va a enviar una Nueva Vista al browser que hay un nuevo HTML en base a los cambios del Estado tiene que cambiar elHTML.

Si el estado cambia, se dispara una nueva vista sincroniz谩ndose, logrando un c铆rculo virtuoso con un lineo en tiempo real con lo que est谩 en la parte del HTML con la parte del JS.

excellent

El Declarative Render es la forma de Vue de interactuar con el DOM, principalmente con el concepto de two-way data binding. Esto quiere decir que el estado de la aplicaci贸n se encarga de decirle a la vista c贸mo y cu谩ndo debe compilar y cu谩l ser谩 el resultado, esto lo hace mediante la funci贸n render. Por su parte, el usuario va a interactuar con la vista y cuando sucede un cambio ahora ser谩 la vista la que le diga al estado que ocurrieron cambios, cuando esto ocurre el estado reacciona y le manda a la vista la nueva vista que debe mostrar. Esto es lo que se conoce como two-way data binding.

Con esta caracter铆stica podemos tener sincronizado lo que sucede en la vista y lo que sucede en el estado.

Soy nuevo en Platzi, y este curso detallado de Vue me esta sirviendo un buen

Two-way data binding

two-way data binding, un circulo virtuoso.

Two way Data bindig.

Estado a trav茅s de render cambia a la vista.
Vista Es actualizada por un usuario la cual manda los cambios al estado en d贸nde el estado vuelve a cambiar a la vista.

Two Way Data Binding - blindeo de los dos lados.
Vista -> html
Estado -> es donde tendremos los datos de javascript.

el estado es el que se encarga de decirle a la vista de como y cuando tiene que vincular y eso lo hace con la funci贸n llamada render().

Muy claro, excelente!

chicos vengo de react js, ustedes como lo ven vue?

La vista y el modelo est谩n sincronizados. Un cambio en la vista puede generar cambios en el modelo y un cambio en el modelo puede generar cambios en la vista.

Q gran explicaci贸n del Two Way Data Binding, genial!

Iniciando el curso de Vue con mucha expectativa

*El estado es el que hace Render a la Vista dici茅ndole que es lo que va a mostrar.
*El cliente es el que interact煤a con la Vista, cuando el cliente hace un cambio la Vista tiene que hacer cambios y estos son comunicados al Estado que se encarga de Renderizar los cambios en la Vista.

DOM o 鈥淢odelo de Objetos del Documento鈥 es una interfaz de programaci贸n de aplicaciones (API) para documentos HTML y XML.

Es la forma en la que interactuamos con el DOM. Two-way data binding es un patr贸n MVVM (model -> view -> view -> model) donde se enlazan 2 elementos en 2 direcciones (cuando cambia uno cambia el otro)

  • Esto quiere decir que tendremos la vista y el estado. Donde el estado es el JS y la vista es el HTML.
  • En Vue, es el estado que le debe decir a la vista como y cuando se debe compilar dicha vista. Este compila con una funci贸n llamada render.
  • Por otro lado, hay un usuario en el medio quien es el que introduce cambio a la vista. Cuando esto pasa le avisa a el estado que hay cambios y ante estos cambios el estado reacciona y nuevamente manda el cambio de la vista en base al nuevo estado.

C铆rculo virtuoso 馃挌

two ways data, rendering declarativo

me gusta dentro del rendering declarativo

f