No tienes acceso a esta clase

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

Inputs reactivos

9/23
Recursos

Aportes 21

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Atributos -> :

Eventos -> @

Me gusta cuando saltan errores en los cursos, la soluci贸n de estos hace parte de nuestra labor d铆a a d铆a y no todo puede salir perfecto

en efecto en mi poco tiempo de programaci贸n aprendo m谩s cuando hay errores que cuando todo me ejecuta correctamente a la primera. asi que espero ver m谩s errores!!!

Puede usar la directiva v-model para crear bindings de datos bidireccionales (two-way binding) en elementos input, textarea y select de un formulario.
v-model es esencialmente syntax sugar para actualizaci贸n de datos a trav茅s de eventos de entradas del usuario,

Un golazo el v-model. Le quedar铆a bueno al mundo React algo as铆 馃槂

Me gusta como la profe explica, se vuelve la clase muy amena y entendible

Profe, en verdad lo que m谩s apreciamos es tu gran habilidad para comunicar de forma pr谩ctica y efectiva los contenidos vistos. 隆Muchas gracias!

La profesora explica muy bien, me esta gustando mucho este curso

Para mantener sincronizada la vista con el modelo se asigna el value de target a la variable correspondiente. Ej: this.text = e.target.value; donde e se refiere a la instancia del evento.

v-on y v-bind suelen aplicarse juntos por lo que para simplificar a煤n m谩s el c贸digo tenemos la directiva v-model (ej: <input v-model=鈥渢ext鈥 />). No se necesitan m茅todos del tipo event handler para mantener sincronizado el estado del componente con el modelo.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="Description" content="Extended Description">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Inputs reactivos</title>
    <link rel="stylesheet" href="">

    <style>

    </style>

</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>

    <div id="app"></div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: 'Hola Vue',
                    text2: 'Hola Vue',
                    text3: 'Hola Vue',
                };
            },
            methods: {
                input(e) {
                    // Indiretamente modifico el valor de p en el html
                    this.text = e.target.value;
                },
                input2(e) {
                    // Indiretamente modifico el valor de p en el html
                    this.text2 = e.target.value;
                },
            },
            // v-on:change detecta el evento al cambiar el texto
            // v-on:input detecta el evento al al cambiar el texto en tiempo real
            // Se puede resumir:
            // v-on:event="funct"       --> @event="funct"
            // v-bind:attr="var-value"  --> :attr="var-value"
            // v-model="var-react" nos da reactividad entre componentes
            template: `
                <p>{{ text }}</p>
                <input type="text" v-on:change="input">
                <p>{{ text2 }}</p>
                <input
                    type="text"
                    @input="input2"
                    :value="text2"
                >
                <p>{{ text3 }}</p>
                <input
                    type="text"
                    v-model="text3"
                >
            `,
        }).mount('#app');
    </script>

</body>

</html>

Mi aporte

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">
        <h1>{{count}}</h1>
        <button @click="incrementar">Incrementar</button>
        <button @click="disminuir">Disminuir</button>
        <div>
            <h2>{{text}}</h2>
            <input v-model="text">
        </div>
    </div>
    
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    text: 'Hola vue!!'
                }
            },

            methods: {
                incrementar(){
                    this.count++;
                },

                disminuir(){
                    this.count--;
                },
                input(e){
                    this.text = e.target.value
                }
            },

            
        }).mount('#app')
        //console.log(vm);
    </script>
</body>

Yo hice un peque帽o enjemplo en el que combine el contador de la clase pasada y el input reactivo de esta, es algo simple, pero bueno.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    number: "1"
                };
            },
            methods:{
                increment(){
                    this.number++;
                },
                decrement(){
                    this.number--;
                }
            },
            template: `
                <p>{{ number }}</p>
                <input
                    type="number"
                    v-model="number"
                />
                <button @click="increment"> +1 </button>
                <button @click="decrement"> -1 </button>
            `
        }).mount("#app");
    </script>
</body>
</html>

Like si te diste cuenta que estabas caminando descalzo con JS Vanilla jajaja

Chulada de v-model

Una calculadora sencilla :

Este mismo ejemplo se hace en la clase de manipulaci贸n del DOM y la diferencia en simplificaci贸n y f谩cilidad es incre铆ble

Mis apuntes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app"></div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            text: "Hello Vue",
          };
        },
        /* methods: {
          input(event) {
            console.log(event.target.value);
            this.text = event.target.value;
          },
        }, */
        // template: `
        // <p>{{ text }}</p>
        // <input type="text" v-on:change="input" />
        // `,
        /* alias para poder utilizar
        Atributos -> :
        Eventos -> @
        : -> v-on
        @ -> v-bind

        La directiva v-model nos permite sincronizar el modelo y la vista, por lo que no necesitaremos los manejadores de eventos (methods)
        */
        /* template: `
        <p>{{ text }}</p>
        <input
          type="text"
          @input="input"
          :value="text"
        />
        `, */
        template: `
        <p>{{ text }}</p>
        <input
          type="text"
          v-model="text"
        />
        `,
      }).mount("#app");
      console.log(vm);
    </script>
  </body>
</html>

Asi resolvi el reto anterior

<div id="app">
  <p>{{ counter }}</p>
  <button type="submit" v-on:click="counter++">Incrementar</button>
  <button type="submit" v-on:click="counter--">Decrementar</button>
</div>

Para poner en pr谩ctica lo aprendido hice uso del two-way-data binding y utilic茅 un metodo para hacer un alert de lo escrito.

ejemplo de las dos formas

   const vm = Vue.createApp({
        data() {
          return {
            text: "Hello Vue",
            text2: "texto dos",
          };
        },
        methods: {
          input(e) {
            this.text = e.target.value;
          },
        },
        template: `
            <p>{{text}}</p>
            <input type="text" @input="input" :value="text"/>
            <input type="text" v-model="text2"/>
            <p>{{text2}}</p>
        `,
      }).mount("#app");

excelente clase