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