【javascript被迫学习Vue3】学习笔记，开发一个登录功能

当然，我可以为您提供一个Vue 3登录组件的示例。以下是一个简单的登录组件，它包含输入框来接收用户名和密码，并且包含一个登录按钮。您可以根据自己的需求进行修改和扩展。

首先，在您的项目中创建一个名为Login.vue的组件文件，并复制粘贴以下代码：

<template>
  <div class="login">
    <h2>登录</h2>
    <form @submit="login">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    };
  },
  methods: {
    login(event) {
      event.preventDefault(); // 阻止表单提交

      // 这里可以执行后端请求来进行用户登录验证
      // 根据逻辑修改errorMessage或导航到其他页面

      if (this.username === 'admin' && this.password === 'password') {
        // 登录成功示例
        this.errorMessage = '';
        alert('登录成功！');
      } else {
        // 登录失败示例
        this.errorMessage = '用户名或密码错误!';
      }
    }
  }
};
</script>

<style>
.login {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
}

input {
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.error {
  color: red;
  margin-top: 10px;
}
</style>

请确保您已经安装了Vue 3以及所需的开发环境。

然后，将此组件引入到您的应用程序中，并将其放置在适当的位置。例如，您可以在App.vue中使用它：

<template>
  <div>
    <Login />
  </div>
</template>

<script>
import Login from './components/Login.vue';

export default {
  components: {
    Login
  }
};
</script>

这只是一个简单的示例，应该可以启动您的登录组件。根据您的需求，您可能需要在后端实现实际的用户验证逻辑。

希望这可以帮助到您！如果您需要进一步的帮助，请随时提问。