Vue知识点介绍与用户注册界面实现分析
每天记录一下自己学习的进度，最近在学习vue的组件进阶和js.dom与bom的知识，练手项目也是js做到了事件的响应和vue到了组件属性和方法；昨天晚上在图书馆借了两本书，一本毛选，一本图解HTTP，还不错。连续还几天没有更新文章了，来更新一篇最近写的vue练手demo项目的分析，一来加深自己的记忆和对知识的理解，二来分享下个人经历，将自己内心的话说出来才比较舒服嘛。
以下是我的用户注册注册代码，要我说一切的demo项目结合加上css修饰就可以整合一个不错的网页的实现了，里面代码虽然简单，其实也可以多想些创意的点子。比如可以结合之后的组件进阶的弹窗知识做一个类似于B站的弹窗式的注册页面，还有前面的学习的登录界面，虽说这样在主页注册的运行十分的复杂吧，肯定得多想如何降低运行消耗的性能。
说来其实我之前的web课程大作业就是做了一个B站页面，不过大部分的代码是css和html，对于js和vue运用很少，就是一个轮播图的实现和下拉框架的实现。说不定之后我会在改进一下，实现一个基本上类似B站的仿站，当然肯定不会发布啦，就是一个学习的过程。
下面是我的html和vue代码，想要练手的可以随便用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册页面</title>
<style>
.container {
margin: 0 auto;
margin-top: 60px;
text-align: center;
width: 300px;
}
.subTitle {
font-size: 14px;
color:gray;
}
.title {
font-size: 42px;
margin-top: 20px;
}
.input{
width: 90%;
}
.inputContainer {
text-align: left;
margin-bottom: 20px;
}
.subContainer {
text-align: left;
}
.filed{
font-size: 14px;
}
.input{
border-radius: 6px;
height: 25px;
margin-top: 10px;
border-color: silver;
border-style: solid;
background-color: cornsilk;
}
.tip{
margin-top: 5px;
font-size: 12px;
color: gray;
}
.setting{
font-size: 9px;
color: black;
}
.label{
font-size: 12px;
margin-left: 5px;
height: 20px;
vertical-align: middle;
}
.checkbox{
height: 20px;
vertical-align: middle;
}
.btn{
border-radius: 10px;
margin-left: -30px;
height: 40px;
width: 250px;
margin-top: 30px;
background-color: deepskyblue;
border-color: blue;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="container">
<div class="subTitle">加入我们，一切创造美好世界</div>
<h1 class="title">创建你的账号</h1>
<div v-for="(item,index) in fields" class="inputContainer">
<div class="field">{{item.title}}<span v-if="item.required" style="color: red;">*</span></div>
<input v-model="item.model" class="input" :type="item.type">
<!-- index从0开始的 -->
<div class="tip" v-if="index==2">请确认密码程度需要大于6位</div>
</div>
<div class="subContainer">
<div class="setting">偏好设置</div>
<input v-model="receiveMsg" class="checkbox" type="checkbox">
<label class="label">接收更新邮件</label>
</div>
<button class="btn" @click="createAccount">创建账号</button>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="./demo9.js"></script>
</body>
</html>
const App = {
data() {
return {
fields: [
{
title: "用户名",
required: true,
type: "text"
}, {
title: "邮箱地址",
required: false,
type: "text"
}, {
title: "密码",
required: true,
type: "password"
}
],
}
},
computed: {
name: {
get() {
return this.fields[0].model
},
set(value) {
this.fields[0].model = value
}
},
email: {
get() {
return this.fields[1].model
},
set(value) {
this.fields[1].model = value
}
},
password: {
get() {
return this.fields[2].model
},
set(value) {
this.fields[2].model = value
}
}
},
methods: {
emailCheck() {
var verify = /^w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/;
if (!verify.test(this.email)) {
return false
} else {
return true
}
},
createAccount() {
if (this.name.length == 0) {
alert("用户名不能为空")
return
} else if (this.password.length <= 6) {
alert("密码长度必须大于6位")
return
} else if (!this.emailCheck() && this.email.length != 0) {
alert("邮箱格式不正确")
return
} else {
alert("注册成功")
this.name = ""
this.email = ""
this.password = ""
console.log(`name:${this.name},email:${this.email},password:${this.password}`)
}
}
}
}
Vue.createApp(App).mount('#app')
Vue基础
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它的核心库只关注视图层，易于学习和集成，同时也可以与其他库或已有项目整合。Vue.js也完全支持构建复杂的单页应用（SPA），尤其是当它和现代化的工具链以及各种支持库结合使用时。
Vue实例和数据绑定
在Vue中，一切都是围绕Vue实例进行的。一个Vue实例对应一个视图，它将数据和视图模板关联起来。数据绑定是Vue的核心特性之一，它允许我们使用简单的模板语法将DOM元素与底层数据绑定在一起。
代码结构分析
HTML结构
HTML部分定义了一个用户注册页面的基本结构，包括标题、输入框和按钮等。使用了v-for指令来循环渲染输入字段，v-model指令实现数据双向绑定，@click指令绑定点击事件。
CSS样式
CSS部分定义了页面的样式，包括容器的布局、输入框的样式、按钮的样式等。
Vue实例
Vue实例App中包含了数据对象data、计算属性computed和方法methods。
数据对象（data）
data对象包含了fields数组，数组中的每个对象代表一个输入字段，包括字段的标题、是否必填和字段类型。
计算属性（computed）
计算属性computed用于创建响应式的数据。在这个例子中，name、email和password计算属性分别对应用户名、邮箱和密码输入框的值。它们允许我们通过get和set方法来访问和更新fields数组中相应字段的值。
方法（methods）
methods对象包含了emailCheck和createAccount两个方法。emailCheck方法用于验证邮箱格式是否正确，createAccount方法用于处理用户注册逻辑。
注意点
- 数据绑定：使用
v-model实现数据的双向绑定，确保输入框的值与Vue实例中的数据保持同步。 - 条件渲染：使用
v-if指令根据条件渲染DOM元素，例如，当第三个输入框（密码）存在时，显示密码强度提示。 - 事件处理：使用
@click指令绑定按钮的点击事件，触发createAccount方法。 - 列表渲染：使用
v-for指令循环渲染输入字段，这是Vue处理列表数据的标准方式。 - 响应式数据更新：在
createAccount方法中，通过更新计算属性的值来清空输入框，这是Vue响应式系统的一部分。 - 表单验证：在
createAccount方法中，对用户输入进行验证，确保数据的有效性。 - 组件化：虽然这个例子中没有使用组件化，但在实际开发中，可以将输入框、按钮等封装成独立的组件，以提高代码的可重用性和可维护性。
通过上述分析，我们可以看到Vue.js如何通过其响应式系统和指令简化了用户界面的开发。这个用户注册界面的实现展示了Vue.js在处理表单和用户交互方面的强大能力。
