No tienes acceso a esta clase

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

Eventos de usuario

8/23
Recursos

Aportes 156

Preguntas 5

Ordenar por:

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

o inicia sesi贸n.

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");

Soluci贸n al reto

C贸digo

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');

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>

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');

Aqu铆 est谩 mi soluci贸n:

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>

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')
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");

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');

Contador entre un rango de 0 a 9鈥

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

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>

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> 

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>

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

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');

Ac谩 dejo mi soluci贸n. Solo le di estilos desde las devtools馃槄

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

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 鈥渃lick鈥 o 鈥渋nput鈥.
  • 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 鈥淓vent Handling鈥 y la secci贸n de 鈥淐omponents - Custom Events鈥.

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>

Anexo mi soluci贸n al reto:

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

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;
        }

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>


	 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");

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>

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>

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>
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");

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");

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

Mi solucion fue esta:

<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');

Mi solucion al reto

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>

Esto incrementa y cambia de color el bot贸n:

<script>
const colors = [鈥欌, 鈥榬ed鈥, 鈥榖lue鈥, 鈥榞reen鈥, 鈥榩urple鈥, 鈥榦range鈥橾;

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

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");
   

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>

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");

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>
    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");

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

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");

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>
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");

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>

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>

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")

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>

<script>
const vm = Vue.createApp({
data() {
return {
evt: 鈥渟ubmit鈥,
counter: 0
};
},
methods: {
increment() {
this.counter++;
},
descrement() {
this.counter鈥;
}
},
template:<h1>{{ counter }}</h1> //Evento De Incrementar <button v-on:click="increment">+1</button> //Evento De Descrementar <button v-on:click="decrement">-1</button>,
}).mount("#app");
</script>

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");

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");
<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>

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");

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>

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");
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");

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')

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"); 

cumpliendo el reto ![]()

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");

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>

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')```
<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");

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>

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

Cuando usamos el v-on, tambien lo podemos reemplazar con @ unicamente, de esta manera @submit.prevent=鈥渟ubmit2鈥

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");

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

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

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

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

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

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> 

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) 

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>

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");

Comparto mi solucion!!

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=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=鈥渁pp鈥>
</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>

Challenge met!

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>

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>

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");

Mi soluci贸n

Reto completado 馃槃

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")

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");
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")```

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")

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");

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");

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");

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");

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>
<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>```
<div id="app"></div>
    <script>

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

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

    </script>