- 博客(47)
- 收藏
- 关注
RSS订阅原创 react学习随笔
… 拓展运算符，合并数组或对象，返回新的数组，原数据不变 如果合并对象，键相同的情况，会覆盖老的值。跟键值对一个概念生命周期旧版生命周期（react17之前）初始化 设置 props and state挂载阶段 componentWillMount render componentDidMount修改阶段 修改 props and states ==> props: componentsWillReceiveProps -- shouldComponentUpdat.
2022-11-19 16:42:34
615
原创 css高级篇 (布局：静态、流式、弹性、自适应、响应式)
宽度变化，进行缩放，样式整体不会有啥变化。缩放之后，要刷新页面才会进行重新布局。（多套代码，分别都是弹性布局或者固定布局，所以地址可能也有变化）宽度变化，一行可能变两行以上，样式也会发生变化。缩放的同时，直接进行换行等，很丝滑。宽高使用百分比，放大缩小。缺点：字体没法百分比调整，宽度太小字体等排版会混乱。缺点：随着现在屏幕大小的不同化，屏幕太大留白就很多。，缩小之后，左侧菜单直接收成标签，再缩小，变成横着的菜单。根据根元素字体大小变化，进行缩放。，可以看出刷新前一直是4个，刷新后是两个。..........
2022-08-09 17:13:40
317
原创 vscode 快捷键
1、多行注释 alt+shift+a2、移动行 alt+up/down3、行缩进 ctrl+[ /ctrl+]4、字体放大缩小 ctrl加 /ctrl减5、关闭所有窗口 ctrl + k + w6、全局查找文件 ctrl + p7、折叠代码 ctrl + k + 3-9 (根据数据层级分层折叠)8、展开代码 ctrl + k + j...
2022-02-28 12:00:17
371
原创 vue的 $ 相关 api 配置
vue api 配置$ref$el$listeners$attrs$slots$parent$set$delete$refvue组件实例：啥都有，包括data数据、methods等$el当前节点信息：与document获取节点一样this.$refs.xxx.$el 等于document.getElmentById('xxx')$listeners父组件给子组件传递的方法：子组件批量接收并使用：可用来封装elment为高阶组件父组件：<MyTable @pagination-si
2022-01-11 15:55:59
582
原创 data params content-type formdata 请求注意点笔记
axios({ method: "get", url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac", params: { info: "西安天气" }, })params参数放在请求url中，一般用于get请求data参数放在请求body中，一般用于post请求...
2021-12-01 09:17:53
276
原创 ＞＞＞和/deep/和::v-deep
>>> 没有用预编译如sass、less可以使用/deep/ vue低版本使用（高版本不兼容会报错）::v-deep vue都能使用
2021-11-22 20:36:59
335
原创 elementui loading自定义图片
::v-deep .el-loading-spinner { background: url(./pengyuyan.jpg) no-repeat; background-size: 28px 28px; width: 100%; height: 100%; position: relative; margin-top: 0; top: 50%; left: 50%; transform: translateY(-14px); transform: translate
2021-11-17 23:06:18
459
原创 vue-cli3使用sass全局变量（less同理）
vue-cli2 与vue-cli3vue-cli2 构建的项目有build文件夹来重头配置webpack（需要配置loader等）vue-cli3 构建的项目没有build文件夹，webpack基本配置好了，只需要添加vue.config.js根据需要更改配置文件vue-cli3使用sass全局变量在vue.config.js中注释：~@/这里默认代表 src下的相对目录module.exports = { css: { loaderOptions: { sass: {
2021-10-20 13:24:50
394
原创 a标签平滑滚动加偏移
平滑滚动给标签加上点击事件<a @click="changePos('one')" class="first">纸品</a>changePos(id) { document.getElementById(id).scrollIntoView({ behavior: "smooth", //smooth平滑 block: "start" //start end 初始位置，结束位置 })}偏移给需要的锚点加上一.
2021-09-14 11:14:29
232
原创 vue组件通信
常用组件通信props跟$emit（只能用于父子组件）provide 跟 inject（祖先等有层级组件）$emit 跟 $on（非父子任意组件）ref 和 $refs其他方式props跟$emit（只能用于父子组件）props：父组件向子组件传递信息父组件中：引用子组件。然后在其引用的子组件中绑定传递信息<template> <div> <Son :myprop="mypropdata"></Son> </div>&
2021-09-11 11:56:30
92
原创 js注意事项4（同步、异步）
为什么要有同步异步？JS是单线程的。即一件事情完成后，才能做后续的事情。期间不能进行任何操作同步：顺序执行。异步：同步全部执行完了再执行。异步又分为：宏任务，微任务为什么要分同步异步？因为JS是单线程的，一个一个依次执行。举个例子：发请求，网速慢的情况，肯定半天都卡死在这，所以ajax发请求被归为异步。即等那些稳定的同步操作都快速执行完了，再来执行async await 与 Promise 的作用？ 都是优化异步的，作用一样，写法不同。就是因为异步不稳定，怕异步卡住了，所以我们日常代码中发起异
2021-07-21 15:35:14
142
原创 js注意事项1（数据类型、内存、深浅拷贝、闭包、this指向、callapplybind方法）
js注意事项基本类型和引用类型堆 栈内存深拷贝和浅拷贝原型和原型链闭包this指向call apply bind基本类型和引用类型6大基本类型：number、string、boolean、null、undefined、symbol------在内存中占据空间小、大小固定。存在栈中，按值访问。引用类型：对象、数组、函数 等（除了基本类型都是引用类型）-------在内存中空间大、大小不固定，因为数据量可能很多。存在堆中，按引用访问。堆 栈内存js中，内存分为 堆 、栈（ps：所有编程语言内存分配都差
2021-07-21 14:44:07
96
原创 js注意事项2（原型原型链、Object相关）
原型原型链、Object相关原型原型链什么是原型？ prototype什么是原型对象（构造函数、原型属性或方法、__proto__）什么是原型链？prototype和__proto__的区别？constructor与上面两个有什么联系查看Object属性方法instanceof判断实例是否属于函数（或者说判断实例是否出现在函数的原型链任意位置）hasOwnProperty判断构造函数是否有此本地属性（或者说Person构造函数中是否定义此字段）原型原型链什么是原型？ prototypejs中，一切皆对
2021-07-21 14:42:39
165
原创 js注意事项3（继承）
js继承原型链继承构造函数继承组合继承es6的class继承原型链继承缺点：引用类型共享。（每个子实例对基本类型进行操作互相没有影响。但是每个子实例对引用类型进行操作，会同步操作其他子实例的引用类型）//父类function Person() {}//子类function Student() {}//原型链继承(Student的原型对象属于Person实例)Student.prototype = new Person(); //父类 function Person(name,age){
2021-07-21 14:38:36
132
原创 js注意事项5（数组去重）
js数组去重一、filter去重二、es6的set集合去重一、filter去重let arr = [1, 2, 1, 3, '1', '2', 2];let newarr = arr.filter((item, index) => { return arr.indexOf(item) == index;})console.log(newarr)//结果：[1, 2, 3, "1", "2"]二、es6的set集合去重原由：set会自动去重，注意set是伪数组，需要用Array.fr
2021-06-01 11:08:39
81
原创 vue上传图片文件
vue上传图片文件最开始百度到各种加headers，最后发现没什么用，有大兄弟知道的可以告知一下哦，记个随笔原始input标签form表单上传用elementui自带的el-upload上传elementui实现一次性上传多张图片最开始百度到各种加headers，最后发现没什么用，有大兄弟知道的可以告知一下哦，记个随笔原始input标签form表单上传<input type="file" @change="onchangemd">methods: { onchangemd(e){
2021-05-10 23:17:59
9008
26
原创 阻止浏览器双击选中文本、鼠标禁用样式
css加给任意需要的标签都行span{ -moz-user-select:none; /*火狐浏览器*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*ie浏览器*/ user-select:none; /*其他浏览器*/}
2021-03-25 21:35:31
178
2
原创 服务端渲染ssr
服务端渲染方式一：纯前端渲染。即通过webpack的devServer。虽然代码确实在服务器运行，但是只能用于开发环境。（通过js加载vue文件，最后渲染到页面上。wepack打包js文件有加载时间）方式二：服务端渲染。通过webpack的server，在node...
2021-03-17 23:08:10
104
1
原创 computed和watch
computed用于计算属性:computed:{name:{get(){ 获取计算后的值return this.firstname +""+ this.lastname}set(name){ 设置为计算后的值return xxx}}}一般用于获取，数据进行计算后的值。最好不要设置容易报错。好处:响应式，即数据改变，页面不会重新渲染，但依旧更新watch用于监听数据改变:watch:{firstname:{handler(newvalue,oldval
2021-03-17 22:48:28
67
原创 vue API 2.x重点笔记
vueAPI常用点笔记全局配置全局apivue组件的配置vue实例指令特殊属性内置组件全局配置Vue.config.silent 取消 Vue 所有的日志与警告。没必要动他 Vue.config.optionMergeStrategiesVue.config.devtools 是否允许vue调试工具devtools的使用。开发默认true、生产环境默认设置falseVue.config.errorHandler Vue.config.wa
2021-02-25 22:32:53
91
原创 git常用使用
一般流程先安装好git、怎么安装这里就不多说了在git上面新建一个新项目、比如命名为mallmanage2. 将代码克隆到本地，此时本地会多一个文件夹mallmanage克隆命令：在vscode中想要要存放git代码的目录位置git clone 你的SSH的地址 进入mallmanage目录，将需要上传的文件复制进去，不用命令直接复制粘贴在mallmanage目录下，提交代码git add . . 代表当前目录下全部文件；也可指定具体文件（将
2021-02-25 13:08:15
102
1
原创 vue-cli与webpack(实现todolist)
vue-cli：基于webpack搭建的脚手架不用vue-cli脚手架，利用webpack纯手工搭建vue-clivue的jsx写法和postcss不用vue-cli脚手架，利用webpack纯手工搭建vue-cli初始化项目，安装依赖初始化项目，生成package.json文件： npm init -y安装依赖：npm i webpack vue vue-loader 警告：vue-loader@15.9.6 requires a peer of css-loader@* but non
2021-02-20 17:26:25
132
原创 vue使用地图api
vue使用地图api百度地图api方式一方式二解析文档高德地图api百度地图api方式一注册账号密码，拿到ak将html的demo改造成vue格式BMapGL of undefined报错：vue中需要用window.xxx来处理 var map = new BMapGL.Map("baidumap"); // 创建Map实例 var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 以上改为----》 var map =
2021-02-18 20:35:52
322
原创 vue使用sass
安装 sass-loader 和 node-sassnpm i sass-loader node-sass -S-Dvue文件中使用sass，注意lang是 scss<style lang="scss" scoped>报错。错误原因：默认安装最新的。解决方法：删除之前的，安装低版本，最后重启项目刷新一下npm uninstall sass-loader node-sassnpm i sass-loader@7.3.1 node-sass@4.14.1 -S-D.
2021-02-05 21:27:50
67
原创 nodejs随笔
nodejsnodejs安装nodejs常用命令commonjs规范nodejs安装nodejs：即让js放在服务器执行 1、模拟数据 2、前段工具都是基于nodejs（less、sass、webpack、vue-cli）安装查看是否好了：node -v 配置环境变量--的系统变量--path--配置需要全局应用的软件bin路径 --区别：不配需要每次在软件.exe 路径下cmd执行命令。配置之后 随便
2020-10-23 17:58:49
128
原创 ajax随笔
ajaxajax四部曲ajax封装方法ajax位于服务器环境运行（利用koa框架）ajax跨域ajax四部曲新建对象open配置请求参数send发送请求事件监听 //ajax执行环境必须是在服务器环境下 //新建ajax对象 var http = new XMLHttpRequest(); // POST/GET // 接口地址 // 异步 http.open("GET", "http://lo
2020-10-23 16:48:37
69
原创 js模块（es6）
es6es6与es区别新增字符串方法新增数组方法展开运算符 ...箭头函数结构赋值Map类Set类回调地狱Promise优化异步Promise信息传递Promise链式调用Promise其他方法async、awaites6与es区别作用域语法其他es以函数为作用域var有预解析：声明前置、可以重复声明变量es6以{ }为作用域let、const(声明常量)没有预解析：不会前置、不能重复声明变量新增字符串方法模板字符串：支持字符串换行 用 ·· 符号
2020-10-23 15:33:28
153
原创 Object常用方法、原型链、面向对象随笔
面向对象面向对象常用方法原型和原型链es6构造函数es6静态属性和方法面向对象常用方法Object.assign() 1个值拷贝，两个值改变第一项合并，三个值以上改变第一项合并，可以用空对象代替第一项Object.defineProperty() 设置对象属性。值1为对象名，值2为对象属性，值3为设置属性 configurable:false 不能删除属性 ，true可以删除属性(默认false) enumerable:false 为不能枚举，true为可枚举
2020-10-23 13:20:31
229
1
原创 js模块（常用事件、事件监听器）
事件相关常用事件1事件监听器常用事件2事件监听器与事件的区别事件监听中事件执行顺序事件代理e的使用组合键使用常用事件1在事件中，事件需要加上 on 关键字 .onclick 点击事件 .onomuseover 鼠标移入事件 .onchange 改变事件(表单标签，选中状态切换的触发) .onmouseout 鼠标移出时间 .onload 加载事件 .onreadystatec
2020-10-23 00:26:22
401
原创 js模块（es+dom+bom）
js模块JS基础定时器js函数获取节点DOMBOMJS基础定时器setTimeout(函数,时间) ：延迟定时器—设置函数延迟时间setInterval（函数，时间） ：间隔定时器—间隔一定时间调用一次函数clearTimeOut(定时器名称) :清除延迟定时器clearInterval(定时器名称) ：清除间隔定时器定时器可以互相嵌套延时定时器最小时间为4ms，间隔定时器最小时间为16.7ms间隔定时器：使用时，记得清除上一次定时器。因为会叠加动画针与定时器的区别：动画帧
2020-10-22 23:04:11
888
2
原创 布局（flex布局）
flex布局flex布局与grid布局的区别flexflex布局与grid布局的区别grid适用于大型布局，flex适用于小型布局flex
2020-10-22 13:14:36
188
原创 bootstrap基础点
bootstrapbootstrap使用bootstrap响应式栅格系统bootstrap组件bootstrap使用在bootcss.com中下载bootstrap包引入bootstrap.css文件涉及js的需要再引入bootstrap.js文件使用直接引入类名bootstrap响应式栅格系统栅格系统：一行分为12列contain类：容器，有宽度，并且会自动伸缩row类：一行.col- 针对所有设备.col-sm- 平板 - 屏幕宽度等于或大于
2020-10-21 22:59:37
151
原创 css布局（grid布局）
grid布局grid创建单元格单元格合并单元格对齐方式grid创建单元格grid-template-rows --------- 分行grid-template-columns ---- 分列关键词 repeat 重复关键词 1fr 一份关键词 auto-fill 等分grid-template-columns: 60px 60px 60px 60px 60px 60px 60px; /* 分列 七列：每列都是60px*/grid-template-columns: r
2020-10-21 17:38:58
565
原创 踩坑
各种细节伪类与伪元素的区别@import与导入css的区别伪类与伪元素的区别伪类：选择dom上有的元素。只有一个：伪元素：选择dom树没有的内容。css3开始以：：开头。css1、css2可以使用一个：，容易与伪类混淆@import与导入css的区别这里是引用...
2020-10-21 16:34:55
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人