【技术实战】Vue技术实战【三】
需求实战一
效果展示
代码展示
<template>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
</div>
 
 
 
<div>
<a-input id="input" v-model:value="value" placeholder="请输入姓名" class="custom-input" />
</div>
</div>
</template>
<script setup lang="ts">
const value = ref<string>('');
</script>
<style scoped>
:deep(.custom-input) {
border: 1px solid gray;
width:250px;
border-radius: 10px;
padding: 8px;
}
:deep(label) {
margin-right: 10px;
}
</style>代码解释
这段代码是一个Vue组件的模板部分，用于创建一个包含姓名输入框的表单。
在模板中，使用了Flex布局来将姓名标签和输入框放在同一行。姓名标签使用了<label>元素，并设置了字体样式。输入框使用了<a-input>元素，并绑定了value属性，通过v-model指令实现双向数据绑定。输入框还设置了占位符文本和自定义样式类名。
在脚本部分，使用了ref函数创建了一个名为value的响应式数据，用于存储输入框的值。
在样式部分，使用了:deep伪类选择器来选择嵌套的元素，并设置了输入框和标签的样式，包括边框、宽度、边框半径和内边距等。
这段代码可以用于在Vue项目中创建一个带有姓名输入框的表单组件。
需求实战二
效果展示
代码展示
<template>
<div>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
</div>
 
 
 
<div style="display: flex;">
<a-input id="input" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
 
 
 
<a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
</div>
</div>
<br>
<br>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
</div>
 
 
 
<div style="display: flex;">
<a-input id="input" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
 
 
 
<a-alert v-if="age === ''" type="error" message="年龄为必须输入选项" show-icon />
</div>
</div>
</div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
</script>
<style scoped>
:deep(.custom-input) {
border: 1px solid gray;
width:250px;
border-radius: 10px;
padding: 8px;
}
:deep(label) {
margin-right: 10px;
}
</style>代码解释
这段代码是一个Vue组件的模板，用于创建一个包含姓名和年龄输入框的表单。以下是代码的解释：
- 在模板的顶部，我们使用了<div>元素来包裹整个表单。
- 表单中的每个输入框都被包裹在一个<div>元素中，并使用display: flex来实现水平排列。
- 每个输入框都由一个<label>元素和一个<a-input>元素组成。
- <label>元素用于显示输入框的标签，例如"姓名"和"年龄"。
- <a-input>元素是一个自定义的输入框组件，通过v-model:value指令将输入框的值与Vue实例中的name和age变量进行双向绑定。
- 输入框的样式通过.custom-input类进行自定义，包括边框、宽度、边框半径和内边距。
- 如果输入框的值为空，将显示一个错误提示框<a-alert>，提示用户该字段为必填项。
在<script setup>部分，我们使用了Vue 3的新特性<script setup>，它允许我们以更简洁的方式编写组件的逻辑部分。在这里，我们使用ref函数创建了name和age的响应式变量。
最后，<style scoped>部分定义了组件的样式，其中:deep()选择器用于选择组件内部的元素，并对其应用样式。在这里，我们为.custom-input类和<label>元素定义了一些样式。scoped属性表示这些样式仅适用于当前组件。
需求实战三
效果展示
代码展示
<template>
<div>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
</div>
 
 
 
<div style="display: flex;">
<a-input id="input" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
 
 
 
<a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
</div>
</div>
<br>
<br>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
</div>
 
 
 
<div style="display: flex;">
<a-input id="input" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
 
 
 
<a-alert v-if="age === ''" type="error" message="年龄为必须输入选项" show-icon />
</div>
</div>
<br>
<br>
<div>
<div style="display: flex; justify-content: center; align-items: center;">
<a-button type="primary" @click="submit">确认</a-button>
 
 
 
<a-button type="primary" @click="clear">清空</a-button>
</div>
</div>
<br>
<br>
<br>
<br>
<div v-show="judge" >
<div style="justify-content: center; align-items: center;text-align:center">
姓名：{{name}}
</div>
<br>
<div style="justify-content: center; align-items: center;text-align:center">
年龄：{{age}}
</div>
</div>
</div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
const judge =ref<boolean>(false);
const submit = () => {
judge.value=true;
}
const clear = () => {
judge.value=false;
age.value='';
name.value='';
}
</script>
<style scoped>
:deep(.custom-input) {
border: 1px solid gray;
width:250px;
border-radius: 10px;
padding: 8px;
}
:deep(label) {
margin-right: 10px;
}
</style>代码解释
这段代码是一个简单的Vue组件，用于展示一个表单，包括姓名和年龄的输入框以及确认和清空按钮。下面是代码的解释：
1. 在模板中，使用了flex布局来排列元素。首先是姓名输入框和错误提示的部分，然后是年龄输入框和错误提示的部分，最后是确认和清空按钮的部分。
2. 使用了<a-input>组件来创建输入框，通过v-model:value指令将输入框的值与name和age变量进行双向绑定。placeholder属性设置了输入框的占位符文本，class属性设置了输入框的样式，show-word-limit属性设置了是否显示字数限制。
3. 使用了<a-alert>组件来显示错误提示。通过v-if指令判断name和age是否为空，如果为空则显示错误提示。type属性设置了错误提示的类型为error，message属性设置了错误提示的文本内容，show-icon属性设置了是否显示错误提示的图标。
4. 使用了<a-button>组件来创建确认和清空按钮。通过@click事件监听按钮的点击事件，分别调用submit和clear方法。
5. 在<div v-show="judge">中，使用了v-show指令来根据judge变量的值来控制元素的显示和隐藏。当judge为true时，显示姓名和年龄的值。
6. 在<script setup>中，使用了Vue 3的新特性<script setup>来编写组件的逻辑部分。通过ref函数创建了name、age和judge的响应式变量。
7. submit方法用于确认按钮的点击事件，将judge的值设置为true，从而显示姓名和年龄的值。
8. clear方法用于清空按钮的点击事件，将judge的值设置为false，同时将age和name的值清空。
9. 在<style scoped>中，使用了scoped属性来限定样式的作用范围。使用:deep()伪类选择器来选择子组件的样式，设置了输入框和标签的样式。
需求实战四
效果展示
代码展示
<template>
<div>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="nameInput" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
</div>
 
 
 
<div style="display: flex;">
<a-input id="nameInput" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
 
 
 
<a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
<a-alert v-if="name !== '' && !isValidName" type="error" message="姓名不允许输入数字和特殊符号" show-icon />
</div>
</div>
<br>
<br>
<div style="display: flex;">
<div style="display: flex; justify-content: center; align-items: center;">
<label for="ageInput" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
</div>
 
 
 
<div style="display: flex;">
<a-input id="ageInput" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
 
 
 
<a-alert v-show="age === ''" type="error" message="年龄为必须输入选项" show-icon />
<a-alert v-show="age !== '' && !isValidAge" type="error" message="年龄只允许输入数字" show-icon />
</div>
</div>
<br>
<br>
<div>
<div style="display: flex; justify-content: center; align-items: center;">
<a-button type="primary" @click="submit">确认</a-button>
<a-modal v-model:visible="visible" title="输入不符合要求" @ok="close">
<p>您的输入不符合要求</p>
<p>请确认姓名不允许输入数字和特殊符号</p>
<p>请确认年龄只允许输入数字</p>
</a-modal>
 
 
 
<a-button type="primary" @click="clear">清空</a-button>
</div>
</div>
<br>
<br>
<br>
<br>
<div v-show="judge" >
<div style="justify-content: center; align-items: center;text-align:center">
姓名：{{name}}
</div>
<br>
<div style="justify-content: center; align-items: center;text-align:center">
年龄：{{age}}
</div>
</div>
</div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
const judge = ref<boolean>(false);
const visible = ref<boolean>(false);
const isValidName = computed(() => {
const regex = /^[^\d\W]+$/;
return regex.test(name.value);
});
const isValidAge = computed(() => {
const regex = /^\d+$/;
return regex.test(age.value);
});
const close =()=>{
visible.value=false;
}
const submit = () => {
if (!isValidName.value || !isValidAge.value) {
visible.value = true;
} else {
visible.value = false;
judge.value = true;
}
}
const clear = () => {
judge.value = false;
age.value = '';
name.value = '';
}
</script>
<style scoped>
:deep(.custom-input) {
border: 1px solid gray;
width: 250px;
border-radius: 10px;
padding: 8px;
}
:deep(label) {
margin-right: 10px;
}
</style>代码解释
这段代码是一个Vue组件，用于实现一个简单的表单输入和验证功能。下面是代码的解释：
1. 首先定义了三个响应式变量：name、age和judge。name和age分别用于存储输入的姓名和年龄，judge用于控制是否显示输入结果。
2. 使用computed属性isValidName和isValidAge来进行姓名和年龄的验证。isValidName使用正则表达式来判断姓名是否只包含字母，不包含数字和特殊符号；isValidAge使用正则表达式来判断年龄是否只包含数字。
3. 定义了一个visible变量，用于控制模态框的显示和隐藏。
4. close函数用于关闭模态框，将visible设置为false。
5. submit函数用于提交表单。如果姓名或年龄不符合要求，则将visible设置为true，显示模态框；否则将visible设置为false，将judge设置为true，显示输入结果。
6. clear函数用于清空表单和输入结果，将judge设置为false，将name和age清空。
7. 在模板中，使用a-input组件实现输入框，v-model绑定name和age的值，placeholder设置输入框的提示文字。使用a-alert组件来显示错误提示信息，根据条件判断是否显示。
8. 使用a-button组件实现确认和清空按钮，@click绑定对应的函数。
9. 使用a-modal组件实现模态框，v-model绑定visible的值，title设置模态框的标题，@ok绑定close函数。
10. 使用插值表达式{{}}来显示输入结果。
11. 使用scoped样式对组件内部的样式进行限定，自定义了.custom-input和label的样式。
这段代码实现了一个简单的表单输入和验证功能，当姓名或年龄不符合要求时，会显示错误提示信息；当输入符合要求时，点击确认按钮会显示输入结果。
【技术实战】Vue技术实战【三】的更多相关文章
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- 深度解析SDN——利益、战略、技术、实践（实战派专家力作，业内众多专家推荐）
深度解析SDN——利益.战略.技术.实践(实战派专家力作,业内众多专家推荐) 张卫峰 编 ISBN 978-7-121-21821-7 2013年11月出版 定价:59.00元 232页 16开 ...
- 超级干货：动态防御WAF技术原理及编程实战！
本文带给大家的内容是动态防御WAF的技术原理及编程实战. 将通过介绍ShareWAF的核心技术点,向大家展示动态防御的优势.实现思路,并以编程实战的方式向大家展示如何在WAF产品开发过程中应用动态防御 ...
- 简读《ASP.NET Core技术内幕与项目实战》之3：配置
特别说明:1.本系列内容主要基于杨中科老师的书籍<ASP.NET Core技术内幕与项目实战>及配套的B站视频视频教程,同时会增加极少部分的小知识点2.本系列教程主要目的是提炼知识点,追求 ...
- 快读《ASP.NET Core技术内幕与项目实战》EFCore2.5：集合查询原理揭秘（IQueryable和IEnumerable）
本节内容,涉及4.6(P116-P130).主要NuGet包:如前述章节 一.LINQ和EFCore的集合查询扩展方法的区别 1.LINQ和EFCore中的集合查询扩展方法,虽然命名和使用完全一样,都 ...
- 《ASP.NET Core技术内幕与项目实战》精简集-目录
本系列是杨中科2022年最新作品<ASP.NET Core技术内幕与项目实战>及B站配套视频(强插点赞)的精简集,是一个读书笔记.总结和提炼了主要知识点,遵守代码优先原则,以利于快速复习和 ...
- 躬身入局,干货分享,2023年春招后端技术岗(Python)面试实战教程,Offer今始为君发
早春二月,研发倍忙,杂花生树,群鸥竟飞.为什么?因为春季招聘,无论是应届生,还是职场老鸟,都在摩拳擦掌,秣马厉兵,准备在面试场上一较身手,既分高下,也决Offer,本次我们打响春招第一炮,躬身入局,让 ...
- 基于TC技术的网络流量控制实战
本文转载在:http://server.it168.com/a2010/0426/878/000000878406.shtml 基于TC技术的网络流量控制实战 650) this.width=650; ...
- 快读《ASP.NET Core技术内幕与项目实战》WebApi3.1：WebApi最佳实践
本节内容,涉及到6.1-6.6(P155-182),以WebApi说明为主.主要NuGet包:无 一.创建WebApi的最佳实践,综合了RPC和Restful两种风格的特点 1 //定义Person类 ...
- 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么
浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...
随机推荐
- 微信小程序搜索不到腾讯服务路线规划插件的解决方法
具体操作如下: 提示:主要内容都是按开发文档来写的 开发文档: 链接: https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan 添加插件 ...
- linux安装tomcat,mysql
环境:centos7.6 ssh连接工具:tabby 安装tomcat 创建目录 mkdir /opt/tomcat 获取tomcat: 1.自己百度下载 2.我这里提供百度网盘 链接:https:/ ...
- 数据结构与算法大作业：走迷宫程序（C语言,DFS)(代码以及思路）
好家伙,写大作业,本篇为代码的思路讲解 1.大作业要求 走迷宫程序 问题描述: 以一个 m * n 的长方阵表示迷宫, 0和1分别表示迷宫的通路和障碍. 设计一个程序, 对任意设定的迷宫, 求出一 ...
- springMVC中注解
其中常见注解: 1.@RequestMapping:用于请求url路径,可用于类和方法上,用于类上,则表示类中所有响应请求的方法都是以该路径作为父路径. 2.@RequestBody:注解实现接收 h ...
- 2022-12-29：nsq是go语言写的消息队列。请问k3s部署nsq，yaml如何写？
2022-12-29:nsq是go语言写的消息队列.请问k3s部署nsq,yaml如何写? 答案2022-12-29: yaml如下: apiVersion: apps/v1 kind: Deploy ...
- 限速神器RateLimiter源码解析
作者:京东科技 李玉亮 目录指引 限流场景 软件系统中一般有两种场景会用到限流: •场景一.高并发的用户端场景. 尤其是C端系统,经常面对海量用户请求,如不做限流,遇到瞬间高并发的场景,则可能压垮系统 ...
- 「P3」试下1个半月能不能水出个毕设
前言 虽然说标题上写的时间是1个半月,但是实际上,真正开始行动的时间应该1个月都没有.之前都是在公司上班没活的时候干的.现在请了个长假,专门来做毕业设计:预计5月前能做完整个毕业设计,然后劳动节放假期 ...
- 2021年蓝桥杯C／C++大学B组省赛真题(路径)
题目描述: 小蓝学习了最短路径之后特别高兴,他定义了一个特别的图,希望找到图中的最短路径. 小蓝的图由2021 个结点组成,依次编号1 至2021. 对于两个不同的结点a, b,如果a 和b 的差的绝 ...
- 安装Visio 2016与原本的office冲突的最终解决方案
一. 下载office visio 2016 二. 开始安装 但是提示卸载原本的office 三. 网上找寻答案 于是按照这篇文章https://jingyan.baidu.com/article/1 ...
- 文档在线预览（二）word、pdf文件转html以实现文档在线预览
@[toc] 实现文档在线预览的方式除了上篇文章[<文档在线预览(一)通过将txt.word.pdf转成图片实现在线预览功能>](https://blog.csdn.net/q2qwert ...