How to create forms using VUE?-CodePudding

It is my first day learning VUE, and I'm following a tutorial by freeCodeCamp.org on YTB.

When it comes to the concept of component, the lecturer showed how to create a login form project by using components. I followed exactly what she typed, but the code just didn't run. I'm confused why that happened.

Here is the ytb address: https://www.youtube.com/watch?v=FXpIoQ_rT_c&t=2224s , and the component section started from 00:29:20.

Here are the codes. Can anyone tell the reason plz? thx ahead!

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

CodePudding user response：

Looks like there is an issue with quotes in the template.

Working Demo :

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>