Eventos de usuario

Hola, aquí mi solución al reto …

const vueMain = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }

            },
            template:`  <h1>{{ counter }}</h1>
                        <button v-on:click="increment">+1</button>
                        <button v-on:click="decrement">-1</button>`,
        }).mount("#app");

Martin Elias Echavez Meza

Solución al reto

Código

Vsqz Gabriel

Mi solución 😃

const vm = Vue.createApp({
        data() {
          return {
            count: 1,
          };
        },
        methods: {
          changingCounter(value) {
            this.count += value;
          },
        },
        template: `<div>
        <div>{{count}}</div>
        <button v-on:click="changingCounter(1)" type="button">+1</button>
        <button v-on:click="changingCounter(-1)" type="button">-1</button>
          </div>
          `,
      }).mount('#app');

José Reinaldo Duque Serna

Comparto mi código del reto. Como un tip se puede reemplazar v-on: por un @

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

    <div id="app">
        <button @click="increment">+</button>
        {{ counter }}
        <button @click="decrement">-</button>
        
    </div>

     <script src="https://unpkg.com/vue@next"></script>

    <script>
        const vm = Vue.createApp( {
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement () {
                    this.counter--;
                }
            }
        }).mount("#app");        
    </script>
    
</body>
</html>

Alfredo Javier Chanta Solis

Mi solucion 😃

 const vm = Vue.createApp({
            data() {
                return {
                    message: "Hola Mundo!",
                    counter: 0,
                };
            },
            methods: {
                increment() {
                    this.counter++,
                        console.log("click");
                },
                decrement() {
                    this.counter--;
                },
            },
            template: ` <button v-on:click="decrement">{{counter}}</button>
                            <input :value=counter>
                        <button v-on:click="increment">{{counter}}</button>`,
        }).mount('#app');

Geraldine Diaz

Aquí está mi solución:

Ayda Yineth Montoya Henao

Mi reto 😄

<!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>increment and Decrement</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
        
    <script>
    const vm = Vue.createApp({
            data() {
                return {
                    message: "Hello World!",
                    counter: 0,
                };
            },
            methods: {
                increment() {
                    this.counter++,
                        console.log("click");
                },
                decrement() {
                    this.counter--;
                },
            },
            template: ` <button v-on:click="decrement">{{counter}}</button>
                        <input :value=counter>
                        <button v-on:click="increment">{{counter}}</button>`,
        }).mount('#app');
        console.log(vm);
    </script>
</body>
</html>

José Alberto Ramírez Quiroz

Reto cumplido hasta ahora el mejor curso que e visto de vue

const vm = Vue.createApp({
    data() {
      return {
        message: 'Experimentos con VUE3',
        add:'+',
        counter:0,
        rest:'-'
      }
    },
    methods:{
        increment(){
          this.counter++
        },
        decrement(){
          this.counter--
        }
    },
    template:
      `
        <h1>{{message}}</h1>
        <button v-on:click="decrement">{{rest}}</button>
        <label>{{counter}}</label>
        <button v-on:click="increment">{{add}}</button>

      `
}).mount('#app')

George Bryant Gutiérrez Gastélum

const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                add() {
                    this.counter++;
                },
                subtract() {
                    this.counter--;
                }
            },
            template: `
                <form v-on:submit.prevent.stop>
                    <button v-on:click="subtract">-</button>
                        {{ counter }}
                    <button v-on:click="add">+</button>
                </form>`,
        }).mount("#app");

Angel Ponce

Aca mi solucion al reto de la clase, le agregue una validacion al counter para que nunca dismuya mas de 0, espero les sea de ayuda 😃

const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter === 0 ? this.counter = 0 : this.counter--
                }
            },
            template: `<button v-on:click="increment"> + </button><p>{{ counter }}</p><button v-on:click="decrement"> - </button>`
        }).mount('#app');

José Reinaldo Duque Serna

Contador entre un rango de 0 a 9…

<button @click="counter++" :disabled="counter>8">+</button>
        {{ counter }}
        <button @click="counter--" :disabled="counter<1">-</button>

LUIS MIGUEL OLARTE BELLO

hace 5 meses

Cordial saludo, aquí les dejo mi solución al reto:

<!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@3/dist/vue.global.js"></script>
  <div id="app"></div>
  <script>
    Vue.createApp({
      data(){
        return{
          counter:0
        };
      },
      methods: {
        increment(){
          this.counter++;
        },
        decrement(){
          this.counter--
        }
      },
      template:`<button v-on:click="increment">+</button>
      <p>{{counter}}</p>
      <button v-on:click="decrement">-</button>`
    }).mount("#app");
  </script>
</body>
</html>

Emanuel Camarena

hace 5 meses

Mi solucion:

<!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>Ejercicio Aumentar y decrementar </title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="contador"></div>
    <script>
        const {createApp} = Vue;
        createApp({
            data(){
                return{
                    counter:0
                }
            },
            methods:{
                add(e){
                    e.preventDefault();
                    this.counter++;
                },
                minus(e){
                    e.preventDefault();
                    this.counter--;
                },
                reset(e){
                    e.preventDefault();
                    this.counter = 0;
                }
            },
            template:`
                <form><label>Counter: {{counter}}</label></form>
                <br>
                <form v-on:submit="add"><button>+</button></form>
                <br>
                <form v-on:submit="minus"><button>-</button></form>
                <br>
                <form v-on:submit="reset"><button>Reset</button></form>
            `
        }).mount("#contador")
    </script>
</body>
</html>

Daniel Briceño

Acá mi desafio 😄

<!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 img1 = "https://placeimg.com/280/240/tech";
      const img2 = "https://placeimg.com/200/150/tech";
      const vm = Vue.createApp({
        data() {
          return {
            counter: 0,
            event: "click",
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
            if (this.counter < 0) this.counter = 0;
          },
        },
        template: `<div style="display: flex; flex-direction: column; width: 200px; justify-content: center; aling-items: center; background-color: #eee; border-radius: 8px; padding: 10px">
                      <p style="font-size: 2rem; background-color: #fff; border-radius: 8px; padding: 2px 4px;">{{ counter }}</p>
                      <div style="display: flex; flex-direction: row; justify-content: center; aling-items: center;">
                        <button style="border: none; background-color: #0066ff; color: #fff; border-radius: 8px; padding: 4px 8px; margin-right: 10px;"  v-on:[event]="increment">Increment!</button>
                        <button style="border: none; background-color: #0066ff; color: #fff; border-radius: 8px; padding: 4px 8px; "  v-on:[event]="decrement">Decrement!</button>
                      <div/>
                    </div>`,
      }).mount("#app");
      console.log(vm);
    </script>
  </body>
</html>

Jose Barboza

<body>
  <script src="https://unpkg.com/vue@3"></script>
  <div id="app"></div>
  <script>
    Vue.createApp({
      data(){
        return {
          value: 0
        }
      },
      methods:{
        operation(add) {
          this.value += add
        }
      },
      template: `<button type="button" @click="operation(+1)">+</button>{{ value }}<button type="button" @click="operation(-1)">-</button>`
    }
    ).mount("#app");
  </script>
</body>
</html>

Herdic Asmeth Diaz Munevar

hace 6 días

Captura de pantalla 2023-09-26 165729.png

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="section">
        <div class="row mx-auto d-flex justify-content-center">
            <button v-on:click="decrement" class="btn btn-danger btn-lg btn-block"> - </button>
            <button v-on:click="increment" class="btn btn-success btn-lg btn-block"> + </button>
            <h1 class=""> {{ counter }}</h1>
        </div>
    </div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },

                decrement() {
                    this.counter--;
                }
            }
        }).mount("#section");
    </script>
</body>

</html>```

David Espino

hace 22 días

Aquí mi solución:

 const vm = Vue.createApp({
      data() {
        return {
          counter: 0
        };
      },
      methods: {
        increment() {
          this.counter++;
        }, 
        decrement() {
          this.counter--;
        }
      },
      template: `
      <p>{{ counter }}</p>
      <button v-on:click="increment">+</button>
      <button v-on:click="decrement">-</button>
      `,
    }).mount('#app');

Ángela Sofía Osorio García

hace 25 días

Acá dejo mi solución. Solo le di estilos desde las devtools😅

WhatsApp Image 2023-09-06 at 11.17.21 PM (1).png

 <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0,
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            },
            template: `
            <form>
                <button v-on:click.prevent="increment" > + </button>
                <button v-on:click.prevent="decrement" > - </button>
                <div><p>{{counter}}</p></div>
            </form>`
        }).mount("#app");
        console.log(vm)
    </script>

Ángela Sofía Osorio García

hace 25 días

Directiva v-on

La directiva v-on en Vue.js se utiliza para adjuntar un escuchador de eventos a un elemento en el DOM y responder a eventos específicos, como clics de ratón, pulsaciones de teclas, etc. También puedes usar la forma abreviada @ en lugar de v-on. A continuación, se detallan los aspectos clave de v-on:

v-on se utiliza para adjuntar un escuchador de eventos a un elemento y responder a eventos específicos, como clics de ratón, pulsaciones de teclas, etc.
También puedes utilizar la forma abreviada @ en lugar de v-on. Por ejemplo, @click es equivalente a v-on:click.

Argumento:

El argumento especifica el tipo de evento al que se desea responder. Puede ser el nombre de un evento, como “click” o “input”.
El argumento es opcional si se utiliza la sintaxis de objeto para asociar múltiples eventos y controladores sin un evento específico.

Modificadores:

Los modificadores se utilizan para personalizar el comportamiento del escuchador de eventos. Algunos ejemplos incluyen .stop, .prevent, .capture, .self, .once, .left, .right, .middle, .passive, y .keyAlias. Cada modificador tiene un propósito específico. Por ejemplo, .stop se utiliza para detener la propagación del evento, .prevent se utiliza para prevenir el comportamiento predeterminado del evento, y .once asegura que el evento se dispare a lo sumo una vez.

Detalles:

El tipo de evento se especifica en el argumento.
La expresión que se ejecutará cuando ocurra el evento puede ser un nombre de método, una declaración en línea o incluso omitirse si se usan modificadores. Por ejemplo, v-on:click="doThis" ejecutará el método doThis cuando ocurra un evento de clic.
Cuando se usa en un elemento HTML estándar, v-on escucha eventos DOM nativos.
Cuando se usa en un componente de elemento personalizado, v-on escucha eventos personalizados emitidos por ese componente hijo.
Si se usa una declaración en línea, puedes acceder al objeto $event especial para obtener información sobre el evento actual. Por ejemplo, v-on:click="handle('ok', $event)" pasa el evento como argumento a la función handle.

Ejemplos de código:

<!-- Escuchar el evento 'click' y llamar al método 'doThis' -->
<button v-on:click="doThis"></button>

<!-- Forma abreviada dinámica para especificar el evento -->
<button @[event]="doThis"></button>

<!-- Usar una declaración en línea y pasar el evento como argumento -->
<button @click="doThat('hello', $event)"></button>

<!-- Forma abreviada de la sintaxis -->
<button @click="doThis"></button>

<!-- Detener la propagación del evento -->
<button @click.stop="doThis"></button>

<!-- Prevenir el comportamiento predeterminado del evento -->
<button @click.prevent="doThis"></button>

<!-- Prevenir el comportamiento predeterminado del evento sin una expresión -->
<form @submit.prevent></form>

<!-- Combinar modificadores -->
<button @click.stop.prevent="doThis"></button>

<!-- Modificador de tecla usando 'keyAlias' (en este caso, Enter) -->
<input @keyup.enter="onEnter" />

<!-- El evento de clic se activará como máximo una vez -->
<button v-on:click.once="doThis"></button>

<!-- Usar la sintaxis de objeto para vincular varios eventos a varios controladores -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- Escuchar eventos personalizados en un componente hijo -->
<MyComponent @my-event="handleThis" />

<!-- Declaración en línea con evento personalizado -->
<MyComponent @my-event="handleThis(123, $event)" />

Estos son ejemplos de cómo usar la directiva v-on en HTML para escuchar diferentes eventos y aplicar modificadores según sea necesario en un contexto de aplicación Vue.js. Para obtener más información sobre el manejo de eventos, consulta la documentación de Vue.js en la sección “Event Handling” y la sección de “Components - Custom Events”.

WALTER GERARDO GONZÁLEZ SÁNCHEZ

hace un mes

Hola compañeros, este es el 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>
            <button @click = "increase()">+</button>
            <button @click = "decrease()">-</button>
            <button @click = "restart()">Reset</button>
            <p>Resultado</p>
            <span>{{ counter }}</span>
        </div>
    </div>
    <script>
        const { createApp } = Vue;
        const initialValue = 0;

        createApp({
            data(){
                return {
                     counter: initialValue
                }
            },
            methods: {
                increase() {
                     this.counter++;
                     console.log('Aumenta: ', this.counter);
                },
                decrease() {
                    this.counter--;
                    console.log('Disminuye: ', this.counter);
                },
                restart() {
                    this.counter = initialValue;
                    console.clear();
                    console.log('Limpia y Reinicia: ', this.counter);
                }
            },
            template: ``
        }).mount('#app')
    </script>
</body>
</html>

axlina90

hace un mes

Anexo mi solución al reto:

Edwar David Macias Lopez

hace 2 meses

    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    evt: "click",
                    counter : 0,
                };
            },
            methods: {
                aumento() {
                    this.counter++;
                },
                disminuir(){
                    this.counter--;
                }
            },
            template:`<form>
                <button v-on:[evt].prevent ="aumento"> aumentar</button>
                <button v-on:[evt].prevent="disminuir">disminuir</button>
                    </form>
                    <div id="cajita"><h1>{{counter}}</h1> </div>`
        }).mount("#app");
    </script>

Fran Muñoz

Con números naturales 😙

var app = new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
        methods: {
          increment(e) {
            this.counter++;
          },
          decrement(e) {
            if (this.counter > 0) this.counter--;
          },
        },
        template:`<div class="container"><h1>{{ counter }}</h1>
                <button @click="increment">+1</button>
                <button @click="decrement">-1</button>
            </div>`,
      });

Style 😎

 .container{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: 'Roboto', sans-serif;
        }
        .container button:hover{
            border: 1px solid #2200e2;
            background-color: #2200e2;
            color: #fff;
        }
        .container button{
            transition: all 0.3s ease-in-out;
            margin: 10px;
            padding: 10px;
            width: 100px;
            border-radius: 5px;
            color: #2200e2;
            border: 1px solid #2200e2;
            background-color: #fff;
            cursor: pointer;
        }

Josue David

Aqui mi solucio

<!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@next"></script>
    <div id="app"></div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            evt: "submit",
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
        template: `<div>
            <p>{{counter}}</p>
            <button v-on:click="increment">+</button>
            <button v-on:click="decrement">-</button>
          </div>`,
        <!-- template: `<form v-on:[evt].prevent.stop="submit"><button>{{counter}}</button></form>`, -->
      }).mount("#app");
    </script>
  </body>
</html>

Héctor Galindo


	 const vm = Vue.createApp({
        data() {
          return {
            evt: 'submit',
            counter: 0
          };
        },
        methods: {
          submit() {
            console.log('A submit')
          },
          increment(){
            this.counter++
            console.log('INCREMENT!')
          },
          decrement() {
            this.counter--;
            console.log('DECREMENT!')
          },
          resetCounter() {
            this.counter = 0;
            console.log('RESETED!')
          }
        },
        template: ` <button v-on:click='increment'>+</button> <button v-on:click="decrement">-</button> <button v-on:click="resetCounter"> RESET! </button> <p>{{counter}}</p>`,
      }).mount("#app");

Raul Valdez Piedra

Mi contador

<!-- javascrip para inicializar vue -->
   <script>
      const vm = Vue.createApp({
         data() {
            return {
              counter: 0
            };
         },
         methods: {
            increment() {
               this.counter++;
            },
            decrement() {
               this.counter--;
            },
            restart() {
               this.counter = 0;
            }
         },
         template:`            
            <button v-on:click="increment">Incrementar</button>
            <span>&nbsp&nbsp&nbsp{{ counter }}&nbsp&nbsp&nbsp</span>
            <button v-on:click="decrement">Decrementar</button>&nbsp&nbsp&nbsp
            <button v-on:click="restart">Reiniciar</button>
         `,         
      }).mount("#app");
   </script>

Jorge Clavijo

aporte

<!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@3/dist/vue.global.js"></script>
    <div id="app">
        
    </div>
    <script>
        const vm = Vue.createApp({
            data(){
                return {
                    counter: 0,
                    emojiAdd : "➕",
                    emojiSub: "➖",
                    emojiRest: "🔂"
                };
            },
            //template: `<img v-bind:src="img" v-bind:alt="img">`
            methods: {
                increment(){
                    this.counter++;
                },
                decrement(){
                    this.counter--;
                },
                reset(){
                    this.counter=0;
                }
            },
            template: `<button v-on:click="increment">{{emojiAdd}}</button>
                       <button v-on:click="decrement">{{emojiSub}}</button>
                       <button v-on:click="reset">{{emojiRest}}</button>
                       <button>{{ counter }}</button>`

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

Miguel Alvarez Garcia

Comparto mi solución del reto

<!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>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
         counter: 0
        };
      },
      methods: {
        increment(){
          this.counter++;
        },
        decrement(){
          this.counter--;
        }
      },
     template: `<div><button v-on:click="increment"> + </button>{{ counter }}<button v-on:click="decrement"> - </button></div>`
    }).mount("#app");
    console.log(vm);
  </script>
</body>
</html>

Isaac Rosas Jimenez

const vm = Vue.createApp({
            data(){
                return {
                    counter: 0,
                    evt:"submit"
                };
            },
            methods:{
                increment(){
                    console.log("click");
                    this.counter++;
                },decrement(){
                    console.log("click");
                    if(this.counter > 0){
                        this.counter--;
                    }
                }
            },
            template: `<div class="container">
                            <div class="number">{{counter}}</div>
                            <button class="btn" v-on:click="increment">+</button>
                            <button class="btn" v-on:click="decrement">-</button>
                        </div>`
        }).mount("#app");

Néstor Raúl Guzmán Díaz

En mi solucion al reto agregue una directiva :disabled para que se deshabilite el boton de decrementar cuando llegue a 0

 const vm = Vue.createApp({
        data() {
            return {
              evt: "submit",  
              counter: 0
            };
        },
        methods: {
            increment(){
                this.counter++;
            },
            decrement(){
                this.counter--
            }
        },
        template: `<div>
                        <button @click="decrement" :disabled="this.counter <= 0"> - </button>
                        <label>{{ counter }}</label>
                        <button @click="increment"> + </button>
                   </div>`
    }).mount("#app");

arturo CQ

Reto Terminado

<!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@3/dist/vue.global.js"></script>

    <div id="app"></div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    reset: "reset",
                    increase: "+",
                    decrease: "-",
                    counter: 0
                };
            },
            methods: {
                resetCounter(){
                    this.counter = 0;    
                },
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            },
            template: `
                <button v-on:click="resetCounter">{{reset}}</button>
                <button v-on:click="increment">{{increase}}</button>
                <button v-on:click="decrement">{{decrease}}</button>
                <span>{{counter}}</span>`
        }).mount("#app");
    </script>
</body>

</html>

Ernesto Guzman Alcaraz

hace 5 meses

<script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                decrement () {
                    this.counter--;
                },
                increment() {
                    this.counter++;
                }
            },
            template: `<button @click="decrement">-</button> {{ counter }} <button @click="increment">+</button>`
        }).mount("#app");
    </script>

Fabián Gabriel Soto Canales

Mi solucion fue esta:

Captura de pantalla 2023-04-03 230603.png

José Pérez

<script>
        const vm = Vue.createApp({
            data(){
                return {
                    counter: 0
                };
            },
            methods: {
                mas() {
                    this.counter++
                }, 
                menos() {
                    this.counter--
                }
            },
            template: `<button v-on:click="mas">+</button> <button>{{ counter }}</button> <button v-on:click="menos">-</button>`
        }).mount('#app');

Jesús Alexis Tenorio Hernández

Mi solucion al reto

fernastereo

Reto:

<script>
      const vm = Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
        template: `
          <button v-on:click="increment">+</button>
          <p>Counter: {{counter}}</p>
          <button v-on:click="decrement">-</button>
          `,
      }).mount("#app");
    </script>

Gabriel Puig

Esto incrementa y cambia de color el botón:

    const vm = Vue.createApp({
        data() {
            return {
                event: 'click',
                counter: 0

            };
        },
        methods: {
            devCol(e) {
                this.counter++;
                e.target.style.backgroundColor = colors[this.counter];
                if (this.counter == 0 || this.counter > 5) {
                    e.target.style.backgroundColor = colors[0];
                    this.counter = 0;
                }
            },
        },
        template: `<button v-on:[event]="devCol" class="buton">{{counter}} </button>`
    }).mount('#app');
</script>

James Noria

hace 7 meses

<!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>VueJS</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app"></div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          }
        },
        template: `<h1>{{counter}}</h1><button v-on:click="increment">+</button> <button v-on:click="decrement">-</button>`,
      }).mount('#app');
    </script>
  </body>
</html>

Álvaro Josué Prado Tenorio

hace 7 meses

Este es mi resultado

 const vm = Vue.createApp({
        data() {
            return {
                evt: "click",
                counter: 0
            };
        },
        methods:{
            increment(){
              this.counter++;
            },
            decrement(){
              this.counter--;
            }
        },
        template: `<h1>Prueba con Vue </h1><div>{{counter}}</div><button v-on:click="increment">{{counter}}</button><button v-on:click="decrement">{{counter}}</button>`
    }).mount("#app");

Santiago Velásquez Serna

hace 7 meses

Si no es muy larga la función, la podemos pasar directamente en las comillas:

   	<button @click="count--">-</button>
            <span>{{count}}</span>
        <button @click="count++">+</button>

Oficina Sistemas

Reto solucionado

const vm = Vue.createApp({
        data(){
            return {
                counter: 0,
                evt: "click"
            };
        },
        methods: {
            aumentar(){
                this.counter++;
            },
            disminuir(){
                this.counter--;
            }
        },
        template: `<label>Ingresa un número</label><input type="text" v-model="counter"><button v-on:[evt]="aumentar"> + </button><button v-on:[evt]="disminuir"> - </button>`
    }).mount("#napp");

Yoel Barrios Chinchayhuara

Mi solución

<div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods:{
                incrementar(){
                    this.counter++;
                },
                decrementar(){
                    this.counter--;
                }
            },
            template: `<button v-on:click="incrementar">+</button> <span>{{counter}}</span> <button @click="decrementar">-</button>`
        }).mount("#app");
    </script>

Osvaldo Sevilla

    const vm = Vue.createApp({
        data() {
            return {
                counter: 0,
            };
        },
        methods:{
            increment(){
                this.counter++;
            }
            ,decrement(){
                if(this.counter > 0){
                    this.counter--;
                }
            }
        },
        template: '<button v-on:click="increment"> Sumar </button><button v-on:click="decrement"> Restar </button><br><br><div>Contador: {{ counter }}</div>'
    }).mount("#app");

Leonidas Alberto Ubaque Sandoval

Este sería el mío:

    <script>
        const vm = Vue.createApp({
            data() {
                return{
                    //Siempre retorna un objeto JSON
                    counter:0
                };
            },
            methods:{
                increment(){
                    console.log("click!");
                    this.counter++;
                }  
            },
            template:`<button v-on:click="increment">{{counter}}</button>`//Template
        }
        ).mount("#app");

        const keyUp = Vue.createApp({
            data(){
                return{
                    counter:0
                };
            },
            methods:{
                decrement(){
                    console.log("Key Up!");
                    this.counter--;
                }
            },
            template:`<button v-on:keyup="decrement">{{counter}}</button>`

        }).mount("#keyUp")

        console.log (vm);
    </script>

Ruddy Milton Cordero Torrez

<script>
        const vm = Vue.createApp({
            data(){
                return {
                    counter:0,
                };
            },
            methods:{
                increment(){
                   this.counter++; 
                },
                decrement(){
                   this.counter--; 
                }
            },
            template: `<button @click="increment">+</button>
                            <p>{{ counter }}</p>
                        <button @click="decrement">-</button>
                        `
        }).mount("#app")

        
    </script>

Ricardo Martin

Primer reto

const vueMain = Vue.createApp({
            data() {
                return {
                    mensaje: 'Primer reto con Vue.js',
                    signoMas:'+',
                    contador:0,
                    signoMenos:'-',
                    reinicio:'Reinicio'
                };
            },
            methods: {
                increment() {
                    this.contador++;
                },
                decrement() {
                    this.contador--;
                },
                reset() {
                    this.contador=0;
                }

            },
            template:`<h1>{{mensaje}}</h1>
                      <button v-on:click="increment">{{ signoMas }}</button> 
                      <button>{{ contador }}</button> 
                      <button v-on:click="decrement">{{ signoMenos }}</button>
                      <br>
                      <button v-on:click="reset">{{ reinicio }}</button>`
        }).mount("#app");

Carlos Villamil

Solución reto!

<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@3/dist/vue.global.js"></script>
    <div id="app">        
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: "<p>Hola Vue</p>",
                    counter: 0,
                };
            },
            methods:{
                increment() {                    
                    this.counter++
                },
                decrement() {                    
                    this.counter--
                }
            },
            template: `<button v-on:click="increment">+</button>
                        <button v-on:click="decrement">-</button>
                        <p>{{counter}}</p>`
        }).mount("#app");
        console.log(vm)
    </script>
    
</body>
</html>

RAUL DANIEL NAVARRO MONJA

const vm = Vue.createApp({
      data() {
        return {
          total: 0
        };
      },
      template: `
        <div>
          <button @click="totalIncrement">+1</button>
          <button @click="totalDecrement">-1</button>
          <span>Total: {{total}}</span>
        </div>
      `,
      methods: {
        totalIncrement() {
          this.total++;
        },
        totalDecrement() {
          this.total--;
        }
      },
    }).mount("#app");

Santiago Amaya

Esta es mi solución al reto. Añadí que si está en 0 no disminuya más

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                increment() {
                    vm.count++;
                },
                decrement() {
                    if (this.count > 0){
                    this.count--;
                    }
                }
            },
            template: `
            <h1>Counter</h1>
            <h2>{{ count }}</h2>
            <button v-on:click="increment">add</button>
            <button v-on:click="decrement">remove</button>`,
        }).mount("#app");
    </script>

David Hernandez

Es posible que se pueda hacer más sencillo con una sola función, pero ya que no encontré como enviar argumentos desde el template, lo hice de esta manera:

<script>
        const vm = Vue.createApp({
            data(){
                return{
                    counter: 0,
                };
            },
            methods:{
                dismi(){
                    if( this.counter == 0){
                        this.counter == 0;
                    }
                    else{
                        this.counter--;
                    }                 
                },
                aumen(){
                    this.counter++;
                }
            },
            template:'<form> <button v-on:click.prevent="dismi"> - </button><button>{{ counter }}</button><button v-on:click.prevent="aumen"> + </button></form>'
        }).mount("#app");
    </script>

Luis Isaac Muñoz García

reto cumplido, el botón de decremento esta validado para que no siga restando después de cero

Vue.createApp({
            template: 
            `<button v-on:click="increment">+</button>
                <input type="number" v-model="counter">
            <button v-on:click="decrement">-</button>`,
            data(){
                return{
                    counter: 0       
                };
            },
            methods: {
                increment(){
                    this.counter++
                },
                decrement(){
                    if (this.counter <= 0) {
                        return false
                    }else{
                        this.counter--
                    }
                }
            }
        }).mount("#app")

Deyvid Antonio Arauz Cruz

Estoy utilizando CodeSandbox para hacer la practica, les comparto mi codigo,

<template>
  <div class="hello">
    <h3>Counter</h3>
    <div class="counter-container">
      <button @click="incrementDecrementCounter('increment')">Add</button>
      <h1>Total {{ counter }}</h1>
      <button @click="incrementDecrementCounter('decrement')">Reduce</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    incrementDecrementCounter(action) {
      if (action == "increment") this.counter++;
      else this.counter--;
    },
  },
};
</script>

Misa martinez de la cruz

Neyder Piedrahita Bellido

Buenas tardes Envío mi reto.

    const app = Vue.createApp({
        data() {
            return { 
          counter:0              
            };             },
        methods: {
          
             //  this.counter++;
               increment(){
              this.counter++;
               console.log("click");
              // console.log()  
            },
            decrement(){
                this.counter--;
                console.log("click");
            }                
       
        },
        template: `<button v-on:click="increment">+</button>  {{ counter }}  <button v-on:click.prevent="decrement">-</button>`
    }).mount("#app");

Miguel Angel Ayala Mendoza

Buenas tardes!! Mi respuesta al reto

const vm = Vue.createApp({
            data(){
                return {
                    counter: 0
                }
            },
            methods: {
                contador(accion){
                    switch(accion){
                        case "increment":
                            this.counter++; 
                            break;
                        case "decrement":
                            this.counter--;
                            break;
                    }
                    console.log(this.counter);
                },
               
            },
            template: `<button v-on:click="contador('decrement')"> - </button> {{ counter }} <button v-on:click="contador('increment')"> + </button>`
        }).mount("#app");

Nacho Cornejo

<script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                decrement(e) {
                    this.counter--;
                    e.preventDefault();
                },
                increment(e) {
                    this.counter++;
                    e.preventDefault();
                }
            },
            template: `
            <h1>{{ counter }}</h1>
            <form>
                <button v-on:click="increment">Agrega</button>
                <button v-on:click="decrement">Resta</button>
            </form>
            `
        }).mount("#app");
        console.log(vm);
</script>

Emmanuel Alsina

hace 10 meses

así fue como me funciono!!

 methods: {
                increment() {
                    this.counter++;
                },

                decrement() {
                    this.counter--;

                }
            
            },
            template: `<form>
                <p>{{counter}}</p>
                <button v-on:click.prevent="increment">[suma]</button>
                <button v-on:click.prevent="decrement">[resta]</button>
                </form>`
        }).mount("#app");

David Gilberto Galindo Sánchez

hace 10 meses

Mi desafío! 😄

<!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">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return{
                    counter: 0
                };
            },
            methods: {
                disminuir(d) {
                    this.counter--;
                },
                incrementar(i) {
                    this.counter++;
                }
            },
            template: 
                `
                <div class="container">
                    <p class="text-center fs-1">Eventos de Usuario</p>
                    <p class="text-center fs-1">{{ counter }}</p>
                    <div class="d-grid gap-0 col-12 d-md-flex justify-content-md-end">
                        <button class="btn btn-outline-danger col-5 btn-sm" type="button" v-on:click="disminuir">Restar 1</button>
                        <div class="container col-2"></div>
                        <button class="btn btn-outline-primary col-5 btn-sm" type="button" v-on:click="incrementar">Sumar 1 </button>
                    </div>
                </div>
                `
            }).mount("#app");
    </script>
</body>
</html>

Johan Andrés Sabino Castro

hace 10 meses

Acá mi humilde solución. Espero guste :3

const vm = Vue.createApp({
        data() {
          return {
            evt: "submit",
            counter: 15,
          };
        },
        methods: {
          increment() {
            this.counter += 1;
          },
          decrement() {
            this.counter -= 1;
          },
        },
        template: `<button v-on:click="increment">{{"Suma 1"}}</button></br><button v-on:click="decrement">{{"resta 1"}}</button><div><p>El total de la operación es:</p>{{counter}}</div>`,
      }).mount("#app");

Jehison Orostegui

const vm = Vue.createApp({
      data() {
        return {
          counter: 0
        };
      },
      methods: {
        add() {
          this.counter++;
        },
        subtract() {
          this.counter--;
        }
      },
      template: `<h1>{{ counter }}</h1>
      <button v-on:click="add">INCREMENTAR</button>
      <button v-on:click="subtract">DISMINUIR</button>`
    }).mount("#app");

Miguel Sosa

Solución

  const vm = Vue.createApp({
      data() {
        return {
          event: "submit",
          counter: 0,
        };
      },
      methods: {
        increment() {
          this.counter++;
        },
        decrement() {
          this.counter--;
        },
      },
      template: `
        <p>Count: {{ counter }}</p>
        <button v-on:click="increment">+</button>
        <button v-on:click="decrement">-</button>
      `,
    }).mount('#app')

Rosa Ramírez

Hola, aquí está mi código

const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                decrease(e) {
                    this.counter--;
                },
                increment() {
                    this.counter++;
                }
            },
            template: `<form>
                            <button type="button" v-on:click.prevent="decrease"> - </button>
                            <label> {{counter}} </label>
                            <button v-on:click.prevents="increment"> + </button>
                        </form>`
        }).mount("#app");

Edgardo Augusto Rivas Escalona

cumpliendo el reto ![]()

Ramsés Alejandro Camas Nájera

Mi solución al reto fue la siguiente:

const vm = Vue.createApp({
            data(){
                return {
                    counter: 0   
                };
            },
            methods: {
                increment(){
                    this.counter++;
                },
                decrement(){
                    if(this.counter > 0){
                        this.counter--;
                    }
                }
            },
            template: `<button v-on:click="increment"> 
                        Incrementar </button>
                        <button v-on:click="decrement"> 
                        Reducir </button>
                        <div> Total: {{ counter }} </div>`
        }).mount("#app");

Omar Gavidia

Mi codigo:

<!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@3/dist/vue.global.js"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data(){
                return {
                    counter: 0
                };
            },
            methods: {
                increment(){
                    this.counter++;
                },

                decrement(){
                    this.counter--;
                },
            },
            template: ` <h1>Valor : {{ counter }}</h1>
            <button v-on:click="increment">Aumenta</button><br>
            <button v-on:click="decrement">Disminuye</button>,
            `
        }).mount("#app");
    </script>
</body>
</html>

Johan Danilo Garzón Forero

Hola, esta es mi solución al reto

const vm = Vue.createApp({
	data(){
		return {
			counter: 0
		}
	},
	methods: {
		increment() {
			this.counter ++
		},
		decrement() {
			this.counter --
		}
	},
	template: `
		<button @click="decrement">-</button>
		<h3>{{ counter }}</h3>
		<button @click="increment">+</button>
	`
}).mount('#app')```

Ramiro Mendoza Sánchez

<script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data(){
                return{
                   counter: 0,
                };
            },
            methods: {
                increment(){
                    this.counter++;
                },
                decrement(){
                    if (this.counter === 0) {
                        this.counter = 0
                    }else{
                        this.counter--;
                    }
                    
                }
            },
            template: 
            `
            <button v-on:click="increment">+</button>
            <button v-on:click="decrement">-</button>
            <label>{{counter}}</label>

            `
        });
        vm.mount("#app");

Jonathan Giraldo

Mi solución al reto.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Vue js with CDN</title>
    </head>
    <body>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <div id="app"></div>

        <script>
            const vm = Vue.createApp({
                data() {
                    return {
                        counter: 0
                    };
                },
                methods:{
                    increment() {
                        this.counter++;
                    },
                    decrement() {
                        this.counter--;
                    },
                    counterReset() {
                        this.counter = 0;
                    }
                },
                template: `
                  <p>{{ counter }}</p>
                  <button v-on:click="increment">Increment</button>
                  <button v-on:click="decrement">Decrement</button>
                  <button v-on:click="counterReset">Reset</button>
                `
            }).mount("#app");

        </script>
    </body>
</html>

fabio andres zamora osorio

Solucion del reto: solo publico la logica del metodo ya que el resto del codigo lo tengo con muchos comentarios.

methods: {
incremDecrem(e) {

//se obtienen los 2 botones mediante su id
	b1= document.getElementById("bu1")
b2= document.getElementById("bu2")

 //se compara si el elemento que disparo el evento es igual a el boton de incremento o si es igual al boton de decremento                     
        if(e.target===b1){
        	this.counter++;
        }else if (e.target===b2) {
                this.counter--
          }
  }
}

Jose Alejandro Pantoja Giraldo

Cuando usamos el v-on, tambien lo podemos reemplazar con @ unicamente, de esta manera @submit.prevent=“submit2”

Elena Palomar Llorente

Hola! este es el código de mi reto:

const vm = Vue.createApp({
        data() {
          return {
            evt: "click",
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
        template: `
          <button v-on:[evt]="increment">+</button>
          <button v-on:[evt]="decrement">-</button>
          <p>{{ counter }}</p>
          `,
      }).mount("#app");

Anderson Eduardo Arévalo Ramírez

Muy buena clase, realmente no es complicado. Se parece mucho como FastApi maneja los modelos en formato JSON y rutea todo internamente.

José Alfonso Carrillo Bermudez

<!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>JAC</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app"></div>
    <script>
      //   const { createApp } = Vue;

      const vm = Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          decrement() {
            this.counter--;
          },

          increment() {
            this.counter++;
          },
          minValue() {
            if (this.counter === 0) return true;
          },
        },
        template: `
             <button :disabled="minValue()" @click="decrement">-</button>
             <p>{{ counter }}</p>
             <button @click="increment">+</button>
        `,
      }).mount("#app");
    </script>
  </body>
</html>

Mateo Agudelo Echavarria

Mi solución…

   const vm = Vue.createApp({
        data() {
            return {
                evt: "click",
                contador: -1
            };
        },
        methods: {
             incremento() {
                 this.contador++
             },
             restar() {
                 this.contador--
             },
        },
        // template:`<button v-on:click="incremento" >{{ contador }}</button>`
        // template:`<button v-on:keyup="incremento" >{{ contador }}</button>`
        template:`
        <p>{{contador}}</p>
         <div>
            <button v-on:[evt]="incremento">Sumar</button>
            <button v-on:[evt]="restar">Restar</button>
         </div>
        </form>`
    }).mount('#mono')

Andres Rodriguez

<!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@3/dist/vue.global.js"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data(){
                return {
                    counter: 0  
                };
            },
            methods:{
                suma(){
                    this.counter++;
                },
                resta(){
                    this.counter--;
                },
                reset(){
                    this.counter = 0
                }
            },
            template: `
            <button v-on:click="reset">{{ counter }}</button>
            <button v-on:click="suma">+</button>
            <button v-on:click="resta">-</button>`
            
        }).mount("#app");
        console.log(vm)
    </script>
</body>
</html>

<code>

Wilmar Malaver Malaver

<script>
        const vm =Vue.createApp({
            data() {
                return {
                    counter : 0
                };
            },
            methods: {
                // submit (e) {
                //     e.preventDefault();
                // }
                increment () {

                    this.counter++
                },
                decrement () {
    
                    this.counter--
                }
            },

            template: `<form>
                        <div class="botones">
                            <button v-on:click.prevent="decrement"> - </button>
                            <p>{{ counter }}</p>
                            <button v-on:click.prevent="increment"> + </button>
                        </div>
                        </form>`
        }).mount("#app");
    </script>

Wilmar Malaver Malaver

                this.counter++
            },
            decrement () {

                this.counter--
            }
        },

        template: `<form>
                    <div class="botones">
                        <button v-on:click.prevent="decrement"> - </button>
                        <p>{{ counter }}</p>
                        <button v-on:click.prevent="increment"> + </button>
                    </div>
                    </form>`
    }).mount("#app");
</script>

Juan Guillermo Perez Cardozo

    <script>
      const vm = Vue.createApp({
        data(){
            return {
              counter: 0, limit: 10,
            };
        }, //data
        methods: {
          incrementar(){
            this.counter++;
          },
          decrementar() {
            this.counter--;
          },
          enviar(e){
            e.preventDefault();
          }
        },
        template: `<form v-on:submit="enviar">
                    <button v-on:click="decrementar" :disabled="counter<=0" >-</button>
                    <p>{{counter}}</p>
                    <button v-on:click="incrementar" :disabled="counter>=limit">+</button>
                  </form>`
      }).mount('#app');  
      console.log(vm);
    </script>

Mariangel Ruiz

Les comparto mi solución al reto! 😃

<script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                incrementar() {
                    this.counter++;
                },
                decrementar() {
                    this.counter--;
                }
            },
            template: `<form>
                            <button v-on:click.prevent="decrementar">-</button>
                            <span>{{ counter }}</span>
                            <button v-on:click.prevent="incrementar">+</button>
                        </form> `
        }).mount("#app");
        console.log(vm);
    </script>

Noelis Hernández

Aquí mi reto terminado:

const vm = Vue.createApp({
            data(){
                return{
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++
                },
                decrement() {
                    this.counter--
                },
            },
            template: ` <p>{{counter}}</p>
                        <button v-on:click="increment">+</button>
                        <button v-on:click="decrement">-</button>`,
        }).mount("#app")
        console.log(vm)

Luis Miguel Falcon Montaño

Reto superado!

<!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>
      Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          decrement() {
            if (this.counter > 0) {
              this.counter--;
            }
          },
          increment() {
            this.counter++;
          },
        },
        template: `
          <button v-on:click="decrement"> - </button>
            {{counter}}
          <button v-on:click="increment"> + </button>
        `,
      }).mount("#app");
    </script>
  </body>
</html>

Adder Anthony Perez Chavajay

mi solucion al reto

 <div id="app">
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
      <p v-text="count"></p>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          increment() {
            this.count++;
          },
          decrement() {
            if (this.count == 0) {
              alert("esta en cero");
            } else {
              this.count--;
            }
          },
        },
      }).mount("#app");

Andres Cano Ochoa

Comparto mi solucion!!

<!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@3/dist/vue.global.js”></script>
<div id=“app”>
</div>
<script>
const vm = Vue.createApp({
data(){
return{
counter: 0
};
},
methods: {
aumento(){
this.counter++;
},
decremento(){
this.counter–;
}
},
template: <div class="container"> <button v-on:click="aumento()" >Aumenta el contador</button> <div class="div">{{counter}}</div> <button v-on:click="decremento()" >Disminuye el contador</button> </div>
}).mount("#app");
console.log(vm);
</script>
</body>
</html>

Joel Angel Chavez Loyola

Challenge met!

Andres Walteros

Mi solución es bastante sencilla:

<script>
			const vm = Vue.createApp({
				data() {
					return {
						counter: 0,
					};
				},
				methods: {

					sum() {
						this.counter++;
					},
					res() {
						this.counter--;

					},
				},
				template: `
					<button v-on:click="sum">Sumar</button>
					<h1> Tu total: {{ counter }} </h1>
					<button v-on:click="res">Restar</button>
`, 
			}).mount('#app');
		</script>

Yeferson Lasso España

me apoye de un compañero para ver como insertar dos botones…

<!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{
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++,
                    console.log("click!");
                },
                decrement() {
                    this.counter--;
                    console.log("click!");
                }
            },
            template:`  {{ counter }}
                        <button v-on:click="increment">+1</button>
                        <button v-on:click="decrement">-1</button>`,
        }).mount("#app");
        console.log(vm);
        
    </script>

</body>
</html>

Emilio Oropeza

Mi solución

const vm = Vue.createApp({
            data() {
                return {
                    evt: "submit.prevent",
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement(){
                    this.counter--;
                }
             },
            template: `<button v-on:click="increment">increment</button>
                        <button v-on:click="decrement">decrement</button>
                        <span>{{counter}}</span>`
        }).mount("#app");

Javier Vásquez Castellano

Mi solución

RubenSH

Platzi Team

Reto completado 😄

Captura de pantalla de 2022-08-26 12-53-23.png

Captura de pantalla de 2022-08-26 12-53-30.png

Diego Alexander Agudelo Garcia

const vm = Vue.createApp({
    data(){
        return {
            clicks: 0
        }
    },
    methods:{
        aumentar(evento){
            this.clicks++;  
        },
        disminuir(evento){
            if(this.clicks > 0){
                this.clicks--;
            }
        },
        resetear(evento){
            this.clicks = 0;
        }
    },
    template:`
        <div class="row w-100 d-flex flex-column justify-content-center align-items-center">
            <h1 class="text-center text-white">Contador de clicks</h1>
            <div class="col-8 col-sm-6 col-md-5 col-lg-3 text-center text-white bg-secondary p-4 rounded-2 fs-2 border border-3 border-dark" v-text="clicks"></div>
            <div class="col-8 col-sm-6 col-md-5 col-lg-3 p-0 mt-4 d-flex flex-column justify-content-center align-items-center">
                <div class="row w-100 d-flex justify-content-evenly">
                    <button class="col-5 bg-success py-3 rounded-4" v-on:click="aumentar">Aumentar</button>
                    <button class="col-5 bg-success py-3 rounded-4" v-on:click="disminuir">Disminuir</button>
                </div>
                <div class="row w-100 d-flex justify-content-evenly mt-4">
                    <button class="col-10 bg-success py-3 rounded-4" v-on:click="resetear">Resetear</button>
                </div>
            </div>
        </div>
    `
}).mount("#app")

Jovan Fernández

Mi solución

        const vm = Vue.createApp({
            data() {
                return {
                    evt: "submit.prevent",
                    counter: 0
                };
            },
            methods: {
                incrementar() {
                    this.counter++;
                },

                decrementar() {
                    this.counter--;
                }
            },
            template: `
                <h1>{{ counter }}</h1>
                <button v-on:click="incrementar">Incrementar</button>
                <button v-on:click="decrementar">Decrementar</button>
            `
        }).mount("#app");

Miguel Juan Carlos Rojas Ortega

Vue.createApp({
            data(){
                return {
                    counter: 0,
                };
            },
            methods: {
                increment(){
                    this.counter+=1
                },
                decrement(){
                    this.counter-=1
                }
            },
            template: 
            `<div>
                <h3>Puntos contados:</h3>
                <h5>{{counter}}</h5>
                <button v-on:click="increment">Aumentar</button>
                <br/>
                <button v-on:click="decrement">Disminuir</button>
            </div>`
        }).mount("#app")```

Jhon Edicson Joya Calderón

Hola, mi aporte es el siguiente

const vm = Vue.createApp({
            data (){
                return {
                    counter: 0,
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    if( this.counter > 0){
                        this.counter--;
                    }
                },
            },
            template: `<h2>{{counter}}</h2>
            <button v-on:click="increment">sumar</button>
            <button v-on:click="decrement">restar</button>`,
        }).mount("#app")

Yenny Constanza Botero Martinez

solucion

const vm = Vue.createApp( {
            data() {
                return {
                    counter: 0
                };
            },
            methods:{
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            },
            template: `<h1>{{counter}}</h1>
            <button v-on:click="increment">+</button>
            <button v-on:click="decrement">-</button>`
        }).mount("#app");

Jorge Daniel Rincón Luciano

Esta es mi solucion

        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0,
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },

                decrement() {
                    this.counter--;
                }
            },
            template: `<button v-on:click="increment">Increment</button>
											<p>{{counter}} </p>  
											<button v-on:click="decrement">Decrement</button>`
        		}).mount("#app");

Santiago Jimenez Moncada

mi solucion!

      const vm = Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
        template: `<button v-on:click="decrement">{{'-'}}</button> {{ counter }} <button v-on:click="increment">{{'+'}}</button>`,
      }).mount("#app");

Ángel David Vargas Hernández

Aquí mi solución:

Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
        template: `
        <div>
          <button v-on:click="decrement">Decrement --</button>
          <button v-on:click="increment">Increment ++</button>
          <p v-if="counter >= 0" style="color: blue;">{{ counter }}</p>
          <p v-if="counter < 0" style="color: red;">{{ counter }}</p>
        </div>
          `,
      }).mount("#app");

Yefreilee Danny Samuel Parra

Así quedo el mío, igual a un compañero que lo hizo antes, la diferencia es que le agregue un poco de style para diferenciar un poco 😛 saludos

<!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>User Events</title>
</head>
<body style="background-color: #000000; color: #ffffff; font-size: 50px; margin: 50px;">
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0,
                };
            },
            methods: {
                increment () {
                    this.counter++;
                },
                decrement () {
                    this.counter--;
                }
            },
            template: ` <button style= "height: 50px; width: 50px;" v-on:click="decrement">-</button> 
                        <button style= "height: 50px; width: 50px;" v-on:click="increment">+</button>
                        <p>{{ counter }}</p>`
        }).mount("#app");
        console.log(vm);
    </script>
</body>
</html>

Lucas Da Rosa

<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>
    <div id="app">
        <button v-on:click="counter--">-</button>
        {{counter}}
        <button v-on:click="counter++">+</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data(){
                return{
                    counter: 0
                }
            },
            methods:{
                increment(){
                    this.counter++;
                },
                decrement(){
                    this.counter--;
                }
            }
        }).mount("#app");
    </script>
</body>
</html>```

Christian Leonardo Hernandez Estrada