Es mi primer día aprendiendo VUE y estoy siguiendo un tutorial de freeCodeCamp.org en YTB.
En lo que respecta al concepto de componente, el disertante mostró cómo crear un proyecto de formulario de inicio de sesión mediante el uso de componentes. Seguí exactamente lo que escribió, pero el código simplemente no se ejecutó. Estoy confundido por qué sucedió eso.
Aquí está la dirección de YouTube: https://www.youtube.com/watch?v=FXpIoQ_rT_c&t=2224s , y la sección de componentes comenzó a las 00:29:20.
Aquí están los códigos. ¿Alguien puede decir la razón por favor? ¡gracias por delante!
<!DOCTYPE html> <html> <head> <title>vueComponents</title> <style type="text/css"> [v-cloak]{ display: none; } input { margin: 10px; display: block; } </style> </head> <body> <div id="app" v-cloak> <login-form /> </div> <script src="https://unpkg.com/vue@next"></script> <script> let app=Vue.createApp({ data():{ return{ greeting : 'hello VUE', } } }) app.component ('login-form',{ template: ' <form @submit="handleSubmit"> <h1> {{ title }} </h1> <input type="email" /> <input type="password" /> <button>Log In</button> </form> ', data(){ return{ title:'Login Form' } }, methods:{ handleSubmit(){ console.log('submitted') } } }) app.mount('#app') </script> </body> </html>Parece que hay un problema con las comillas en la plantilla.
Demostración de trabajo:
let app = Vue.createApp({ data() { return { greeting : 'hello VUE', } } }) app.component ('login-form',{ template: `<form @submit="handleSubmit"> <h1> {{ title }} </h1> <input type="email" /> <input type="password" /> <button>Log In</button> </form>`, data() { return { title:'Login Form' } }, methods:{ handleSubmit(){ console.log('submitted') } } }) app.mount('#app') <script src="https://unpkg.com/vue@next"></script> <div id="app" v-cloak> <login-form /> </div>