如何使用 VUE 创建表单？

Question

这是我学习 VUE 的第一天，我正在学习 YTB 上 freeCodeCamp.org 的教程。

在谈到组件的概念时，讲师展示了如何使用组件创建登录表单项目。我完全按照她输入的内容进行操作，但代码没有运行。我很困惑为什么会这样。

这里是ytb地址：https://www.youtube.com/watch?v=FXpIoQ_rT_c&t=2224s，组件部分从00:29:20开始。

这是代码。 lz谁能说说原因吗？谢谢！

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

Answer 1

模板中的引号似乎有问题。

工作演示：

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>

如何使用 VUE 创建表单？

How to create forms using VUE?

javascript

vue.js

vue-component

vuejs3