Introducción al Rendering Declarativo

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

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 “Two-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!!!

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.

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 “Modelo 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