写一个VUE的登录页

好的，下面是一个简单的 Vue 登录页示例：

<template>
  <div>
    <form @submit.prevent="login">
      <label>
        用户名:
        <input v-model="username" type="text" />
      </label>
      <br />
      <label>
        密码:
        <input v-model="password" type="password" />
      </label>
      <br />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 在这里处理登录逻辑
      // 例如发送请求到服务器校验用户名和密码
    },
  },
};
</script>

在这个示例中，我们使用了 Vue 的模板语法，定义了一个登录表单。在表单中，我们使用了两个输入框，分别用来输入用户名和密码。我们使用了 v-model 指令来双向绑定数据。这意味着，当用户在输入框中输入内容时，Vue 会自动更新数据，同时也会将数据渲染到输入框中。

在登录表单中，我们使用了 @submit.prevent 事件监听器来阻止表单的默认提交行为。相反，我们在表单中使用了一个按钮，并在点击按钮时调用了 login 方法。

在 script 标签中，我们使用了 Vue 的 export default 语法来定义一个 Vue 组件。在这个组件中，