当前位置: 首页 > news >正文

09-Vue基础之实现注册页面

个人名片:
😊作者简介:一名大二在校生
🤡 个人主页:坠入暮云间x
🐼
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

      • 用户注册页面

对于网页的注册页面想必大家都比较熟悉。每一个注册页面都有大量的表单元素,当用户输入完成页面所有的注册时,单机提交按钮程序将收集所有的注册页面信息,然后将转换成JSON字符串,最后再调用AJAX发送数据到服务器。通过vue的学习,我们将用V-model来完成项目练习

首先通过如下指令创建vue3项目

 npm init vite@latest registration-form

一般完成一个注册页面都应该具备如下信息:

  1. 用户名(usernam)
  2. 邮箱(email)
  3. 密码(password)
  4. 手机号(phone)
  5. 性别(gender)
  6. 学历(education)
  7. 同意协议(agree)

用户注册页面

<script setup lang="ts">
import { reactive } from 'vue';interface User {username: string;password: string;email: string;gender: number;phone: string;education: number;agree: boolean;
}
const user = reactive<User>({username: '',password: '',email: '',gender: 0,phone: '',education: 0,agree: false,
});
const submit = () => {console.log(user);}
</script>
<template><div id="container"><span>用户注册页面</span><form action=""><table><tr><td>用户名:</td><td><input type="text" v-model="user.username"></td></tr><tr><td>密码:</td><td><input type="password" v-model="user.password"></td></tr><tr><td>邮箱</td><td><input type="email" v-model="user.email"></td></tr><tr><td>性别</td><td><input type="radio" name="gender" value="1" v-model="user.gender"><input type="radio" name="gender" value="2" v-model="user.gender"></td></tr><tr><td>手机号:</td><td><input type="text" name="" id="" v-model="user.phone"></td></tr><tr><td>学历</td><td><select name="education" id="education" v-model="user.education"><option value="0">请选择</option><option value="1">博士</option><option value="2">硕士</option><option value="3">学士</option><option value="4">高中</option></select></td></tr><tr><td><input type="checkbox" name="" id="" v-model="user.agree">是否同意<a href="#">网站协议</a></td></tr><tr><td><button type="submit" @click.prevent="submit">提交</button></td></tr></table></form></div>
</template>
<style>
* {margin: 0 auto;padding: 0;
}
#app {font-family: Arial, Helvetica, sans-serif;color: #2c3e50;margin: 50px;border: 1px black solid;border-radius: 20px;display: flex;justify-content: center;
}form {display: flex;justify-content: center;text-align: justify;/* margin-top: 40px; */
}button{position: relative;right: -80px;
}
</style>

将每一个表单元素双向绑定了user属性,最后“提交”按钮绑定了一个sumbit方法用来处理表单提交操作,还是用了.prevent修饰符来组织表单默认事件。至此一个简单的表单注册页面完成,大家可以一起练习

运行出来的页面如下:
可以在页面中输入数据,提交用户信息后将传入后台
在这里插入图片描述

在这里插入图片描述

相关文章:

09-Vue基础之实现注册页面

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章…...

vue 树状结构数据渲染 (java 处理 list ->树状)

树状结构 Element ui https://element.eleme.cn/#/zh-CN/component/tree <el-tree :data"data" :props"defaultProps" node-click"handleNodeClick"></el-tree><script>export default {data() {return {data: [{label: 一级…...

惊艳!这些独特的搜索引擎你都知道吗?

随着互联网的普及和发展&#xff0c;搜索引擎已经成为我们日常获取信息的重要工具。然而&#xff0c;当我们想要寻找一些特定类型的信息时&#xff0c;普通的搜索引擎可能无法满足我们的需求。这时&#xff0c;一些特殊的搜索引擎便能派上用场本。 文将介绍几种常用的特殊搜索引…...

解除OU屏蔽(EBS检查无法直接查询解决)

解除OU屏蔽(EBS检查无法直接查询解决) 具有OU屏蔽的例子 SELECT t.org_id, t.* FROM po.po_headers_all t -- 无屏蔽表&#xff0c;在PL/SQL运行有数据 SELECT t.org_id, t.* FROM apps.po_headers t -- 包含OU屏蔽&#xff0c;在PL/SQL中查询无数据多组织屏蔽原理 1. 在…...

10月8日 Jdbc(1)

jdbc 接口是一个类的父类 java连接数据库, java操作数据库, 把java作为数据库的一个客户端 JDBC是接口&#xff0c;而JDBC驱动才是接口的实现&#xff0c;没有驱动无法完成数据库连接&#xff01;每个数据库厂商都有自己的驱动&#xff0c;用来连接自己公司的数据库。 ​ …...

SAP 第三方销售/单独采购

一、概述 1. 概念 第三方销售和单独采购都是指接到客户订单后&#xff0c;客户所需产品需要向供应商进行采购&#xff0c;该供应商一般是指外部的供应商&#xff0c;特殊情况下&#xff0c;才可能是集团内部的其他子公司&#xff0c;当是集团内其他子公司时&#xff0c;因为如…...

yxy销售网站后台管理系统

springbootmybatisthymeleaf 第一个练习的项目就是小商品零售平台后台管理系统&#xff0c;但是当时由于业务不熟练&#xff0c;需求分析先不做好&#xff0c;导致在开发的过程中出现了很多问题。 这次首先把需求确定&#xff0c;详细的做好前期准备工作&#xff0c;再来进行…...

【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅲ—— 颁发自签名证书

目录 博文摘要5. 使用 Microsoft 证书颁发机构颁发自签名 SSL 证书5.1 登录MADCS5.2 申请证书5.3 选择证书类型5.4 提交CR5.5 下载 Base 64 编码的证书5.6 导出 CA 证书&#xff08;1&#xff09;打开 cachain.p7b&#xff08;2&#xff09;进入证书导出导向&#xff08;3&…...

Hadoop3教程(十九):MapReduce之ETL清洗案例

文章目录 &#xff08;121&#xff09;ETL数据清洗案例参考文献 &#xff08;121&#xff09;ETL数据清洗案例 ETL&#xff0c;即Extract-Transform-Load的缩写&#xff0c;用来描述数据从源端&#xff0c;经过抽取&#xff08;Extract&#xff09;、转换&#xff08;transfor…...

数据库设计阶段-架构真题(五十七)

下面关于联合需求计划JRP叙述&#xff0c;不正确的是&#xff08;&#xff09;。 JRP是一种相对成本较高但十分有效的需求获取方法在讨论期间尽量避免使用专业术语JRP的主要目的是对需求进行分析和验证在JRP实施之前&#xff0c;应制定详细的议程&#xff0c;并严格遵照议程进…...

python控制Windows桌面程序自动化模块uiautomation

github仓库地址&#xff1a;GitHub - yinkaisheng/Python-UIAutomation-for-Windows: (Donot use 3.7.6,3.8.1):snake:Python 3 wrapper of Microsoft UIAutomation. Support UIAutomation for MFC, WindowsForm, WPF, Modern UI(Metro UI), Qt, IE, Firefox, Chrome ... uiaut…...

Serializable 和Parcelable的区别

Serializable和Parcelable接口可以完成对象的序列化的过程&#xff0c;当我们需要通过Intent和Binder传输数据时就需要使用Parcelable或者Serializable&#xff0c;有时候我们还需要把对象持久化到存储设备上或者通过网络传输给其他客户端&#xff0c;这个时候也需要使用Seriaz…...

dubbogo-02 将服务注册到nacos

增加dubbo配置 dubbo:application:name: gotestmodule: gotestgroup: daoorganization: qiudaozhangowner: qiudaozhangversion: 0.1environment: proregistries:nacosWithCustomGroup:protocol: nacos # 注册中心选择 nacosaddress: 127.0.0.1:8848 # nacos ipgroup: RIDE # …...

postgresql 配置文件 与 修改配置如何启用

2.启用配置 postgresql显式地以表格的方式告诉我们哪些配置项需要重启数据库实例、哪些配置项仅需要重新加载配置文件即可无需重启服务 select name, context from pg_settings context 的值指示具体策略&#xff1a; internal: 编译期间的设置&#xff0c;只有重新编译才能生…...

物联网专业前景怎么样?

物联网专业前景怎么样&#xff1f; 物联网专业在当今技术发展迅速的背景下具有广阔的前景。以下是物联网专业的一些优势和就业前景&#xff1a; 1.市场需求大&#xff1a;物联网作为人工智能、云计算和大数据等技术的结合&#xff0c;已经成为许多行业的核心需求。各行各业都需…...

JVM垃圾回收算法介绍

堆的分代和区域 &#xff08;年轻代&#xff09;Young Generation&#xff08;eden、s0、s1 space&#xff09; Minor GC &#xff08;老年代&#xff09;Old Generation &#xff08;Tenured space&#xff09; Major GC|| Full GC &#xff08;永久代&#xff09;Permanent…...

紫光同创FPGA实现HSSTLP高速接口通信,8b/10b编解码数据回环,提供PDS工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 GT 高速接口解决方案3、设计思路框架HSSTLP详解HSSTLP基本了解HSSTLP之时钟HSSTLP之PCSHSSTLP之PMAHSSTLP之接口说明 硬件设计HSSTLP IP调用和配置 4、PDS工程详解5、上板调试验证并演示6、福利&#xff1a;工程代码的获取 紫光同创FPGA实…...

Web前端—盒子模型:选择器、PxCook、盒子模型、正则表达式、综合案例(产品卡片与新闻列表)

版本说明 当前版本号[20231019]。 版本修改说明20231018初版20231019补充了综合案例二新闻列表的代码及完善部分代码 目录 文章目录 版本说明目录盒子模型01-选择器结构伪类选择器基本使用:nth-child(公式)伪元素选择器 02-PxCook03-盒子模型盒子模型-组成边框线四个方向单方…...

C++ vector类模拟实现

目录 一、成员变量 二、构造函数 1.默认构造 2.拷贝构造 3.迭代器构造 4.使用n个值构造 5.赋值拷贝 三、析构函数 四、vector重要成员函数 1.size和capacity函数 2.reserve函数 3.resize函数 4.push_back函数 5.insert函数 6.erase函数 7.重载operator[] 一、成…...

FastAPI+Pydantic使用自定义参数校验+自定义异常+全局异常捕获

目录 1 自定义参数校验异常 2 自定义的curr_page_v参数校验函数&#xff0c;如果不合法抛出自定义异常&#xff01; 3 配置全局异常 1 自定义参数校验异常 # 1.用户自定义异常类型&#xff0c;只要该类继承了Exception类即可 class ValDtoError(Exception):# 初始化def __in…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...