- 博客(262)
- 收藏
- 关注
RSS订阅原创 js判断一个数组中是否有重复的数组/ 一个数组中对象的某个属性值是否重复
1.2：先将数组转换成字符串，再遍历数组，在字符串中移除当前的数组元素之后还能找到该元素，则说明数组有重复值。2.2,先将数组转换成字符串，再遍历数组，在字符串中移除当前的数组元素之后还能找到该元素，则说明数组有重复值。2.1,先利用ES6语法Set将数组去重，之后再原数组比较长度，若长度小于原数组，则说明数组有重复值。1.3先利用ES6语法将数组去重，之后再与原数组比较长度，若长度小于原数组，则说明数组有重复值。1.1对数组进行排序，对比上一个元素和下一个元素是否相等，若相等，则说明数组有重复值。
2023-01-31 14:24:14
462
原创 vue3 实现放大镜
注意的是我们要用父子组件的话，在父组件调取接口进行赋值传递给子组件展示就行了。（注意的是为了得到展示效果，我们在获取数据的时候可以加判断，给一些默认数据，防止后端数据为空，页面空白的不美观）如下图展示，默认中图是第一个（我们给定一个默认值下标0）划过小图的时候中图变化，划过中图的时候大图显示并会放大。index数据布局，这里展示的多个布局。最近在做商城项目，需求有个详情的时候要用到放大镜，index的数据处理。
2022-12-30 13:47:56
118
原创 vue3实现购物车功能 computed ref reactive onMounted
可以得到我们实现的购物功能满足 全选、反选，明细选中,明细全选和反选，computed 计算属性 和 总价钱，选中件数等等操作（里面有watch 监听示例，但是不建议用，因为watch 监听太耗用性能，computed 足可以满足我们的需求了）
2022-12-21 20:44:19
318
原创 谷歌翻译不能用了
最近发现谷歌翻译不能使用了，对于英语不好的我是个问题呀。解决办法：网上说要执行 win + r 然后 进行ipConfig 结果我试了，没有一点用。来先试试这个吧，直接就成功了。看 图找到 C:\Windows\System32\drivers\etc\hosts文件把 hosts文件放到桌面 以笔记本方式打开。直接在最后面添加以下内容142.250.4.90 translate.googleapis.com142.250.4.90 translate.googleapis.cn142.2
2022-12-05 17:01:27
1764
8
原创 vue3中实现响应式原理Proxy 和 Reflect。代码演示
实现原理：通过 Proxy(代理)：拦截对象中任意属性的变化（包括读写，属性的添加，删除等）。通过 Reflect(反射)：对被代理的对象（也就是源对象）属性进行操作。通过上述两个例子 ，可以总结出真正的实现原理 ：
2022-12-05 14:05:05
106
原创 react antd -Form表单 （单个对象合并成整体对象） 合并对象
合并对象。有很多的细节点，我这里直接放的是处理过的样式图代码。其中引入的组件其实是一个，只不过换了名字和里面的字段。颜色部分是一个数组对象。长度部分也是数组对象，主要就是柔和在一起称为一个新的数组。代码如下，其实还是要用 antd 里面的，不过是要解析数据。然后你就找到你们自己写的点击新增的位置，添加处理。重要的就是当获取了Form 后对数据的处理。组件部分 （就放一个，都一样，换换名字）其实就是得到的数组，对数组解析。
2022-09-19 18:00:01
597
原创 map 处理数据进行return 后， 数据继续执行
map return 不生效。假设我们明细选择了供应商，支持多选，但是保存的时候只能是一个，这个时候我们把进行拆分成一个，多余的那个就直接在自动新增一行。其实map就是在把数据组装成数组后return返给我们了。forEach没有组装retrurn 返回。当我们没有拆分的时候保存是要return，不在调取接口，只有是单个的时候才能去执行接口保存。
2022-09-03 15:43:58
1176
原创 react FormList
需求：点击查询页面的时候，一键报工，报当前页面所有数据的值。并且在Form表单中展示。这样的返回也是前端要求的，因为这样是最好处理的。// 编辑一键报工弹框的页面。多看看API没坏处。
2022-09-03 15:26:03
360
原创 react 自定义日历 手把手教你
当你在代码中布局后，在页面上展示，通过log 发现打印了好多的时间，就是因为antd 组件本身已经封装过了。看了看react 和 antd ，用的时候发现了好大的坑。协定的是： 数据创建的时候肯定是要传一个时间和具体的事项。但是你要想在日历中展示成一条条的形式，那可定是数组最好处理。创建数据的时候：给后端传的数据（前端怎么传，后端怎么存，需要的时候就怎么返回来就行）唯一不同的是，你获取后端返回的时间和antd 的时间做比较然后渲染页面就行了。上图可见，这是详情数据，通过id 拿回的。
2022-09-03 15:05:50
1061
原创 every ,some , if判断的配合使用（多条件状态判断）
项目中我们往往会遇到那列表的状态或者表头的状态进行判断的情况。如果单独判断一个比较好处理，但是就是有时候会返回多个状态，并且在多选的时候要根据多个状态进行判断，此时我们依旧用every 或者some来判断，只不过在此基础上加一个if条件就OK。我们需要判断当选中的状态满足为 1,或2，或3 的时候执行一个操作，否则就给出错误提示。假设需求明细行有多条数据，且每个数据的状态都不一样，1,2，3,4，5 这5种状态。思路： 首先我们先判断每一项。，在去拿每一项做比较。...
2022-08-30 13:32:06
244
原创 react路由传参3种方式
或者通过对象的方式传过去，页面进行接收。当然你在验证时候肯定是要自己state一个id值的，去承接设置新的值。缺点：使用HashRouter的话，刷新页面，参数会丢失；缺点：传值太多不方便而且url会变的很长。页面的接收，直接在钩子函数中进行接收验证。二：query传参：路由页面（无需配置）优点：传参优雅，传递参数可传对象；缺点：传值太多url也会变的很长。优点：传参优雅，传递参数可传对象；优点：页面刷新，参数不会丢失；缺点：刷新地址栏，参数丢失。1，刷新页面后参数不消失,j假设页面中的配置是这样的。...
2022-08-30 10:12:51
1773
2
原创 js 前端 filter 过滤， 去重， 查找 findIndex 等等
案例3 ：根据数组对象中的id作比较，id相同的去掉。这种方法只会保留 id 第一个出现的数组。项目中：假设 我们操作了某个按钮获取到整个数据，在执行过滤，调取另一个接口。它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。案例 4 ：数组对象完全相同的去除。...
2022-08-17 18:05:40
1483
原创 前端 js 实现拆分table 列表数组为 单个新数组（）
看下需求，当点击添加按钮 新增数据。点击明细行供应商进行回显（供应商支持多选操作）；当明细数据填写完整后，点击拆分供应商按钮，实现根据 项目号和供应商进行过滤且根据供应商数量进行数据重组，拆分成多个明细。（只有供应商的值不相同，其他数据均相同）注意的是，我们在新增或者编辑页面的时候要注意解析后端是否返回有明细。且注意 每个值的解析是否正确，（我犯得错误是解析数据成对象展示，但是供应商是数组造成后续的错误。...
2022-08-17 16:17:06
324
原创 react this.setState接收参数 。写成Promise形式。以及async/await和Promise的区别
同步编程通常来说易于调试和维护，然而，。。“Promises”渐渐成为JavaScript里最重要的一部分，大量的新API都开始promise原理实现。
2022-07-28 09:55:03
247
原创 react 项目商城中，显示或者隐藏组件（锚点）
当然了你要是用classxxxextendsxxxReact.Component{render(){}}我发现登录的时候存的本地的localStorage。页面中打印发现console.log(getItemToken,‘就是存的字符串true’);简单描述下进入登录页面后，获取信息，进入首页。也是一样的，不过是注意state和this.setState({处理})就OK了。下图是我进入后的首页，但是不想显示登录和注册。因为我已经登录了证明我有信息。...
2022-07-26 11:26:40
336
原创 项目中new Promise和async、await中的使用，以及promise.all在项目中的实际应用
async/await是写异步代码的新方式，它是generator的语法糖，以前的方法有回调函数和Promise。async/await是基于Promise实现的，它不能用于普通的回调函数。async/await与Promise一样，是非阻塞的。async/await使得异步代码看起来像同步代码，这正是它的魔力所在。Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。...
2022-07-25 11:19:45
1519
原创 前端 重写 toFixed 方法并封装(不采用银行家算法返回正常数字类型)
1、我们知道Math对象里的Math.round(num)方法返回num的最接近整数，有一点近似于四舍五入的方法,这个方法只能得到整数。4、Math.pow(num，a)方法返回num的a次方，所以这里巧妙的利用了这个方法以达成目的。2、而num.toFixed(n)方法返回的是num的指定小数位数为n的字符串.我们看到不管是传的正数、0或者是负数，都能够正常的得到结果(数字类型)，所以这种方法特别赞。看下边的方法，封装好了。...
2022-07-15 11:41:59
475
原创 git 撤回 （git版本回退处理）
项目中，我们会遇到 提交的项目代码有问题，需要执行撤回命令，但是发现撤回之后还是会运行失败。下边是一个好方法，亲测比 git reset --hard 版本号 有效。下面我们详细解说一下。当我们本地已经 执行了git commit -m “说明内容”，但还没有 进行 git push，如何回滚呢操作如下：1 执行 git status 命令 查看本地的commit 提交记录。2 在执行 git log 命令 查看commit 提交的版本号然后输入 q 就会退出。3 （3种方法）再去执行 git
2022-07-09 11:23:04
5411
2
原创 vue项目 移动端 实现购物车功能
看下图，我是去天猫上截取的一张当点击 -加入购物车-按钮时会出来弹框进行选择大小，尺码，商品的id（页面是不显示的）, title商品名称 , imgUrl(海报图), flag（标识也是不显示的）等信息（弹框就不写了，一般你下载插件后都有）注意的是：标识符，flag非常重要，为以后复选框判断是否选中做参考，变成一个数组形式，cart，传入vuex来看看代码vuex 页面代码如下我们要知道当我们初始化进入购物车的时候是空的，后续有数据才是展示的找一张空图，给个按钮去操作跳转首页或者列表页就好
2022-07-01 10:43:01
1327
原创 动态样式绑定--style 和 class
写之前注意的是：凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize除了绑定值，其他的属性名的值要用引号括起来，例如backgroundColor:#00a2ff 要写成 backgroundColor:‘#00a2ff’。一 1 对象 形式当我们没有取创建单独的css文件时，直接在代码中写一 2 数组形式一 3 三元运算符一 4 绑定data对象二 ： class写法二 1 对象形式二 2 判断是否绑定一个active二 3 绑定并判断多个二3.1
2022-06-29 14:54:16
1115
原创 vue3 Uncaught (in promise) TypeError: Cannot read properties of undefined 其实是解构赋值的问题
在vue3中当我们用到了解构赋值配合reactive toRefs 方式渲染页面时，报错Uncaught (in promise) TypeError: Cannot read properties of undefined发现打印也是有值的，并且赋值成功，唯独在渲染页面的时候报错。其实就是 …解构赋值的问题。，已经解构过了，我们的渲染层级就不用再用最外层，直接找到我们解构要渲染的那层代替结构层。分析也就是我们初始化定义了一个对象，解构了他，直接渲染他的孩子就好了解决了。......
2022-06-24 16:30:30
5192
原创 vue2和vue3 的 keep-alive的用法
vue3的keep-alive用法和vue2用法是不同的。keep-alive概念：keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。keep-alive作用：用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。keep-alive使用方式:方式一：在App.vue中使用keep-alive标签，表示缓存所有页面方式二：按条件缓存，使用include，exclude判断是否缓存方式三：在router目录下的index.js中，第一步：使用
2022-06-23 17:56:52
405
原创 vue3 中vuex状态管理
vue3中的vuex 总体和vue2的用法是一样的，只不过现在使用收拾直接在setup 函数中使用并返回了。下边看看示例首先我们先创建几个页面 一个是store 文件夹 ，一个是索要演示的页面。store文件夹 index需要的页面...
2022-06-22 11:59:43
299
1
原创 vue2 和 vue3 的 路由守卫
vue-router 路由实现:路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。首先知道有3个参数 to , from, next (意义：to是即将要进入的目标路由对象,from 是当前导航即将要离开的路由对象,next调用该方法后，才能进入下一个钩子函数afterEach )next() // 直接进入to所指的路由next（false） // 中断当前路由next(‘route’) // 跳转指定路由next(‘erro
2022-06-22 10:43:58
751
原创 vue3路由传参 query 、params
vue3 中的传参方式和vue2中一样，都可以用query和params传参不过注意的是，vue2 中是有this的，但是vue3是在setup中进行的，且要引入 useRoute 和useRouter代码如下router 文件夹内容不变，在你用cli 创建项目时选中就行，我这里不在展示代码，放一个图看看就好了看下RouteView 文件的代码about页面不管那种方式都可以正确跳转，且得到传参参数。我上边也有用watch 方法监听路由变化，用watch 是方便做监听动态的路由传参，从而
2022-06-21 17:45:04
8586
原创 vue3-cli创建项目后每个文件的第一行都爆红，或者每个文建都 : No Babel config file detected for...
Parsing error: No Babel config file detected for D:\mySelf\myProject\vue3\demo_vue3.0.eslintrc.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.打开了多个文件，每个文件都会在第一行报，看着难受，解决当我们创
2022-06-21 10:47:13
878
2
原创 vue 项目 前端 模拟后端接口数据（vue2,vue3）
项目中或者平常自己创建demo的过程中，往往需要后端配合，但是有时候没有后端，又需要数据，此时就展示了我们前端的强大之处，自己模拟后端接口数据。如果自定义一个模拟后端数据，首先创建一个文件夹放置后端数据，（backApp文件夹）然后再命令终端，执行命令npm init - y 或者 yarn init -y 初始化文件之后继续执行命令 npm i express request -D 下载对应的包然后再创建新的文件，放置配置的接口数据（app.js文件）主要的代码配置 app.js 文
2022-06-17 16:24:23
2707
原创 vue3 实现 todoList 知识点 reactive, toRefs, computed, watchEffect， filters，localStorage数据存储、获取
上图实现简单的增删改查reactive, toRefs, computed, watchEffect， filters，localStorage数据存储、获取。如果想要实现多组件封装，请看这个代码如下
2022-06-17 10:26:25
209
原创 vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch
vue3 实现简单的todolist，运用到的知识点： 组件传值props, ref, onMounted, reactive, toRefs, watch实现功能如下图。介绍下，我这里进行了封装和父子组件传值。App文件（父组件）type封装就一点不在上代码，看图就行utils 存储封装也很少head 头部代码list文件Item 文件底部的 footer 文件就这样结束了。如果不想这样来回的组件封装。在一个文件中直接展示，可以看下个文件......
2022-06-17 10:17:55
551
原创 vue项目 初始化 解决页面闪屏问题 v-cloak
vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)项目中：vue使用axios请求使用Loading时，请求时页面闪动。解决方案：在最外层的标签上添加就可以加上v-cloakv-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，而且，在css里面要添加[v-cloak] {display: none;}或者这样但是有的时候会不起作用，可能的原因有二：1
2022-06-15 17:34:50
1013
原创 vue3父子组件传值 以及注意事项
当你在进行父子组件传值的时候报警告：Property “value” was accessed during render but is not defined on instance.at warn]: Extraneous non-emits event listeners (xxx) were passed to component but could not be automatically inherited because component renders fragment or text
2022-06-15 15:38:58
2490
2
原创 vue3 祖孙组件通讯传值 provide 与 inject 以及 响应式数据的判断
父组件有一个provide 选项来提供数据，子组件有一个inject 选项来开始使用这些数据写法：1 在祖组件中 写入 provide（‘传递的变量名’，自定义变量名）2 在孙组件中写入inject（‘接收的传递的变量名’）代码演示记得导入 provide祖组件文件中孙组件文件 接收 inject效果响应性数据的传递与接收。要先在祖组件中 provide 数据出去，在孙组件拿到的也是响应式的，并且可以通自身定义的响应式变量一样，直接return给template使用。一旦数据有变化，视图
2022-06-14 16:09:30
1669
原创 vue3 自定义hook函数 和 toRef
如果有多个的对象，可以直接用 toRefs(‘一个参数’)/ 使用可以用 …toRefs(‘参数’)代码实例我们假设及时获取页面鼠标位置即打点。如果要是有人要用这个组件就要变化，进行封装然后封装一下在引入下toRef...
2022-06-14 13:34:43
87
原创 vue3生命周期钩子函数
vue2生命周期钩子函数视图vue3生命周期钩子函数视图代码 // 通过配置项beforeCreate () {console.log(‘beforeCreate’);},created () {console.log(‘created’);},beforeMount () {console.log(‘beforeMount’);},mounted () {console.log(‘mounted’);},beforeUpdate () {console.log(‘befor
2022-06-14 11:38:48
6638
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人