No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Two-Way Data Binding

13/38
Recursos

Aportes 42

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

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 鈥淭wo-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 鈥渧-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 鈥渧alue鈥

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

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.