冰淇淋ly-CSDN博客

原创前端学习资料视频

分享并记录一下网上免费的学习视频，大部分都是B站上的1.vue（coderwhy老师超级火的视频）最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili2.node（黑马）黑马程序员Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解_哔哩哔哩_bilibili3. ES6（尚硅谷）尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩_bilibili4.js（黑马）

2022-03-07 09:32:45 2693

原创 js每一行固定文字，其余换行，按指定长度切割字符串

项目要求是一行放6个字，冒号要跟最后一个字连一起.通过6的倍数来切割字符串，加上换行符\n，最后一行加上冒号

2023-04-04 17:27:18 711 1

原创前端匹配java的RSA/ECB/OAEPWITHSHA-256ANDMGF1PADDING规范

vue匹配java的RSA/ECB/OAEPWITHSHA-256ANDMGF1PADDING规范

2022-11-29 10:23:11 2466

原创 SSL: no alternative certificate subject name matches target host name ‘xxxxxxx‘

拉取代码时出现fatal: unable to access 'xxxxxxxxxx': SSL: no alternative certificate subject name matches target host name 'xxxxxxxxxxx'翻译致命：无法访问'xxxxxxxxxx“：SSL:没有其他证书使用者名称与目标主机名“xxxxxx”匹配”解决：执行命令：git config --global http.sslVerify false...

2022-04-26 17:55:08 1454

原创 vue3 shallowReactive 与 shallowRef

shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式) shallowRef: 只处理基本类型的响应式, 不进行对象的响应式处理什么时候用浅响应式呢? 一般情况下使用ref和reactive即可如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive 如果有一个对象数据, 后面功能不会修改该对象的属性，而是产生新的对象来替换 ===> shallowRef shallowR...

2022-04-17 11:06:30 877

原创 vue3 toRef和toRefs

举例说，定义一个人有姓名，年龄，工作（工作1的薪水），加三个按钮，可以改名字，改年龄，改薪水。可以这样实现<template> <div class="about"> <div>{{person}}</div> <div>姓名{{person.name}}</div> <div>年龄{{person.age}}</div> <div>薪水{{person.j

2022-04-17 07:59:15 663

原创 vue3 自定义hook 函数

作用类似于vue2中的mixin技术案例：获取鼠标点击页面的坐标1.在src下建hooks文件夹，用于存放复用的js2.src/hooks/usePoints.js文件中写复用的部分import { reactive, onMounted, onBeforeUnmount } from 'vue'export default function () { let point = reactive({ x: 0, y: 0 }) f

2022-04-15 17:13:38 1178 3

原创 js递归树形结构去掉不符合条件的

去掉a数组中不在b数组中的年龄，类似案例还有菜单的权限筛选var a = [ {name:'22',age:99, child:[ {name:'22',age:69}, {name:'22',age:99} ]}, {name:'22',age:9, child:[ {name:'22',age:99}, {name:'22',age:19} ]}, {name:'22',age:79, child:[ {name:'22',age:99}, {name:'2

2022-04-12 15:15:39 1587

原创 js浅拷贝和深拷贝

1、JS数据类型基本数据类型：Boolean、String、Number、null、undefined引用数据类型：Object、Array、Function、RegExp、Date等2、深拷贝与浅拷贝深拷贝和浅拷贝都只针对引用数据类型，浅拷贝会对对象逐个成员依次拷贝，但只复制内存地址，而不复制对象本身，新旧对象成员还是共享同一内存；深拷贝会另外创建一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。区别：浅拷贝只复制对象的第一层属性，而深拷贝会对对象的属性进行递归

2022-04-12 13:39:47 3079

原创 js数组常见操作方法总结

1.合并数组var arr1 = [1,2,3]var arr2 = [4,5]var arr3 = arr1.concat(arr2)2.数组转换成字符串var arr = [2,3,4]console.log(arr.join()) //2,3,4console.log(arr.join('-')) //2-3-4 指定字符连接3.向数组末尾追加元素var a = [2,3,4]a.push(5,9)console.log(a)//[2,3,4,5,9]4...

2022-04-11 10:16:16 899

原创 js字符串常见操作方法

1.获取指定字符的前/后的值str = "123~456”str.split("~")[0] 输出为 123str.split("~")[1] 输出为 4562.获取指定位置字符var str="Hello world!"str.substring(3) 输出为 lo world!str.substring(3,7) 输出为 lo wstr.slice(3,7) 输出为 lo wstr.slice(-3,-1) 输出为 ld 倒数第三个位置到倒数第一个位置...

2022-04-02 09:18:44 734

原创 es6知识点

一、let关键字块级作用域if(true) { var a = 1; let b = 2}console.log(a) //1console.log(b) //b is not defined

2022-04-01 13:49:22 183

原创微信小程序下拉刷新上拉加载

2.下拉刷新3.上拉加载

2022-04-01 13:40:45 305

原创 vue移动端适配

1.lib-flexible安装：npm install lib-flexible --save在main.js里面导入命令import 'lib-flexible'把index.html里面的<meta name='viewport'>标签删除;因为会自动添加2.postcss-plu.

2022-03-30 11:33:34 597

原创 vuex状态管理使用

小白建议看coderwhy老师的视频，讲的很明白，我在这里记录一下过程最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili一、安装 1.命令npm i vuex --save2.引入新建src/store/index.js （先这样，后边再拆分目录结构，一步一步来）import { createStore } from 'vuex'export default createStore({ state: { }, mutations: {..

2022-03-11 14:02:44 1497

原创 To install it, you can run: npm install --save @/api/operateLevel

今天拉代码运行突然报错了，一看提交描述有乱码，提交的同事那好好的，就很神奇。我就挨个按照错误文件找，是引入的文件名大小写问题api/OperateLevel.js这个文件拉下来第一个字母是大写的，但是其他页面引用时候是小写的，把文件名改成小写的就好了其他报错文件也是引入的文件大小写问题...

2022-03-10 10:28:57 1425

原创 vue定时请求接口

data() { return { times: null, }; },created() { this.getErrorLogDataFun(); this.times = setInterval(() => { this.getErrorLogDataFun(); }, 1000 * 60); },methods: { getErrorLogDataFun() { //请求XXXXXX }}.

2022-03-09 12:02:23 4803

原创 vue随机数测试定时改变数据

created() { this.getInStationCounts() this.timess = setInterval(() => { this.getInStationCounts(); }, 40000)},methods里getInStationCounts() { this.data = [ {value:'11',name:'aa'}, {value:'22',name:'bb'} ] setTimeout(() =&g..

2022-03-09 11:52:14 1299

原创 echarts向上无缝自动滚动(放弃vue-seamless-scroll)

一开始是想用vue-seamless-scroll插件的，后来发现有问题，第二个盒子渲染出来了但是不显示不知道是什么原因（这个插件会复制两个一样的盒子，如图两个蓝色横线）datav适用于表格滚动，这样带echarts的还不行我看有的文章是用echarts的zoom什么属性来实现，那样看起来不能无缝，每次最下边的图形都要重新加载，视觉效果不好。没办法只能自己写了思路是：写上下两个盒子，循环2次，上边的盒子通过定时器自动改变margin-top实现向上滚动，下边盒子也会跟着上去，等到

2022-03-04 19:22:25 2360

原创父组件监听子组件的值的变化并把值传给父组件

页面的头部这个时间是引用的一个子组件，我想在父组件中用这个时间并且是时刻变化的值子组件中watch监听watch: { dataTime(val) { //dateTime是你在props或者data中定义的你要监听的值 this.$emit('dataTime', val) //传给父组件 }, },父组件引用的时候加@dateTime="nickName"<top :name="topName" @dateTime="nickName"

2022-03-02 17:28:19 2377 5

原创 echarts时间段折线图，横坐标偏移

实现的效果如图1777是3点到6点的值，横坐标往左移动就好了悬浮的标记是自定义的贴一下整个代码吧setChart() { let max = 0; max = Math.max(...this.data.data) + 800; //y轴最大值 let option = { grid: { top: " 0%", left: "5%", right: "5%",..

2022-03-02 13:19:14 3635

原创 Cannot read properties of undefined (reading ‘filter‘)

背景：在echarts子组件，偶尔初次加载时候没值，判断一下就好了

2022-02-24 14:33:30 6511 2

原创去掉数组对象前的属性并按指定顺序（动态给数组起名）

将下面这组数据改成这样实现：利用对象动态给数组起名let obj = {}; let arr = []; console.log("前",res.data) for (let i in res.data) { obj["arr" + i] = []; obj["arr" + i].push(res.data[i].logType); obj["arr" + i].push(r

2022-02-24 14:20:27 320 1

原创 vue鼠标移入该盒子放大，循环实现

效果如图，鼠标移入某个盒子，该盒子实现放大效果。获取用ref，放大效果transform:scale()，放大速度transition<div class="home"> <router-link :to="item.url" v-for="(item, i) in list" :key="i"> <div class="box" ref="aaa" @mousemove="i

2022-02-23 15:05:48 1670

原创 ajax双循环渲染

静态网页结构<body> <div class="bigBox"> <div class="bigItem"> <p>父亲：张三</p> <div class="smallBox"> <div class="smallItem"><span>张大娃</span><span>11</span></div> <div class

2021-03-19 15:47:10 195

原创 swiper动态渲染数据

页面渲染完再写轮播图插件，好多插件都是这样$.ajax({ type: "GET", url: "/banner/list", success: function (res) { console.log("轮播图", res); if (res.code == 0) { for (var i = 0; i < res.data.length; i++) { $('.swiper-wrapper').append($('<div class="swiper-slide

2021-03-19 12:32:13 1582

原创面向对象和类的继承

1 面向过程：按照步骤一步一步来比如把大象装进冰箱：开门，把大象装进去，关门面向对象：按照对象功能划分问题大象功能：进去，冰箱功能：打开，关闭。最后使用大象和冰箱的功能2 面向对象特性：封装性，继承性，多态性3 对象由属性和方法组成：属性：事物的特征，比如手机的颜色大小（常用名词）方法：事物的行为，比如手机可以打电话（常用动词）4 类：抽象了对象的公共部分，泛指某一大类对象：对象特指某一个，通过类实例化一个具体的对象5 面向对象思维特点：（1）抽取对象共用的属性和行为封装成一个类（模板

2021-01-18 17:48:02 79

原创 webAPI

API：应用程序编程接口Web API：浏览器提供的一套操作浏览器功能和页面元素的APIDOM（文档对象模型）：处理可扩展标记语言的标准编程接口2.获取元素<div id="a" class="b" ></div>document.getElementById('a'); //根据id获取元素document.getElementsByTagName('div'); //标签名 element.getElementsByTagName('div')//以下H.

2021-01-13 18:00:27 193

原创 js放大镜效果

<!DOCTYPE html><html lang="zh"><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"> <title></title>

2020-12-31 16:37:17 65

原创 js处理浏览器兼容性

// 处理浏览器兼容性// 获取第一个子元素function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null;}// 处理浏览器兼容性//

2020-12-21 09:56:04 162

原创 js函数

1.求1-100的累加和function getSum(num1,num2) { var sum = 0; for(var i = num1; i <= num2; i++) { sum += i; }; return sum;}console.log(getSum(1,3)) 2.求两个数最大值function getMax(num1,num2) { if(num1 > num2) { return num1; }else { return num2; }

2020-12-16 17:43:57 105

原创 js数组小案例

1.求数组最大值var arr = [2,45,33,87];var max = arr[0];for (var i = 1; i < arr.length; i++) { if(arr[i] > max) { max = arr[i] }}console.log(max)2.求数组所有数的和以及平均值var arr = [2,45,33,87];var sum = 0;var average = 0;for (var i = 0; i < arr.lengt

2020-12-16 11:34:40 334

原创 jquery限制文字大小

实现这样一个功能，比如限制文字20字，多余的文字用省略号代替。“更多”定位在右下角<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a { width: 200px; height: 40px; position: relative;

2020-12-15 11:43:32 168

原创模板引擎拼接数据

使用模板引擎实现以下功能：添加用户，渲染表格，修改功能，删除功能接口文档html<div class="row"> <div class="col-md-4" id="modifyBox" > <form id="userForm"> <h2>添加新用户</h2> <div class="form-group"> <label>头像</label>

2020-12-11 16:29:56 201

原创监测网络连接状态

1、通过window.navigator.onLine来检测，用户当前的网络状况，返回一个布尔值，但是不同浏览器会存在差异2 、online 和 offline ，他们监听的对象都是windowonline用户网络连接时被调用offline用户网络断开时被调用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>onLine</title&g

2020-11-27 16:20:29 371

原创 jquery中mouseenter，mouseleave，mouseover，mouseout，mousemove

mouseenter 事件只有在鼠标指针进入被选元素时被触发mouseleave 事件只有在鼠标指针离开被选元素时被触发。mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发mouseout 事件在鼠标指针离开被选元素或任意子元素时都会被触发演示：mouseenter() 与 mouseover() 之间的不同mousemove()当鼠标指针在指定的元素中移动时演示mousedown ()当鼠标指针移动到元素上方（包括子元素），并按下鼠标左键时mouseup()当鼠标指针移

2020-11-26 16:28:21 273

原创 jquery点击加号克隆，点击减号删除

写管理后台时候要实现以下效果，点击加号克隆整个项目费用部分，点击减号该项目费用部分消失。我是单独写了一个隐藏的部分，点击加号，就增加一个隐藏部分，点击减号，当前部分删除。如果用jquery动态加载标签，表单太多了，我觉得麻烦。实现代码$(document).on('click', '.addBaseClick', function(){ var copyer=$(".addBaseBox").clone(); //克隆的是隐藏部分，如果直接克隆显示部分，若输入框有值则会跟着克隆。 copy

2020-11-26 15:00:44 429

原创移动端H5左右联动

demo下载路径https://download.csdn.net/download/qq_39232387/13145217实现下面这种效果整体布局左右联动的实现var $navList = $('.tab_ul li'), $conts = $('.tab_con'), curNav = 0;var contTopList = [];$conts.each(function(i) { contTopList.push($(this).position().t

2020-11-23 14:29:51 640