基于 Vue 3 的登录表单实现

应用场景介绍

在 Web 开发中，登录表单是一个常见的组件，它允许用户输入凭据并访问受保护的应用程序或网站。本博客将介绍如何使用 Vue 3 构建一个简单的登录表单。

代码基本功能介绍

此登录表单具有以下基本功能：

• 输入电子邮件和密码
• 提交表单时验证输入
• 处理登录请求（在此示例中，模拟登录）
• 提供忘记密码链接和注册链接

功能实现步骤及关键代码分析说明

1. 构建表单模板

<template>
  <div class="bg-black h-screen flex justify-center items-center">
    <div class="bg-gray-800 w-96 p-8 rounded-lg shadow-lg">
      <h1 class="text-2xl font-bold text-center text-white">LOGIN</h1>
      <div class="mt-4">
        <label for="email" class="block text-sm font-medium text-white">Email Address</label>
        <input type="email" id="email" class="..." />
      </div>
      <div class="mt-4">
        <label for="password" class="block text-sm font-medium text-white">Password</label>
        <input type="password" id="password" class="..." />
      </div>
      <div class="mt-4">
        <a href="#" class="text-sm text-pink-500 hover:underline">Forgot Password?</a>
      </div>
      <div class="mt-8">
        <button type="submit" class="text-white bg-pink-500 hover:bg-pink-700 ...">SIGN IN</button>
      </div>
      <div class="mt-4 text-center">
        <span class="text-sm text-white">No membership?</span>
        <a href="#" class="text-sm text-pink-500 hover:underline">SIGN UP</a>
      </div>
    </div>
  </div>
</template>

此模板定义了表单的布局和输入字段。

2. 响应式数据和方法

<script lang="tsx" setup>
import { ref } from 'vue'

const email = ref('')
const password = ref('')

const handleSubmit = () => {
  console.log('submit', email.value, password.value)
}
</script>

我们使用 Vue 3 的 ref API 来管理表单输入。handleSubmit 方法在提交表单时触发，并记录电子邮件和密码。

3. 处理提交

const handleSubmit = () => {
  console.log('submit', email.value, password.value)
}

handleSubmit 方法可以连接到表单的 @submit 事件处理程序，当用户单击“登录”按钮时触发。

4. 样式

body {
  font-family: 'Inter', sans-serif;
}

我们使用 CSS 来样式化表单，包括背景颜色、字体和输入字段样式。

总结与展望

通过本教程，我们了解了如何使用 Vue 3 构建一个基本的登录表单。在这个过程中，我们探索了 Vue 3 的响应式数据管理、事件处理和模板语法。

未来，我们可以对这个表单进行扩展和优化，例如：

• 验证输入，显示错误消息
• 使用服务端验证登录凭据
• 添加社交登录选项
• 改善用户界面设计