Two-Way Data Binding

Hola gente!
Estoy buscando compañeros de clase, que estén aprendiendo con la escuela de JavaScript, Vue.js, React, entre otros. Tengo ganas de armar un Discord, para poder ayudarnos y charlar un poco de esto.
Me puedes encontrar en Discord como WgetDc#9264

Excelente framework y clarísimas las explicaciones de Ignacio. Como novato en el tema de los frameworks front-end se me hizo mucho mas fácil entender VueJS a comparacion de Angular y React respectivamente.

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:

<input type="number" v-model="value">
<span>{{ converterdValue }}</span>

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.

converterdValue(){
      if(!this.value){
        return 0
      }
      return this.value/this.price
    }

En resumen, v-model permite habailitar el TwoWay Data Binding, que es prácticamente que, cada vez que se escirba algo en un input, ese valor será actualizado automáticamente en la variable, y si la variable llegara a cambiar dentro del código, en el input también se actualizaría

O definido de otra manera, como si nombre lo indica “Two-way data binding” o enlace de datos bidireccional, específicamente la directiva v-model, permite enlazar bidireccionalmente un modelo a la vista, de sufrir cambios, ambos se actualizan.

waoo ya quiero usar apis

Recuerden que el 0 == false y el 1 == true, por eso, this.value devuelve 0 (false) y !this.value devuelve lo contrario a 0 o false que seria 1 o true.

Por lo que entiendo es bindear o pasar datos de la vista al controlador. Hasta el momento habiamos obtenido data desde el JS y los presentabamos en el DOM, ahora estamos obteniendo información desde el DOM con el parametro “v-model”.

Utilidad? principalmente para los formularios creo.

😱 muy simple a comparación de otros frameworks JS. Y la explicación de este man también ⭐⭐⭐⭐⭐ Capo!

😮 genial v-model, me recuerda a primefaces con “value”

Wowwww Muy Genial!! VueJs sin duda simplifica muchas cosas. Aunque bien otros framework cuentan con algo parecido , VueJs lo hace mas liviano.

De este curso puedo decir que es genial que las clases sean cortas, hace todo mas sencillo y entretenido a mi parecer 😛

buen video, amprendiendo cada día mas sobre Vue js

AngularJs tambien usa la sentencia parecida ng-model.

V-Model es una caracteristica de Vue que permite manipular la información que es ingresada por el usuario.

Chicos quien quiere practicar de manera grupar vue y crear varios proyectos para practicar. Podemos crear un grupo por discord. Para los que deseen este es mi discord nandorodriguez#4356

v-model , en lo personal me ha ayudado demasiado.

Hace un tiempo estuve haciendo practicas en una empresa de desarrollo pero ellos usaban un framework llamado knockout-js que traia computed properties y observables, los observables eran como los v-model pero sinceramente no tenia la capacidad de vuejs

v-model permite linkear las cosas que escribe el usuario en un input de un formulario con las propiedades que tenemos definidas en data

WTF LOCO NO PUEDE SER MAS SIMPLE NO?

Cuando el Bitcoin estaba a 8400

Siento que he aprendido demasiado hasta este punto, gran curso y totalmente práctico muy contento con los resultados

No puedo esperar a obtener el precio en tiempo real consumiendo APIs

Captura.png

Excelente explicaciones @Ignacio Anaya !!! Por fin me estoy metiendo a fondo y me está encantando el Framework!!

2 Way Data Binding

La directiva v-model es muy importante porque es la que nos permite linkear las cosas que puede escribir el usuario a travez de un input o un form con las propiedades que tenemos definidas dentro de data. Es lo que me permite cada vez que cambio la vista por interacciones con el usuario se refresque el código, y cada vez que refresco el código también se refresque la vista.

<input type="number" v-model="value">
<span>{{ value }}</span>

Es una de las características que tiene Vue para manipular la información que es ingresada por el usuario.

Two-Way Data Binding

Two-Way Data Binding

Es Vue es todo un caramelo dulce

E s p e c t a c u l a r

😃

Excelente explicación!

estaría perfecto tener un archivo con todos los conceptos

Con la directiva v-model podemos vincular lo que escribe el usuario en un input con las propiedades definidas en Data. Esto se conoce como two-way data binding.

Esto permite que, cada que se cambia la vista por la interacción del usuario se actualice el código y viceversa.

interesante la parte del v-model

<code>

👌

Directivas Basicas que nos permiten manipular el DOM como v-if y v-show para poder ocultar y mostrar elementos, vimos la directiva v-bind para poder manejar atributos de forma dinamica ,vimos v-for para renderizar listas ,v-model para el two-way Data Binding, v-on y los metodos para manejar eventos, tambien vimos computer properties y watchers para ejecucion de codigo en tiempo real

excelente me esta gustando el curso, profe estas un poquito tenso como cuando uno presenta una exposición y tienes poca expresión, pero esta muy genial.

v-if agrega o elimina condicionalmente un elemento al DOM.
v-show alternativa de v-if, oculta o muestra un elemento con CSS.
v-else para mostrar un elemento cuando v-if o v-show se evalúe como falso.
Con <template> podemos agrupar varios elementos del HTML, para luego utilizar una sola directiva de Vue.js en dicho template. Sin embargo, v-show no funciona con template, en ese caso, se puede usar un div un span o utilizar v-if.

siguendo el curso de VUEjs en el #platziday un poco tarde, pero seguro que lo termino, seguro que este modulo lop termino.