笔记
雨雨##雨雨
开心向阳而行,愿得一心人,白首不相离。
展开
-
element-ui表格多选,每次只能选中一个并获取数据
摘抄csdn上面的,实际可用,所以做笔记原创 2022-06-16 11:09:33 · 1101 阅读 · 1 评论 -
element ui 搜索案例记录
无原创 2022-06-14 10:25:27 · 228 阅读 · 0 评论 -
隐藏上传图片的
十点多原创 2022-06-07 17:19:31 · 67 阅读 · 0 评论 -
手机号码验证和数字验证
data() { var checkphone = (rule, value, callback) => { // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/; if (value === "") { callback(new Error("请输入手机号")); } else if (!this.isCellPhone(value)) { // 引入meth..原创 2022-05-26 17:10:32 · 222 阅读 · 0 评论 -
vue-elementui省市区三级选择器
1.vue使用elementui的el-cascadernpm install element-china-area-data -S //安装//regionData 是省市区三级联动数据(不带“全部”选项)//CodeToText 是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市//TextToCode 后台省市区显示再页面转code,//TextToCode['广东省'].code, TextToCode['广东省']['深圳市'].原创 2022-05-26 17:06:17 · 5023 阅读 · 0 评论 -
清除rules验证
this.resetForm("form");//在reset函数里面加入下面代码,注意两个ruleForm要对应 this.$nextTick(() => { this.$refs["ruleForm"].resetFields(); //清空所有的验证规则 });原创 2022-05-25 16:21:36 · 448 阅读 · 0 评论 -
安装element ui时报错
原因npm版本太高,解决办法:npm install --legacy-peer-deps element-ui --save原创 2022-05-10 21:50:58 · 1264 阅读 · 0 评论 -
element ui 表格 selection-change函数获取选中项,以数组形式,
<el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> <el-table-column type="selection" width="55" align="center" /> <el-ta.原创 2022-05-06 16:27:00 · 1930 阅读 · 0 评论 -
vue3中静态json文件要放在public中才能请求到
axios.get("/jsons/amap.json").then((res) => { this.homeList = this.homeList.filter((item) => { res.data.find((element) => { if (element.code == item.geoName) { item.geoName = element...原创 2022-04-28 15:06:06 · 1066 阅读 · 0 评论 -
原型与原型链(链式查找)
//(1)每个函数都有一个prototype属性,它默认指向一个object空对象(原型对象) //(2)prototype(显示原型或原型对象)和__proto__(隐式原型)都有一个constructor指回函数对象 //(3)每个函数都有个prototype,即显示原型 //(4)每个实例对象都有个__proto__,即隐式原型 function Scan() { }//创建函数时,内部做了this.prototype={} ...原创 2022-03-29 23:23:02 · 331 阅读 · 0 评论 -
class类的基本知识
// (1)定义类,首字母大写 //(2)constructor它是类的构造函数,实例化时会自动调用constructor构造函数,类里面面的this指向实例对象。 //(3)使用new关键字实例化创建对象 //(4)类里面的方法放在constructor中调用,实例化时会调用。 class Person {//类里面的函数不用加function constructor(name, age, fro...原创 2022-03-29 21:59:37 · 127 阅读 · 0 评论 -
react中children类似于vue中的slot(插槽),父给子留位置
App中只引入Father组件,并只渲染它import React, { useState, useEffect, useCallback } from 'react'import Father from './components/Father'export default function App() { return ( <div className='App'> <Father /> </div> )}原创 2022-03-29 18:14:46 · 1051 阅读 · 0 评论 -
数组中的元素是对象,要修改对象属性的方法map()
//map()数组方法,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。//arr.map(function(){})数组中的每个元素都会执行map里面的这个函数 let person = [ { id: "01", name: "再毛", age: "22", height: "173cm" }, { id: "02", name: "真瑛", age: "24", height: "158cm" },原创 2022-03-29 17:12:28 · 1280 阅读 · 0 评论 -
根据id删除数组中对应的对象
todoList=todoList.filter((list) => list.id !== id)//filter过滤出来满足条件的元素组成新数组原创 2022-03-29 15:08:54 · 596 阅读 · 0 评论 -
字符串转对象时报错 Uncaught SyntaxError: Unexpected token o in JSON at position 1
JSON相关的出错误:Uncaught SyntaxError: Unexpected token o in JSON at position 1分析: JSON格式问题解决:JSON中setItem用双引号,不是单引号原创 2022-03-27 23:44:39 · 473 阅读 · 0 评论 -
原生js实现无缝轮播图
(1)布局<div id="rotation"> <ol id="dot"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ul id="rotateFat...原创 2022-03-26 12:25:17 · 1208 阅读 · 0 评论 -
setState()执行是同步,改变里面的值是异步,后面函数参数才能获取到最新值
import React, { Component } from 'react'export default class Demo extends Component { state={count:0} add=()=>{ const {count}=this.state this.setState({count:count+10},()=>{ console.log(this.state.count);//这里面才能.原创 2022-03-19 23:22:22 · 304 阅读 · 0 评论 -
react路由的基本使用
前端路由v5的使用方式npm install --save react-router-dom@5(1)明确好界面中的导航区、展示区:import { Link, Route } from 'react-router-dom'(2)导航区的a标签改为Link标签<Link to="/home">Home组件</Link><Link to="/about">About组件</Link>(3)展示用route路由标签路径的匹配 ...原创 2022-03-16 15:29:47 · 724 阅读 · 0 评论 -
fetch数据请求
优化 search = async () => { const { keywordElement: { value: searchName } } = this//连续解构+重命名 //使用fetch发送网络请求 优化 try { const response = await fetch(`/api/search/users?q=${searchName}`) const dat...原创 2022-03-16 10:49:14 · 713 阅读 · 0 评论 -
react组件传参:pubsub发布订阅机制
订阅和发布消息: npm install pubsub-js --save 或yarn add pubsub-js先订阅,再发布订阅方:import Pubsub from 'pubsub-js'componentDidMount(){const token=Pubsub.subscribe('subscribeMessage',(_,data)=>{//第一个参数是消息名,一定要接或者_占位console.log(data);})}.要在组件的componetnt原创 2022-03-16 09:39:06 · 1160 阅读 · 0 评论 -
代理跨域------------------
(1)只能配置一个:package.json配置 :"proxy":"http://localhost:5000"的跨域:http://localhost:3000/search/users?q=${searchName}`(2)yarn add http-proxy-middleware --save 或 npm install http-proxy-middleware --save安装在src目录下新建setupProxy.js文件:文件中加入const {createProxyMiddl原创 2022-03-15 16:27:46 · 164 阅读 · 0 评论 -
数组降维为一维数组
// 数组降维const oldArr = [1, 2, [3, 4,5,6,[10,20,30,[100,1000,200,2000]]]]; const newArr = oldArr.flat(Infinity);//参数为要降的维数,不知道可以放infinityconsole.log(newArr);// [1, 2, 3, 4, 5, 6, 10, 20, 30, 100, 1000, 200, 2000]//递归降维,判断是不是数组 const oldArr ...原创 2022-03-14 09:52:56 · 316 阅读 · 0 评论 -
es6的reduce用于求数组总和
var arr = [10,20,30,40,50,60] var countAdd = arr.reduce(function (addcount, currentval, index, array) { //数组reduce方法,参数一是个回调(回调:参数1是累计回调的返回值,参数2是数组中正常处理的元素,参数3是正在处理元素的下标,参数4是原数组arr); //参数2可选,作为第一次调用回调时的第一个参数;在没有初始值的空数组...原创 2022-03-14 09:22:39 · 1339 阅读 · 0 评论 -
拖动事件--------
(1) var div = document.getElementById('box'); var X, Y; function Move(e) { console.log(e); X = e.clientX - 50 Y = e.clientY - 50 div.style.top = Y + 'px' div.style.left = X ...原创 2022-03-13 23:25:50 · 371 阅读 · 0 评论 -
overflow-x: auto左右滚动只能移动端;overflow-y: scrool;auto*上下pc端也行
div { width: 650px; height: 520px; /* overflow: auto; */ position: relative; margin: auto; overflow: hidden; } body::-webkit-scrollbar { ...原创 2022-03-13 22:26:38 · 1467 阅读 · 0 评论 -
删除数组中的某一个元素
(1)var array = [1,5,2,3,2,5,4,5,5,10,5,5,5]let flag=truewhile(flag){if(array.indexOf(5)>=0){array.splice(array.indexOf(5),1)}else{flag=false;}}console.log(array);(2)var array = [1,5,2,3,2,5,4,5,5,10,5,5,5] var newArry=new Se...原创 2022-03-13 21:50:24 · 620 阅读 · 0 评论 -
深拷贝的几种方法
(1):递归 function deepClone(obj) { let objClone = Array.isArray(obj) ? [] : {}; if (obj && typeof obj === "object") { for (key in obj) { if (obj.hasOwnProperty(key)) { ...原创 2022-03-13 10:10:19 · 965 阅读 · 0 评论 -
master合并分支dev,遇到Already up to date问题?
合并分支dev$ git merge devAlready up to date.$ git reset --hard devHEAD is now at bfe6a9b 2019-11-01 针对服务器迁移做出调整原创 2022-03-08 16:42:34 · 130 阅读 · 0 评论 -
vue 回调函数中,this指向的是undefined(没有用箭头函数)
一图:vue中的回调中的this指向的不是实例,this.不能直接调用data里面的数据,除非用箭头函数;二图:(1)git add . 添加到暂存区,(2)git commit -m""提交到本地 ,git commit -am是提交是包括git add . 的,且不能有新的文件夹,(3)git push origin master 提交到master...原创 2022-03-06 10:30:17 · 534 阅读 · 0 评论 -
react (旧)生命周期解析
(1)挂载时(2) state状态更新后的流程(3)forceUpdate强制更新(4)父组件从新render之后子组件生命周期原创 2022-02-28 22:32:58 · 63 阅读 · 0 评论 -
高阶函数和函数柯里化,和react表单双向控制
原创 2022-02-27 09:42:23 · 201 阅读 · 0 评论 -
函数组件中使用ref ,调用useRef()方法
原创 2022-02-24 15:42:22 · 205 阅读 · 0 评论 -
extends和implements区别
extends和implements区别1、在类的声明中,通过关键字extends来创建一个类的子类。一个类通过关键字implements声明自己使用一个或者多个接口。extends 是继承某个类, ****继承之后可以使用父类的方法, 也可以重写父类的方法****;implements 是实现多个接口, *接口的方法一般为空的, 必须重写才能使用*2、extends是继承父类,只要那个类不是声明为final或者那个类定义为abstract的就能继承Java中不支持多重继承,但是可以转载 2022-02-23 17:01:46 · 119 阅读 · 0 评论 -
hooks中 useEffect(副作用函数)
import React, { useState, useEffect,useRef } from 'react'export default function Scan() {const [number, setNumber] = useState(0)useEffect(()=>{//(1)监测number改变,就会调用这个useEffect,相当于class组件中的componentDidUpdat组件console.log('number改变了');},[number]原创 2022-02-22 16:51:48 · 555 阅读 · 0 评论 -
React 函数组件中使用hooks中得useState
//useState让函数组件有state(状态),并进行数据的读写操作(1) import React,{useState} from 'react' //引入useState在函数中使用: const [count, setCount] = useState(0)//数组的解构赋值,//(1) console.log(count);//第一个值为count变量,且初始值为0,//(2) console.log(setCount);//第二个为改变count的方法//(3)Hooks必原创 2022-02-22 15:45:30 · 331 阅读 · 0 评论 -
react class组件对组件传入props属性限制和默认值
原创 2022-02-20 14:39:07 · 653 阅读 · 0 评论 -
function component 中使用ref
原创 2022-02-18 20:04:57 · 648 阅读 · 0 评论 -
addEventListerener的问题
btn. addEventListerener(“click”,fn, false)fn函数不需要加(),加了()就会一进去页面就执行事件,而且后面点击不会执行函数原创 2021-11-13 16:36:09 · 275 阅读 · 0 评论 -
insertAdjacentHTML()的使用
insertAdjacentHTML(位置,元素)的使用afterBegin:在元素的前面插入(在元素内)before End:在元素尾部插入(在元素内)before Begin:在元素前面插入(不在元素内)afterEnd:在元素尾部插入(不在元素内)原创 2021-11-13 16:21:51 · 99 阅读 · 0 评论 -
字符串 splice split slice的方法
字符串 splice()、split() 和slice()方法关注一、作用对象1、split()方法是对字符串的操作;splice()和slice()是对数组的操作。slice()也可用于字符串。二、参数1、split(separator,howmany) 参数有两个 sepatator为必选项,表示分割字符串的符号如“,”,“:”,”|“等。howmany为可选项,表示分割后返回的结果长度。2、splice(index,howmany,item1,item2,item…)参数至少两个,inde原创 2021-11-13 16:00:09 · 2248 阅读 · 0 评论