- 博客(52)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 JS实现轮播图的三种简单方法。
Js实现轮播图01实现思路这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：实现效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
2020-08-13 23:55:00
62243
58
原创 前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据
【代码】前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据。
2023-08-13 11:59:48
1143
原创 正则表达式常用的函数及用法说明
test()：测试一个字符串是否符合某个正则表达式的规则，返回布尔值。match()：在一个字符串中查找符合某个正则表达式的内容，返回匹配结果的数组或 null。replace()：将一个字符串中符合某个正则表达式的内容替换为指定的字符串或函数，返回替换后的新字符串。search()：在一个字符串中搜索符合某个正则表达式的内容，返回第一个匹配结果的位置，如果没有找到则返回 -1。split()：将一个字符串按照符合某个正则表达式的内容进行分割，返回分割后的数组。例如：
2023-05-12 15:26:12
1625
1
原创 枚举的基本用法（声明、取值、遍历、枚举转数组、枚举转字符串）
因为枚举的遍历比较特殊，会把枚举的名称和值一起输出，所以在使用时，我们要根据自己的使用场景转换成自己需要的类型。
2022-12-14 11:22:36
1514
原创 Vue3+Ts＜script setup＞组合式API的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject、Ref用法
一、页面效果图二、父组件代码<template> <div class="user-box"> <div> <h2>父组件:</h2> <p>propRef：{{ propRef }}</p> <p>propReactive：{{ propReactive }}</p> </div> <div>
2022-05-29 19:58:23
3548
原创 Vue3+ts的setup()函数和＜script setup＞通过ref获取子组件值和方法的两种用法
一、setup()函数通过ref获取子组件的值或方法父组件<template> <div> <Child ref="childRef" /> </div></template><script lang="ts">import { onMounted, ref, reactive, nextTick, toRefs, computed, provide } from 'vue';import Chi
2022-05-29 19:50:07
3249
原创 Vue3+Ts的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法
Vue3的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法
2022-05-29 17:43:06
4227
原创 vue引入SlickList, SlickItem实现元素的拖动
HTML最近看到vue有直接实现拖动的小组件，试了试，感觉还挺简单的，就可以实现元素的拖动，直接数组的元素的位置移动。 <div> <SlickList v-model="items" axis="xy" :distance="5" style" display: flex; gap: 10px;flex-wrap: wrap;"> <SlickItem v-for="(item, index) in items" :key="index
2022-04-21 10:54:39
1066
原创 数组根据对象id去重的几种方法
arr = [ { id: 1, name: '张一', age: 20 }, { id: 1, name: '张一', age: 20 }, { id: 2, name: '张二', age: 20 }, { id: 3, name: '张三', age: 20 }, ];方法一通过forEach再通过some方法判断数组是否包含当前对象id，不包含则添加 some() { let some: any = []; this.arr.forE..
2022-03-16 17:17:56
5770
原创 Vue2+Ts之Provide / Inject用法
Provide / Inject的定义Provide / Inject： 父级组件向其所有子孙后代注入一个依赖（@Provide ），不论组件层次有多深，都可以通过（@Inject）接收父级组件传过来的任何类型的值，并在其上下游关系成立的时间里始终生效。最近在写项目的时候，常需要对多个子组件的表单进行编辑/查看模式的切换，一开始用Prop进行传值进行控制，当组件多的时候使用Prop还是挺繁琐的，这样的话，使用 Provide / Inject就可以快速实现功能的切换父组件<template&g
2022-03-16 15:34:21
3410
原创 用vue+ts实现元素鼠标拖动完整代码
实现效果相关使用属性 // clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； // clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； // element.offsetTop 指 element距离上方或上层控件的位置，整型，单位像素。 // element.offsetLeft 指 element距离左方或上层控件的位置，整型，单位像素。 // element.offsetWidth 指 element控件自身的宽度，整型，
2021-11-05 10:43:38
842
原创 ts(TypeScript)中?.和??分析及运用
今天在写个人项目功能开发中，在给对象属性赋值过程中总是报一些莫名其妙的错误，经过调试发现在赋值的过程中有些属性为null或者undefined的时候会报错。具体用法如下：?.用法当?前的属性或者值为真时返回当前属性的值，否则返回null或者undefined//a?.b ---> a && a.b ? a.b : undefinedthis.toDoListEditData.name = this.person?.name;//相当于this.person&&
2021-09-22 17:58:44
884
原创 Vue动态添加、删除对象属性
最近对对象相关操作处理比较多，然后发现对象还可以这么玩 let student = { id: 1, name: '学生1', class: '001' }; //通过student['对象新的属性key']来给对象添加新的属性 student['sex'] = '男'; student['age'] = 18; console.log(student); //通过delete可直接删除对象的属性 delete student.class; c
2021-08-27 11:27:58
4372
原创 Vue路由跳转的几种方式及解释说明
一、router-link（声明式路由，在页面中调用）在Vue中，router-link称为声明式路由，常放在页面中，:to绑定为跳转的目标地址，通过点击实现跳转，路由的跳转主要有两种形式，一种是通过name，另一种是path。1.1 路由不带参数 <router-link :to="{ name: 'word' }">路由name方式跳转首页</router-link> <router-link :to="{ path: '/word' }"&g
2021-08-07 00:29:27
13292
原创 yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行 脚本。
最近在安装yarn的时候，突然给我报了这个错，试了好久才发现是这个问题yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行 脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Po licies。所在位置 行:1 字符: 1+ yarn+ ~~~~已解决：报错是因为没有权限，只需要指
2021-07-30 16:20:33
521
原创 js数组常用方法（返回Boolean,索引，当前元素，数组，遍历）总结
forEach let arr: any[] = [1, 2, 3, 4]; arr.forEach((item,index)=>{ console.log('值:',item,'索引:',index); });includes let arr: any[] = [1, 2, 3, 4]; let result = arr.includes(1, 2); //第一个参数为搜索的元素，第二个是开始搜索的位置,返回值是true或false
2021-07-23 10:17:07
5844
3
原创 Vue在页面和方法中分别通过遍历对象获取对象的键（key）和值（value）
最近通过对对象相关知识的深入学习，我发现对对象的遍历主要分为两种情况，一种是在页面中遍历，另外一种是在方法中遍历对象，现在我们就从这两种情况分别来遍历对象获取对象的key和value。情况一：在页面中遍历对象获取对象的键和值定义一个变量 obj:object={a:1,b:2,c:3};//用于在页面中调用在页面中使用v-for遍历出对象的key和value <div> <h1> 获取对象的key和value </h1
2021-07-22 17:24:10
41077
5
原创 JS的null和undefined的深度理解与比较
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。null==undefined//truenull===undefined//falsenull转数值为0，undefined转数值为NaN
2021-07-16 15:05:11
265
原创 vue+ts：全局过滤器和局部过滤器从注册到具体使用的详细过程
在Vue.js中Filter过滤器是什么在Vue.js中Filter常用于拦截数据，对数据进行进一步处理和展示，分为全局过滤器和局部过滤器，在网页开发中，最常用到的是对时间的处理，比如我们创建个时间，new Date（）时间是中国标准时间（Tue Jul 13 2021 16:50:43 GMT+0800 (中国标准时间)）这样我们就可以通过使用过滤器处理展示为我们日常看到的时间格式：2021-07-13 16:50:43，说到底，过滤器就是拦截数据对数据进行再次处理并返回数据，在Vue.js中常在
2021-07-13 17:42:14
1575
原创 antv自定义表单验证方法以及具体实现（身份证，手机，邮箱验证）
实现效果实现思路通过antv表单验证api接口得知，如果想自定义表单校验规则需要使用validator字段调用自定义校验方法，自定义方法需要传rule, value, callback这三个参数。知道这些就可以动手敲代码了，具体实现如下HTML模块 <h1>表单正则验证</h1> <a-form-model :model="checkData" :rules="rules" ref="ruleFo
2021-07-07 10:44:22
1419
原创 ant对a-date-picker做时间限制处理（选择下个时间不能早于上个时间）
HTML标签模块 <a-row> <a-col :span="12"> 开始时间：<a-date-picker style="width: 100%" @change="onChange" valueFormat="YYYY-MM-DD" v-model="startTime" :disabled="readon
2021-07-05 17:03:53
1794
原创 [antdv: FormModel] model is required for resetFields to work
今天在用Vue+ant的UI框架进行表单绑定的时候出现报错 Warning: [antdv: FormModel] model is required for resetFields to work.通过不断测试才发现是因为没有在表头使用 :model="xxx"进行数据绑定 <a-form-model :model="form" :rules="rules" ref="ruleForm" :layout="'horizontal'" :labelCol="{ span: 5 }">
2021-06-01 11:15:12
20510
4
原创 vue+ts：Vue.set在对象和数组中的具体运用
VUE+TS的Vue.set为对象设置（添加）一个属性有时候在使用的时候需要一个唯一的主键绑定，如果没有唯一主键就可以使用Vue.set给对象新加一个属性（组合属性）作为一个唯一值 this.operationRecordData = JSON.parse(JSON.stringify(this.table1.operationLogs)); this.operationRecordData.forEach((item, index) => { //item为数组
2021-05-27 11:28:41
1529
原创 vue ts父组件使用ref调用子组件的方法或获取子组件的值
vue2.0 ts父组件使用ref调用子组件的方法和值父组件中用ref绑定子组件，然后通过this.$refs.名字就可以获取子组件的值或调用相关方法。父组件<template> <div> <div class="parent"> <h1>父组件名字:{{parentName}}</h1> <a-button type="primary" size="large" @click="refGetCh
2021-03-05 12:20:30
2896
7
原创 vue ts 子组件使用Emit给父组件传值
vue ts 子组件使用Emit给父组件传值在子组件:中使用 this.$emit(‘getChildInput’,value)函数给父组件传值，父组件:使用 @getChildInput="getChildInput"来接收传过来的值，其中"getChildInput"为接收的方法，需要自己定义，其中参数为子组件传过来的值，具体用法见代码实现。子组件<template> <div> <div class="child"> <div&
2021-03-05 11:56:19
2635
原创 vue ts使用Prop向子组件传值
vue ts使用Prop向子组件传值在父组件中想要给子组件传值，可以在子组件使用 :parentName(子组件通过@Prop获取该值的变量名)=‘parentName’（想要传的值），这样，在子组件里可以通过 @Prop({ default: “default value” }) parentName!: string;获取父组件传过来的值了。父组件<template> <div> <div class="parent"> <h
2021-03-05 11:35:05
2228
原创 基于vue+ts的vuex五个属性基础用法
什么是VuexVueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data )。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vue有五个核心概念，state, getters, mutations, actions, modules。1. statestate是Vuex的基本数据，用来存储变量定义export default new Vuex.Store({
2021-01-12 11:52:55
2124
原创 C#读取Excel表格数据显示到GridView控件
实现思路最近在学习C#的编程，想分享一下自己的学习过程，本方法显示数据的办法比较固定，需要定义一个数据模型类，再C#的窗体应用中，使用一个button按钮和GridView组件，引用NPOI读取Excel数据，使用反射GetProperies绑定student类的public属性，通过遍历添加到dataRows列表，再把dataRows的数据绑定到GridView进行展示。请大家参考，欢迎指定批评。确定导入的数据建立数据模型 class Student { publi
2020-12-08 15:49:56
2465
6
原创 C#实现弹出确定取消对话框
确定取消对话框 //注册确定取消按钮 MessageBoxButtons messButton = MessageBoxButtons.OKCancel; //对话框弹出 DialogResult dr = MessageBox.Show("导出Word文档成功，是否立即打开？", "提示", messButton); //点击OK按钮 if (dr == DialogResult.OK)//如果点击“确定”按钮 {
2020-12-08 09:33:04
3492
原创 C#窗体程序打开Word或Excel文档代码实现
方法一在C#窗体中，调用Process进程类即可打开想要打开的文件，在使用Process类的时候记得Alt+Enter导入using System.Diagnostics;命名空间，就这样两行代码就可以打开文件了。 string fileName = @"E:\Computer\桌面\公示.docx";//输入打开文件路径 Process.Start(fileName);//使用process进程打开运行结果：方法二通过 OpenFileDialog()对象找到想要的文件路径，点击确定之
2020-12-08 00:21:05
3741
原创 基于vue+ts实现的快速数学口算功能的实现
功能描述：快速数学口算功能项目要求：1、 使用 Vue 2.0 + TypeScipt2、 可设置计算上限（如10以内、20以内，30以内，100以内等）3、 可设置计算方式（多选）可选项包括 加法、减法、乘法、除法5、 开始答题后，屏幕显示需要口算的表达式，如：3 + 2 等于多少？6、 屏幕下方提供0~9的数字键盘、后退键和确认键。7、 点击确认键后，判断输入是否为空，如不为空，进行答案判断，并提示正确和错误，延时3秒后下一题，如果已达到设置的连续出题数量，给出最终结果，显示做题数量和正
2020-11-23 23:13:08
602
原创 前端面试问题大全-自我复习整理参考
html，http，web基础篇1. HTML5新特性答：h5新语义元素，h5提供了sessionStorage、localStorage和indexedDB加强本地存储，使用之前应该先判断支持情况。CSS3提供了更多的选择器2.canvas相关-答：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。3. http和https的区别答：传输信息安全性不同
2020-10-25 14:42:06
535
原创 ES6语法学习笔记
let 命令基本用法:1.先定义后使用let a = 0;console.log(a);//a=02.代码块内有效let在{}内部定义的变量，在外部是不可以访问的，而var 定义的变量是在全局范围内有效:{ let a = 0; var b = 1;}console.log(a);//ReferenceError: a is not definedconsole.log(b);//b=03.不能重复声明let 只能声明一次 ，而var 可以声明多次:let a = 1;
2020-10-17 19:01:09
463
1
原创 vue学习记录：v-for使用及v-if和v-show用法及区别
v-for:遍历数组、数组对象、对象、迭代数字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2020-09-09 21:53:47
651
原创 vue学习记录：事件修饰符、v-model、Class 与 Style 绑定
一、vue.js事件修饰符.stop 阻止冒泡.prevent 阻止默认行为.self 实现只有点击当前元素时候，才会触发事件处理函数.capture 实现捕获触发事件的机制.once 只触发一次事件处理函数 <div id="app"> <!-- 使用 .stop 阻止冒泡 --> <div class="inner" @click="div1_out"> <input type="button" value="st
2020-09-09 16:47:29
513
原创 基于Vue实现标签的字体滚动
实现思路：通过截取数据第一个字符，把它拼接到最后，通过定时器实现滚动效果，在vue中，当你更新data数据时，网页会自己帮你更新网页中的数据。实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基于Vue实现标签的字体滚动</title> <!--导入vue包--> <script src="lib/vue-2.4.0.
2020-09-08 16:28:53
877
原创 vue学习记录:mvc与MVVM区别、vue的安装、v-cloak、v-text、v-html用法、v-bind及v-on用法
什么是Vue.jsVue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。后端的 MVC 与 前端中的 MVVM 之间的区别MVC : 是后端的分层开发概念；MVVM: 是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel...
2020-09-08 10:13:06
166
原创 前端超级实用的几个主流框架
一、Bootstrap框架Bootstrap官网及下载网站: https://www.bootcss.com/Bootstrap实用功能: 大部分网页样式（导航栏，图片，按钮，表单），栅格系统，轮播图，下拉菜单 等等Bootstrap简介：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统。这将
2020-09-05 23:47:08
479
原创 less环境搭建及VScode使用less（详细教程）
less安装步骤1、下载安装node.js2、下载安装less3、打开VScode软件安装插件 Easy LESS4、编辑保存.less文件，会在对应的目录下生成对应的.css文件下载安装node.jsnode.下载地址：https://nodejs.org/en/首先打开node.js网址，点击下载打开下载好的node安装文件点击安装，一直按next就可以了，直到完成安装好node.js后，摁住Win+R输入cmd进入命令模式，输入node -v查看安装是否成功。下载安装l
2020-09-03 17:11:27
2886
基于vue+ts的数学口算功能项目的实现
2020-11-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人