No tienes acceso a esta clase

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

Inputs reactivos

9/23
Recursos

Aportes 26

Preguntas 1

Ordenar por:

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

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

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,

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

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/vue@3"></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/vue@3"></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>

Cuando trabajamos con formularios en el frontend, a menudo necesitamos sincronizar el estado de los elementos de entrada del formulario con el estado correspondiente en JavaScript. Puede ser tedioso configurar manualmente las vinculaciones de valores y los escuchadores de eventos de cambio, como se muestra en el ejemplo a continuaci贸n:

<input
  :value="text"
  @input="event => text = event.target.value">

La directiva v-model nos ayuda a simplificar lo anterior a:

<input v-model="text">

Adem谩s, v-model se puede utilizar en diferentes tipos de elementos de entrada, como elementos de texto (<input>), elementos de 谩rea de texto (<textarea>), y elementos de selecci贸n (<select>). Se expande autom谩ticamente para ajustarse a diferentes pares de propiedades y eventos del DOM seg煤n el elemento en el que se utiliza:

  • Los elementos <input> de tipo texto y los elementos <textarea> utilizan la propiedad value y el evento input.
  • Los elementos <input> de tipo checkbox y <input> de tipo radio utilizan la propiedad checked y el evento change.
  • Los elementos <select> utilizan la propiedad value como una prop y el evento change como un evento.

Esta funcionalidad simplifica significativamente la manipulaci贸n de formularios en Vue.js, facilitando la sincronizaci贸n del estado del formulario con el estado de la aplicaci贸n JavaScript.

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/vue@next"></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

Me ha gustado bastante la exposici贸n de esta lecci贸n. Practico en VS Code cada ejemplo y tambi茅n lo escribo a mano alzada en mi aplicaci贸n de notas OneNote.

Buenas tardes Compa帽eros, Este es un ejemplo que realice.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div>
            <h2>{{ altertext.titulo }}</h2>
            <p>{{ altertext.subtitulo }}</p>
            <input type="number" v-model="altertext.text"/>
            <button @click = "increase()">+</button>
            <button @click = "decrease()">-</button>
            <button @click = "restart()">Reset</button>
        </div>
        <p>{{ altertext.text }}</p>
        
    </div>
    <script>
        const { createApp } = Vue;
        const counter = 0;

        createApp({
            data(){
                return {
                    altertext: {
                        text: 0,
                        titulo: 'Sumar y restar',
                        subtitulo: 'Introduce el numero'
                    }
                }
            },
            methods: {
                increase() {
                     this.altertext.text++;
                     console.log('Aumenta: ', this.altertext.text);
                },
                decrease() {
                    this.altertext.text--;
                    console.log('Disminuye: ', this.altertext.text);
                },
                restart() {
                    this.altertext.text = counter;
                    console.clear();
                    console.log('Limpia y Reinicia: ', this.altertext.text);
                }
            },
        }).mount('#app')
    </script>
</body>
</html>

La mayor diferencia entre Bind y Model por lo que investigue es que:

  • Bind es un enlace unidireccional, lo que significa que solo se puede actualizar el atributo, pero los cambios en el atributo no afectar谩n la variable.

  • Model es un enlace bidireccional, lo que significa que cualquier cambio en el input se reflejar谩 en la variable y cualquier cambio en la variable actualizar谩 el input.

Para usar todo lo aprendio realice este ejercicio usando un formulario que acepta el nombre del usuario y su contrase帽a

 <script>
      const { createApp } = Vue;

      createApp({
        data() {
          let nameInput = "";
          let passInput = "";
          return {
            nameInput,
            passInput,
          };
        },
        methods: {
          onSubmit(e) {
            const form = e.target;
            const formData = new FormData(form);
            const userName = formData.get("userName");
            const userPass = formData.get("userPass");
            const userInfo = {
              userName,
              userPass,
            };
            console.log(userInfo);
            this.nameInput = "";
            this.passInput = "";
          },
        },
        template: `
        <form v-on:submit.prevent="onSubmit">
          <input type="text" name="userName" placeholder="Alberto" v-model="nameInput" />
          <br />
          <input type="password" name="userPass" placeholder="****" v-model="passInput" />
          <br />
          <button type="submit">submit info</button>
        </form>
        `,
      }).mount("#app");
    </script>

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/vue@next"></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