A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Eventos de usuario

8/23
Recursos

Aportes 40

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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");

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

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

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/[email protected]"></script>

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

Contador entre un rango de 0 a 9鈥

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

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')
<body>
  <script src="https://unpkg.com/[email protected]"></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>

Hola, aqui lo que hice:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counterIncrease: 0,
                    counterDecrease: 100,
                };
            },
            methods: {
                increase() {
                    this.counterIncrease++;
                },
                
                decrease() {
                    this.counterDecrease--;
                },
                
            },

            template: `<h1>Suma</h1> <button v-on:click="increase">{{ counterIncrease }}</button> <br> <h1> Resta </h1>
            <button v-on:click="decrease"> {{ counterDecrease }}</button>`

        })
            .mount("#app");

    </script>


</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0,
                    mas: '+',
                    menos: '-',
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            },
            template: `<form >
                        <div><button v-on:click.prevent='increment'>{{mas}}<button/></div> 
                        <div><button>{{ counter }}<button/></div>
                        <div><button v-on:click.prevent='decrement'>{{menos}}<button/></div>
                        </form>
                        `
        }).mount("#app");
    </script>
</body>

</html>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            text: "Noadonoyesanou odemiusecdemusec",
            img: "https://picsum.photos/300",
            counter: 0,
          };
        },
        methods: {
          countUp() {
            this.counter = this.counter + 1;
          },
          countDown() {
            this.counter = this.counter > 0 ? this.counter - 1 : this.counter;
          },
        },
        template: `<div>
            <p v-text='text'></p>
            <img v-bind:src="img" v-bind:alt="img" />
            <br />
            <h1>{{ counter }}</h1>
            <button v-on:click='countUp'>Count Up</button>
            <button v-on:click='countDown'>Count Down</button>
            </div>`,
      }).mount("#app");
      console.log(vm);
    </script>

Esta es mi soluci贸n al reto

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

Que buena explicacion

<!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 rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div class="container">
    <div id="app"></div>
    </div>
    <script>
            const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                this.counter--;
                }
            },
            template: `<h2 class="contador-title">Contador</h2> <h1 class="contador-final">{{ counter }}</h1>
                <button class="button1" v-on:click="increment">+1</button>
                <button class="button2" v-on:click="decrement">-1</button>`,
        }).mount("#app");
    </script>
</body>
</html>

/*CSS*/
*{
    background-color: gainsboro;
}


#app {
    display: grid;
    width: 100%;
    justify-content: center;
    row-gap: 5px;
}

.contador-final {
    background-color: grey;
    color: white;
    height: 100px;
    font-size: 3rem;
    display: grid;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    border-radius: 10px;
}

.contador-title {
    text-align: center;
    font-size: 4rem;
    align-items: center;
    margin-bottom: -10px;
}

.button1 {
    background-color: blue;
    width: 300px;
    height: 150px;
    color: white;
    font-size: 2rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.button2 {
    background-color: red;
    width: 300px;
    height: 150px;
    color: white;
    font-size: 2rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

Incluye una funci贸n msg_new que mira el boolean sum para desplegar un valor distinto, en v-text como valor el llamado de la funci贸n.

const vm = Vue.createApp({
            data: () => {
                return {
                    counter: 0,
                    sum: true 
                };
            },
            methods: {
                increment: function() {
                    this.counter += 1;
                    this.sum = true;
                },
                decrement: function() {
                    this.counter -= 1;
                    this.sum = false;
                },
                msg_new: function() {
                    if (this.sum) {
                        return "You increment";
                    } else {
                        return "You decrease";
                    }
                }
            },
            template: `
            <div>
                <h1 v-text="msg_new()" style="font-family:'Ubuntu Mono',monospace;"></h1>
                <p v-text="counter"></p>
                <button v-on:click="increment"> + </button>
                <button v-on:click="decrement"> - </button>
            </div>` 
        }).mount("#app");

        console.log(vm);

Esta es 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/[email protected]"></script>
    <div id="app">
        
    </div>
    <script>
        const vm = Vue.createApp({
            data(){
                return{
                    counter:0
                };
            },
            methods: {
                increment(){
                    this.counter++;
                },

                decrement(){
                    this.counter--
                }
            },
            template:` <p :style="text-center">{{ counter }}</p>
                      <button v-on:click="increment">+</button>
                      <button v-on:click="decrement">-</button>            
            `
        }).mount('#app')
    </script>


    
</body>
</html>

Les comparto mi soluci贸n al reto, o m谩s bien lo que entend铆 esl reto =P:

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                },
            },
            template:
                `
                <button v-on:click="decrement">Res</button>
                <span> -- <b> {{ counter }} </b> -- </span>
                <button v-on:click="increment">Sum</button>
                `
        }).mount("#app");
        console.log(vm);
    </script>
<script>
        const vm = Vue.createApp({
            data() {
                return {
                    evt: "keyup",
                    counter: 0
                };
            },
            methods: {
                changeValue(e) {
                    console.log(e);
                    if (e.keyCode === 38) {
                        this.counter++;
                    } else if (e.keyCode === 40) {
                        this.counter--;
                    } else {
                        return;
                    }
                }
             },
            template: `<form v-on:[evt].prevent="changeValue"><button>{{ counter }}</button></form>`
        }).mount("#app");
    </script>

Mi solucion:

const vm = Vue.createApp({
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
    decrement() {
      if (this.counter > 0) {
        this.counter--;
      }
    },
  },
  template: `
  <h2>Contador</h2>
  <div style="display:flex; gap:10px; height:20px; place-items:center">
  <button v-on:click="decrement"> - </button>
  <p>{{counter}}</p>
  <button v-on:click="increment" > + </button>
  </div>
  `,
}).mount("#app");

soluci贸n al reto

const vm = Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
          recet() {
            this.counter = 0;
          },
          submit(e) {
            console.log("submit");
          },
        },
        template: `
        <div style="display:flex;">
            <button v-on:click="increment" style=" height:30px;">+</button>
            <h2>{{counter}}</h2>
            <button v-on:click="decrement" style=" height:30px;">-</button>  
            <button v-on:click="recet" style=" height:30px;">reset</button>            
        </div>
        <form v-on:submit.prevent="submit">
          <button >Enviar</button> 
        </form>        
        `,
      }).mount("#app");
    <div class="container p-4" id="app"></div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          max(e) {
            this.counter++;
          },
          min(e) {
            this.counter--;
          },
        },
        template: `
        <form class="container row mt-4">
          <input type="text" disabled class="form-control text-center" v-model="counter">
          <button class="btn col-6 btn-info m-4" @click.stop.prevent="max">+</button>
          <button class="btn col-6 btn-warning m-4" @click.stop.prevent="min">-</button>
        </form>`,
      });
    </script>

Solucion para usar teclado y el raton, te reto a probar la tecla enter y la tecla espacio, flipa

<script>
const appVue3 = Vue.createApp({
	data() {
		return { 
			counter: 0,
			evt: "click",
		};
	},

	methods: {
		increment() {
			this.counter++;
			console.log('i');
		},
		decrement() {
			this.counter--;
			console.log('d');
		},
	},

	template: `<button v-on:[evt]="increment" 
							v-on:keyup="decrement">{{ counter }}</button>`
}).mount("#appVue3");
</script>

La soluci贸n al reto

<script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                submit() {
                    this.counter = 0;
                },
                increment(e) {
                    e.preventDefault();
                    this.counter += 1;
                },
                decrement(e) {
                    e.preventDefault();
                    this.counter -= 1;
                }
            },
            template: `
                <div>
                    <form v-on:reset.prevent="submit">
                        <h1>Counter {{counter }}</h1>
                        <button v-on:click="increment">Increment</button> <button v-on:click="decrement">Decrement</button> <button type="reset">Reset</button>
                    </form>
                </div>`
        }).mount('#app');
    </script>

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>Vue JS con CDN</title>
</head>
<body>
  <script src="https://unpkg.com/[email protected]"></script>

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

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

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

        decrement() {
          this.counter--
        },

        submit(e) {
          e.preventDefault()
        }
      },

      template: `
        <form @submit="submit">
          <span>{{ counter }}</span>
          <button @click="increment" type="submit">increment</button>
          <button @click="decrement" type="submit">decrement</button>
        </form>
      `
    }).mount('#app')
  </script>

</body>
</html>

Este es mi aporte al reto

HTML

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>Contador de elementos</h1>
        <div class="progress my-5"  style="height: 30px;">
            <div class="progress-bar" role="progressbar" :style="{width:counter+'%'}" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{counter}}%</div>
          </div>
          <h1>Contador: {{counter}}</h1>
        <button v-on:click="increment">incrementar</button>
        <button v-on:click="reset">Resetear</button>
        <button v-on:click="decrement">Decrementar</button>

        <form v-on:submit="submit" action="">

         <button >submit</button> 
        </form>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <script src="app.js"></script>
</body>
</html>
new Vue({
    el:'#app',
    data(){
        return{
            counter:0,
        
        }

    },
    methods:{
        increment(){
            this.counter++;
            console.log(this.counter);
            if(this.counter>=100){
                this.counter=100;
            }
        },
        reset(){
            this.counter=0;
        },
        decrement(){
            this.counter--;
            if(this.counter<=0){
                this.counter=0;
            }
        },
        submit(e){
            e.preventDefault();
            this.counter++;
            if(this.counter>=100){
                this.counter=100;
            }
            
        }

        
    }
})

comparto mi reto

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

Mi soluci贸n:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0
                };
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            },
            template: `
            <center>
            <h1>{{counter}}</h1>
            <button v-on:click="increment">Increment</button>
            <button v-on:click="decrement">Decrement</button>
            </center>

            `

        }).mount("#app");

    </script>
</body>

</html>

Otra soluci贸n sin usar m茅todos, s贸lo la variable counter鈥

<!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="counter++">+</button>
        {{ counter }}
        <button @click="counter--">-</button>        
    </div>

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

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

Buenas, aqu铆 mi soluci贸n:

const vm = Vue.createApp({
            data(){
                return {
                    counter: 0,
                }

               
            },

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

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

            template: `
            <div>
                
                <button v-on:click="increment"> + </button>
                <button v-on:click="decrement"> - </button>

                <h1> {{ counter }} </h1>

            </div>`
        }).mount("#app");

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>Reto 1</title>
  </head>
  <body>
    <script src="https://unpkg.com/[email protected]"></script>

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

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

        methods: {
          aumentar() {
            this.contador++;
          },
          disminuir() {
            this.contador--;
          },
        },

        template: `
            <div>
                {{ contador }}
                <br />
                <button v-on:click="aumentar()">Aumentar</button>
                <button v-on:click="disminuir()">Disminur</button>
            </div>
          `,
      }).mount("#app");
    </script>
  </body>
</html>

Mi aporte:

    const vm = Vue.createApp({
        data() {
            return {
                count: 0,
                text: '<p><strong>Hello Vue CDN</strong></p>',
            };
        },
        methods: {
            increment() {
                this.count += 1;
            },
            decrement() {
                this.count <= 0 ? this.count = 0 : this.count -= 1;
            }
        },
        template: `
        <div> 
            <p>{{count}}</p> 
          <button v-on:click="increment()">Increment</button>
          <button v-on:click="decrement()">Decrement</button>
        </div>
        `
    }).mount('#app')

Adjunto el m茅todo y el template de mi soluci贸n:

methods: {
                increment() {
                    this.counter ++
                },
                decrement() {
                    this.counter --
                },
                submit() {
                    this.counter++
                } 
            },
            template: `
            <div>
            <button v-on:click="increment">+</button>
                {{ counter }}
            <button v-on:click="decrement">-</button>
            </div>
            `

<!DOCTYPE html>
<html lang=鈥渆s鈥>

<head>
<meta charset=鈥淯TF-8鈥 />
<link rel=鈥渋con鈥 href="" />
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥 />
<title>Vite App</title>
</head>

<body>
<div id=鈥渁pp鈥>

</div>
<script src="https://unpkg.com/[email protected]"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                counter: 0
            };
        },
        methods: {
            increment() {
                this.counter++;

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

            }
        },
        template: `<button v-on:click="increment">aumentar</button><button v-on:click="decrement">decrementar</button><p>{{counter}}</p>`
    }).mount("#app");
    console.log(vm);
</script>

</body>

</html>

const vm = Vue.createApp({
            computed(){
            },
            data() {
                return {
                    counter: 0
                };
            },
            methods:{
                incrementar(e){
                    this.counter++;
                },
                decrementar(){
                    this.counter--;
                }
            },
            template: `<h1>Total: {{counter}}</h1>
                        <button v-on:click="incrementar">Incrementar</button>
                        <button v-on:click="decrementar">Decrementar</button> `
        }).mount("#app");

Mi soluci贸n es

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

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

                disminuir(){
                    this.count--;
                }
            },

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

Mi soluci贸n鈥

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

Esta fue mi solution:

<script>
    // options API
    const vm = Vue.createApp({
      data() {
        return {
          counter: 0,
        }
      },
      methods: {
          increment() {
            this.counter++
          },
          decrement() {
            this.counter--
          }
        }, 
      template: `
      <div>
       <button @click="increment">Increment</button>
       <button @click="decrement">Decrement</button>
       <br /> 
       <p>
        counter: {{counter}}
       </p>
      </div>
       `
      
    }).mount('#app')
    console.log(vm)
  </script>
<!DOCTYPE html>
<html lang="es">

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

    <style>
        button {
            width: 248px;
            height: 36px;
            font-size: 24px;
            margin: 12px;
        }
    </style>

</head>

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

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

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    counter: 0,
                    evt: 'submit',
                };
            },
            // Agregando los m茅todos o funciones
            methods: {
                increment() {
                    this.counter++;
                },
                submit(e) {
                    // e.preventDefault(); --> v-on:submit.prevent
                    console.log('Disparando un evento submit sin recargar');
                },
                decrement() {
                    this.counter--;
                },
            },
            // v-on: es para detectar el evento en el dom
            // v-on:type="func", example v-on:click="countNumber"
            template: `
            <button v-on:click="increment">Increment: {{ counter }}</button>
            <button v-on:click="decrement">Decrement: {{ counter }}</button>
            <form action="" v-on:submit.prevent="submit">
                <button type="submit">Submit1</button>
            </form>
            <form action="" v-on:[evt].prevent.stop="submit">
                <button type="submit">Submit2</button>
            </form>
            `,
        }).mount('#app');
    </script>

</body>

</html>