个人笔记/备忘录
个人笔记/备忘录
公孙元二
如果你看到这句话,幸运值+1
展开
-
vue .sync修饰符 - 个人笔记
如果想在子组件中修改父组件的props属性,一般这么做:子组件:props:{ title:{ type: String }},methods:{ changeTitle(){ // 当子组件想应用父组件的时候 this.$emit('update:title', '新标题') }}父组件:<document :title="title" @update-title="title = $event"></document>如果用上.sync可原创 2022-05-22 23:28:11 · 185 阅读 · 0 评论 -
什么是CDN?CDN能给我们带来什么?
为什么需要CDN?用户可能在全世界的任何一个角度,用户终端与服务器之间的物理距离越长,经过的网络节点越多,那么网络请求时间就会越长。甚至节点之间可能发生阻塞或者丢包等状况。比如打开一个页面超过3S,用户往往会选择关闭页面。如何解决远距离用户的网页卡顿?直接的思路自己部署多个服务器到世界各地,但是每个服务器网点都需要投入人力物力财力来维护。开销很大。根据有需求就有供应,有厂商就会专门做这块。这些厂商在世界各地搭建服务器为你服务,这些服务器形成了一个网络,叫做内容分发网络(CDN,content del原创 2022-05-15 17:31:56 · 507 阅读 · 0 评论 -
从输入URL到页面渲染的整个过程 - 个人笔记
1、首先是URL地址解析浏览器会判断输入的是一个合法的URL还是一个待搜索的关键词,并且根据输入的内容自动完成字符编码等操作2、接着发起真正的URL请求,如果浏览器本地缓存了这个url请求所需的资源,则会直接将数据转发给浏览器进程,如果没有缓存,则会查询DNS域名解析,首先查找浏览器有没有DNS缓存(比如之前有访问记录),如果有则返回IP。如果没有就寻找本地的host文件,看看有没有域名记录,如果有则返回IP,如果本地host文件没有则直接向本地DNS服务器请求,如果还是没有,继续向上DNS服务器请求,原创 2022-05-15 16:48:50 · 3932 阅读 · 1 评论 -
CSS - 类型、类和ID选择器 - 个人笔记
类型选择器类型选择器也叫元素选择器或标签名选择器,因为它在文档中选择了一个HTML标签/元素的缘故。在下面的示例中,我们已经用了span、em和strong选择器,<span>、<em>和<strong>元素的所有实例这样就都被样式化了。全局选择器全局选择器,是由一个星号(*)代指的,它选中了文档中的所有内容(或者是父元素中的所有内容,比如,它紧随在其他元素以及邻代运算符之后的时候)。下面的示例中,我们已经用全局选择器,移去了所有元素上的外边距。这就是说,和浏览器以原创 2022-05-15 13:01:09 · 730 阅读 · 0 评论 -
css - 选择器 - 个人笔记
什么是选择器?css选择器是css规则的一部分,它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当被选为应用规则中的CSS属性值的方式。选择器所选择的元素。叫做“选择器对象”。css中,选择器由于CSS选择器规范加以定义,就像是CSS其他部分那样,他们需要浏览器的支持才能工作。你会遇到大多数的选择器规范都是在CSS3中定义的。这是一个成熟的规范,因此大多数浏览器对这些选择器都有良好的支持。选择器列表如果你有多个相同使用相同样式的CSS选择器,那么这些单独的选择器可以混编为选择器列表,这样规则原创 2022-05-15 12:21:24 · 226 阅读 · 0 评论 -
css - 层叠 - 个人学习笔记
理解层叠有三个因素需要考虑,根据重要性排序如下,前面的更重要:1.重要程度2.优先级3.资源顺序1、资源顺序如果给某个页面元素设置多个样式,这些样式如果权重相同,那么写在后面的样式会在元素上生效。2、优先级有些规则写在后面没有生效,写在前面却生效了,这是因为前面的这些规则限定范围更小,浏览器就把它作为浏览器的样式,或者说浏览器认为他们是优先级更高的。例如类选择的权重大于元素选择器,例如在<style></style>里给界面元素先设定.box { color:原创 2022-05-14 22:30:42 · 173 阅读 · 0 评论 -
vue项目使用腾讯地图 自定义标注marker图标没效果(不显示)
毫无疑问是你的路径问题,因为你把<script>引入到index.html所以相对路径变成根目录下了。不信把png放到跟目录下,然后就可以引用显示,但是不推荐把png放到项目跟目录下。一般png是放在assets文件夹里面。如果想引用assets文件夹下的图标,应该这么写(也就是使用require): data() { return { markerUrl: require("@/assets/images/marker.png"),调用: this.m原创 2022-01-26 10:19:14 · 4101 阅读 · 2 评论 -
ElementUI el-table多选框改为单选框的解决办法/插槽使用radio
需求:表格能够单击数据行进行勾选且是单选的效果。尝试了将type="selection"改成单选效果,但是还要把全选按钮隐藏掉。很麻烦!所以觉得比较好的解决方案是在插槽里使用el-radio代码: <el-dialog title="历史记录查询" :visible.sync="historyDialog" width="800px" append-to-body> <el-button type="primary" plain size="mini" style原创 2022-01-07 10:45:02 · 3451 阅读 · 1 评论 -
egg.js实现接口的增删改查
service/student.js'use strict';const Service = require('egg').Service;class studentService extends Service { // 添加数据库 async addStudent(params) { try { const { app } = this; const res = await app.mysql.insert('student', params);原创 2022-01-05 22:56:26 · 759 阅读 · 0 评论 -
egg.js过滤页面传过来的参数 过滤去除对象的空字符串属性
假设拿到的参数对象叫params for (const propName in params) { if (params[propName] === null || params[propName] === undefined || params[propName] === '') { delete params[propName]; } } const res = await app.mysql.select('exa原创 2022-01-05 22:53:11 · 629 阅读 · 0 评论 -
vue 解决界面不渲染问题/下一次操作才渲染上一次操作的最新数据
提示:首先确认数据是没问题的,此时如果是界面没有实施渲染,特别是等到用户下一次操作才渲染。以下的解决方案才有效果出现问题的原因:我使用了el-table,v-for渲染表单的控件,该表单中有两个下拉框,当A下拉框改变selected值时,B下拉框要去请求接口,更新下拉选项。此时把最新的下拉选项更新上去,但是我发现数据请求到了,赋值上去,但是下拉不会显示最新的,要等到再次改变A下拉框的seleted值时,B下拉框的下拉选项才显示上一次请求到的数据。解决方案this.$forceUpdate();原创 2021-12-16 13:54:03 · 10217 阅读 · 2 评论 -
vue/JS实现输入框失焦
<input type="text" placeholder="" v-model="" @click="openBlur"/>methods:{ openBlur(){ document.activeElement.blur(); // 输入框去除光标/屏蔽移动端默认键盘弹出; },原创 2021-12-15 09:07:10 · 1713 阅读 · 0 评论 -
前端开发中这些小技巧
浏览器变成文本编辑器地址栏输入:data:text/html, <html contenteditable>利用a标签自动解析URLvar a = document.createElement('a');a.href = 'https://www.maomin.club';console.log(a.host); // www.maomin.club页面拥有ID的元素会创建全局变量<!DOCTYPE html><html><head>转载 2021-12-08 09:26:25 · 199 阅读 · 0 评论 -
git reset 加不加 --hard的区别
我们先add,不进行commit操作,add后,我们执行 git reset --hard HEAD,如图:然后我们执行git status查看状态,如图:注意,这里和没有–hard是有区别的!,有了参数–hard,直接把工作区的内容也修改了,不加–hard的时候只是操作了暂存区,不影响工作区的,–hard一步到位,不加–hard需要分开执行,两步操作。看上去加了–hard方便好多,但是我不建议大家使用这个!!!,因为这个杀伤力有点强。万一手残删掉了一些自己不想删的就没有后悔药了。所以慎用吧!!!转载 2021-10-27 11:34:00 · 360 阅读 · 0 评论 -
git reset HEAD和git reset HEAD^的区别
通常我们提交代码一般都是 git add ,git commit -m, git push的这么个流程。添加到暂存区,提交到git库生成版本号,push到远程仓库以供他人可以使用。这是一个完整的且非常顺利的流程。但是往往实际开发中并不是这么顺利,总会出现这样或那样的问题。git reset就是当我们提交了错误的内容后进行回退使用的命令。git reset 版本号,就是回退到该版本号上。通常我们使用git reset HEAD就是回退到当前版本。git reset HEAD^回退到上一版本如我们转载 2021-10-27 11:31:41 · 8028 阅读 · 1 评论 -
前端监控系统之代码运行错误类型及相应的处理方式
常见JS执行错误SyntaxError:语法错误,解析时发生语法错误// 在控制台运行// 一般语法错误const xx,// 特殊语法错误JSON.parse('');SyntaxError在构建阶段,甚至本地开发阶段就会被发现;而特殊语法错误可以被所有错误捕获方式捕获。TypeError:类型错误,值不是所期待的类型// 控制台运行 const person = undefined;person.name;ReferenceError:引用错误,引用未声明的变量/转载 2021-10-11 15:00:38 · 1242 阅读 · 0 评论 -
vue3-setup的两个注意点
在vue2中父组件传属性给子组件子组件接收属性如果没有接收,则需要在$attrs里才能收到,缺点是没有对类型作限制,以及使用的时候名字比较长使用的时候名字比较长父组件在子组件里使用插槽打印插槽里的内容如果父组件使用了子组件2个插槽父组件在子组件使用具名插槽在vue3中setup的注意点setup生命周期在beforecreated之前setup可以拿到两个参数,props和context给子组件传2个属性打印contextcontext原创 2021-10-08 22:58:37 · 308 阅读 · 0 评论 -
element-ui表单仅对el-form表单的部分字段/某个字段进行验证
根据elementui文档,查询到validateField方法,可以给表单的某个字段添加校验对表单单个字段进行校验 data: { rules: { email: { required: true, message: '请输入邮箱', trigger: ['c.原创 2021-09-30 14:15:49 · 8305 阅读 · 0 评论 -
git push origin master和git push的区别
1、git push origin master 指定远程仓库名和分支名。2、git push 不指定远程仓库名和分支名。这个命令看起来好像比上面那个简单,但是却是“很模糊”的,很容易混淆!不特定指出“远程仓库名和分支名”,一般是使用默认配置,配置文件(.git/config)相关内容为:[branch "master"] remote = origin merge = refs/heads/master这等于告诉git 2件事:1,当你处于master branch, 默认的转载 2021-09-27 16:35:20 · 10615 阅读 · 0 评论 -
git错误 ! [rejected] master -> master (non-fast-forward)
问题描述执行: $ git pull origin master:master当要push代码到git时,出现提示: ! [rejected] master -> master (non-fast-forward) * [new branch] master -> origin/master分析问题我们可以这样理解这个问题就是:别人上传到远程仓库后,你没有及时的同步(、拉取)到本地,但是你同时又添加了一些内容(提交),以致于你在提交时,它会转载 2021-09-27 16:29:26 · 6059 阅读 · 0 评论 -
新创建的vue项目怎么与github(gitee)建立联系
本文以vue-cli搭建的项目上传github为例,演示如何利用vue-cli创建vue项目后,再创建github仓库,然后将vue项目与远程的github建立建立,最终本地项目文件可以通过git命令随时上传至github。gitee类似。1.创建一个vue3项目项目创建完毕,进入文件夹,看到此时已经有了git文件夹,我们需要新增远程git地址创建一个github仓库将默认分支从main改名为mater(某年某月以后github将默认分支名称master改为了main,但是我还习惯用mast原创 2021-09-27 11:22:28 · 899 阅读 · 0 评论 -
fatal: unable to access ‘https://github.com/username/xx.git/‘: OpenSSL SSL_read: Connection was
造成这个错误一般是网络不稳定,连接超时导致的,如果再次尝试后依然报错,可以执行下面的命令。打开Git命令页面,执行git命令脚本:修改设置,解除ssl验证git config --global http.sslVerify "false"此时,再执行git操作即可。...原创 2021-09-26 15:12:58 · 1935 阅读 · 0 评论 -
remote: Support for password authentication was removed on August 13, 2021. Please use a personal ac
一、 问题描述访问了全球最大的同性交友网站,又刚好去更新提交代码,又或你创建了一个新的仓库送给自己,又刚好想把这个仓库送给(push)github,你就刚好会遇到这个问题:remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.大概意思就是你原先的密码凭证从2021年8月13日开始就不能用了,必须使用个人访问令牌(per转载 2021-09-26 15:04:16 · 5530 阅读 · 0 评论 -
vue3响应式原理-reflect
proxy负责对某个数据进行增删改查的监听,不过vue3底层不是直接对target进行如下的简单操作。而是利用es6的window.reflect利用reflect取一个对象的属性利用reflect修改对象属性利用reflect删除对象的某个属性object上的一些属性,reflect也有比如给object定义相同属性名,会导致代码单线程卡住,阻塞下面代码运行如果是使用reflectdeflect会返回执行的结果好处是,通过返回值就会知道成功还是失败。对于vue3而言,原创 2021-09-23 22:47:10 · 5019 阅读 · 4 评论 -
利用github.io(githubPages)免费托管个人静态网站/个人博客
我们的个人博客或者静态网站可以托管到github就能通过github域名访问(免费,省事),当然也可以使用自定义的域名解析(花钱,高大上)。git仓库配置我采用的是自己编写一个html文件+ githubPages搭建,首先需要在GitHub上创建Github Pages服务,具体步骤如下图:点击之后仓库名一定要填 用户名.github.io 的格式(形如zhangzheyi1.github.io),不要填 用户名 的格式(形如zhangzheyi1),这里踩了好几次坑了,浪费了不少事件,因为现在我转载 2021-09-23 10:10:09 · 6783 阅读 · 1 评论 -
vue 子组件/父组件的生命周期只被执行一次的问题及再次进入页面静态数据不会初始化的问题
1.试试activated的生命周期,如果每次进入页面都会触发该生命周期而不会触发其他生命周期,则说明使用了keep-alive<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="ke原创 2021-09-22 15:32:18 · 2661 阅读 · 1 评论 -
vue2.x mixin学习笔记
一、mixin是什么Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂Vue中的mixin先来看一下官方定义mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、methods、created、computed等等我们只要将原创 2021-09-22 11:19:42 · 314 阅读 · 0 评论 -
vue+elementui项目后端分页,分页页码参数从0开始如何处理 - 个人笔记
初始时size设置为1,因为el-pagination是从1开始,如果从0开始,el-pagination会显示不正常 data() { return { searchForm: { page: 1, size: 10 },el-table的序号显示,因为page从1开始所以减去1 <el-table-column type="index" label="序号" align="center" :index="(index) =&原创 2021-09-09 11:29:30 · 1360 阅读 · 0 评论 -
vue的object.defineproperty及数据代理的概念
![](https://img-blog.csdnimg.cn/6a330348fc49413e935f923c45640c8b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YWs5a2Z5YWD5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)原创 2021-09-02 23:00:47 · 137 阅读 · 0 评论 -
JS避免内存泄漏 - 笔记
为什么要避免什么是内存泄漏呢?就是有些理应被回收的垃圾,却没被回收,这就造成了垃圾越积越多。内存泄漏,听起来很遥远,但其实离我们很近很近,我们平时都直接或者间接地去接触过它。例如,有时候你的页面,用着用着就卡了起来,而且随着时间的延长,越来越卡,那这个时候,就要考虑是否是内存泄漏问题了,内存泄漏是影响用户体验的重大问题,所以平时通过正确的代码习惯去避免它,是非常有必要的。如何监控内存状况咱们一直强调内存内存,但是感觉他是很虚无缥缈的东西,至少也得让咱们见见它的真面目吧?浏览器任务管理器打开方式:转载 2021-09-02 17:39:29 · 234 阅读 · 0 评论 -
vue+el-table实现鼠标滚动加载接口大量数据
<el-table ref="xxTable" :data="viewZoneData" > <el-table-column type="index" label="序号" width="50" align="center" /> </el-table-column> </el-table> ...原创 2021-06-18 09:00:07 · 685 阅读 · 3 评论 -
前端vue+axios实现关闭/刷新页面前向后台接口发送请求
created() { window.addEventListener('beforeunload', e => { this.updateHandler(e) }) } destroyed() { window.removeEventListener('beforeunload', e => { this.updateHandler(e) }) }, beforeDestroy() { this.canc..原创 2021-06-17 18:07:13 · 4178 阅读 · 2 评论 -
CSS-文档流
文档流在 CSS 的世界中,会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示,而每行又可能由多列组成,所以从视觉上看起来就是从上到下从左到右,而这就是 CSS 中的流式布局,又叫文档流。文档流就像水一样,能够自适应所在的容器,一般它有如下几个特性:块级元素默认会占满整行,所以多个块级盒子之间是从上到下排列的;内联元素默认会在一行里一列一列的排布,当一行放不下的时候,会自动切换到下一行继续按照列排布;如何脱离文档流呢?脱流文档流指节点脱流正常文档流后,在正原创 2021-06-16 15:45:08 · 302 阅读 · 0 评论 -
ES6高阶函数-个人笔记
filter过滤函数const nums = [2,3,5,1,77,55,100,200]//要求获取nums中大于50的数//回调函数会遍历nums中每一个数,传入回调函数,在回调函数中写判断逻辑,返回true则会被数组接收,false会被拒绝let newNums = nums.filter(function (num) { if(num > 50){ return true; } return false; }) //可以使用箭头函数简写// let new原创 2021-06-04 11:13:45 · 170 阅读 · 0 评论 -
前端vue通用文件导出(axios)
function download(url, params, method = 'GET') { return new Promise((resolve, reject) => { downloadRequest(url, params, method).then(response => { if (response.data.type === 'application/octet-stream') { const fileName = response.原创 2021-06-04 09:22:10 · 306 阅读 · 0 评论 -
webpack优化实践-个人笔记
抽象语法树使用speed-measure-webpack-plugin插件,查看各个打包部分耗时:一,缩短解析时间优化的方法两种方法:方法二导入后,就可以在webapck.base.js文件中对比较耗时的部分使用thread-loader,比如html、js、css的部分。优化的第三种方法:使用缓存,使得二次打包的时候速度可以加快。(比如第二次打包与第一次打包相比,只有少部分文件存在修改,那么没有修改的部分使用缓存即可)在thread-loader和cache-loader一起使用的.原创 2021-05-31 00:45:00 · 603 阅读 · 1 评论 -
移动端开发笔记
监听屏幕旋转你还在使用JS判断横屏竖屏调整样式吗?那就真的Out了。/* 竖屏 */@media all and (orientation: portrait) { /* 自定义样式 */}/* 横屏 */@media all and (orientation: landscape) { /* 自定义样式 */}...转载 2021-05-06 10:19:58 · 183 阅读 · 0 评论 -
微信小程序云开发 操作数据库-加入触底自动加载数据的支持
在全局配置文件app.json或者局部配置文件xxx.json开启触底(上拉事件)监听事件在某个调用页面监听上拉刷新行为:案例:为了让已经加载过的数据,不需要再返回了,使用skip方法:声明一个page变量:...原创 2021-04-25 01:11:51 · 305 阅读 · 1 评论 -
微信小程序云开发 操作数据库-简单数据的查询
查询数据(方式1,小程序的API)const db = cloud.database( )const products = db.collection( 'products' )products.get( ).then( res => {})查询数据(方式2,服务端API)const db = cloud.database( )return await db.collection( 'products ' ).get( ).then( res => {return xxx}原创 2021-04-25 00:45:47 · 2716 阅读 · 0 评论 -
微信小程序云开发 操作数据库-新增一条数据
创建一个数据:查询文档,我们可以知道需要进行数据库初始化:新增一条数据(方式1):const db = cloud.database( )const products = db.collection( 'products')products.add ( {data:{xxx:xx}}).then( res => {})新增一条数据(方式2,服务端API)const db = cloud.database()return await db.collection('produ原创 2021-04-25 00:29:28 · 1616 阅读 · 0 评论