基于vue写一段登录表单代码

以下是一个基本的登录表单代码，使用Vue框架实现：

html:

<div id="app">
  <h1>Login Form</h1>

  <form @submit.prevent="submitForm">
    <div class="form-group">
      <label for="email">Email:</label>
      <input id="email" type="text" v-model="input.email">
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input id="password" type="password" v-model="input.password">
    </div>

    <button type="submit">Login</button>
  </form>

  <div v-if="errorMessage">{{ errorMessage }}</div>
</div>

JavaScript:

const app = new Vue({
  el: '#app',

  data: {
    input: {
      email: '',
      password: '',
    },
    errorMessage: ''
  },

  methods: {
    submitForm() {
      axios.post('/api/login', this.input)
      .then(response => {
        // 登录成功，重定向到首页
        location.href = '/';
      })
      .catch(error => {
        // 显示错误信息
        this.errorMessage = error.response.data.message;
      });
    }
  }
});

此代码中，`v-model`指令将输入框的值绑定到Vue实例的`input`属性中。`@submit.prevent`指令防止表单默认的提交行为，而是触发`submitForm`方法，该方法使用axios发送POST请求到后端API进行用户验证。如果验证成功，则重定向到首页；否则，将错误信息显示在页面上。