Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Inputs reactivos

9/23
Recursos

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Atributos -> :

Eventos -> @

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

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>

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

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

Un golazo el v-model. Le quedaría bueno al mundo React algo así 😃

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

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

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=“text” />). No se necesitan métodos del tipo event handler para mantener sincronizado el estado del componente con el modelo.

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