- 博客(71)
- 收藏
- 关注
RSS订阅原创 PC实现全屏预览
补充一下其中flex:1即为flex-grow:1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。调用 document.body.classList.remove(‘fullscreen’)，从 body 元素中移除 fullscreen 类名，表示退出全屏模式。调用 document.body.classList.add(‘fullscreen’)，向 body 元素添加 fullscreen 类名，表示进入全屏模式。
2024-11-01 09:50:41
179
原创 uni.navigateTo传参及接收
在目标页面接收的时候在OnLoad生命周期中接收，这需要注意的是一般onload会在created初始化完数据。所以调接口本来是在created里调的，但因为onload慢一点，数据还没有传过来，so写在onload里面了。
2024-03-05 09:51:55
1864
原创 关于父子传值
如果在子组件中需要修改父组件传来的值，是不支持直接修改滴，要么不修改，要么在data中重新定义一个值，然后再新的名字中修改，包括样式，包括具体内容。
2024-02-28 15:42:19
410
原创 梳理下最近写的东西，涉及到父子组件之间传值和调用方法
最后，点击卡片查询又该怎么做呢，表格循环的数组不是现成的。最终的想法是，点击卡片，获取到卡片上会议室的id，然后把id传给子组件（父传值给子），子组件再把id传回接口（见上图），获取到对应的信息做展示。大前提是：下面的表格是子组件，并且子组件和父组件中卡片信息调用的是同一个接口，循环数组为给接口传值后获取到的，而不是直接现成的数组。
2023-08-08 14:20:41
166
原创 获取后台时间与当前系统时间作比较
但有一点很奇怪是在这里如果用.then把想要的时间字符串拿到，在下面引用的时候依然还是一个promise对象，所以干脆这里就先不.then，先拿到数据，在created里再说。接下来获取当前时间，前面定义了nowTime，拿到的nowTime就是想要的格式数据，本来还想后台获取的字符串和时间要怎么比较，查了一下发现可以直接用大于小于号比，省事了。我想要的只有图上框框里的那条数据，于是查了下可以用.then，like下图注释掉的部分。本来一个不复杂的事，但发现从后台拿来的是一个promise对象。
2023-06-09 10:50:19
266
原创 关于一行内按钮数量随屏幕宽度改变适配，剩余隐藏在抽屉展开
有一点要说明下，我有两个组件都需要适配，然后如果两个组件都用watch监听的话会不生效，于是另一个用了addEventListener（）不再需要watch。大致思路为：首先监听屏幕宽度实时变化，用屏幕宽度减去固定边框类样式，除以每个按钮宽度然后向上取整得到的即为屏幕上要展示的按钮个数。要说的一点是关于按钮宽度，因为文字长度不同，按钮宽度也不同，其实最好是能获取到每个按钮的宽度，但这个目前不是很会，下去研究下。dataNum可定义可不定义。
2023-05-09 15:48:28
166
原创 ant组件用到本地图片需要加require
遇到使用组件是只支持网络链接不支持本地图片时，可以试试require。以上src=“ ”变为：src=“require（‘’）”
2023-04-07 09:48:23
580
原创 数组去重方法
双循环去重——双重for（或while）循环是比较笨拙的方法，它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，那么将会非常耗费内存indexOf方法去重1——数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在re.
2021-12-03 17:00:50
123
原创 数组和链表对比
数组是我们平时用的最多的数据结构，是有序的元素序列。它的特点是查询数据快，插入数据慢；内存分配是连续的内存，扩容需要重新分配内存。数组之间是通过下标维护的，支持随机查找，查询的时间复杂度是O(1)；插入和删除的时间复杂度是O(n)：插入最好的情况是在数组最后加一阶，那么直接将数组长度+1,时间复杂度是O(1)；删除最好的情况删除最后一个元素不用移动数组，时间复杂度O(1)。数组如果申请的空间长度不够，扩展的时候会重新申请一段连续的内存空间不利于扩展。链表平时用的比较少，是一种物理存储单元上非连续、
2021-11-17 15:06:50
383
原创 对比vue和react
相似之处都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库；都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板；都使用了Virtual DOM （虚拟DOM）提高重绘性能；都有props的概念，允许组件间的数据传递；都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性。不同之处1）数据流Vue默认支持数据双向绑定，而React一直提倡单向数据流2）虚拟DOMVue2.x开始引入"Virtual DOM"，消除了和React在这方面的差异，但是在具
2021-11-15 17:13:37
466
原创 v-if和v-for能同时用吗？解决方案
v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。解决：1.如果条件在循环外部可以在外层嵌套一层template（页面不生成dom节点）、在外层v-if判断、然后在进行使用v-for循环；2.如果条件出现在循环内部、可以通过计算属性computed提前过滤掉那些不需要展示的数据...
2021-11-13 11:04:32
586
原创 webpack怎么打包vue文件
1.初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果；2.开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件 监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译；3.确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去；4.编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依
2021-11-09 08:57:23
350
原创 跨域是啥子
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。（所谓同源指的是：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。）非同源限制：1.无法读取非同源网页的 Cookie、LocalStorage 和IndexedDB2.无法接触非同源网页的 DOM3.无法向非同源地址发送 AJAX 请求...
2021-11-09 08:53:19
79
原创 vue 双向绑定原理及依赖搜集的过程
双向数据绑定机制：官方：vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发响应的监听回调。第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile解析模板令，将模板中的变量替换成数据.然后初始化渲染页面视图，并将每个令对
2021-11-05 11:59:57
572
原创 Promise.all/race 的作用及使用场景
Promise.all用于将多个Promise实例，包装成一个新的Promise实例。它接受一个数组作为参数。数组可以是Promise对象，也可以是其它值，只有Promise会等待状态改变。当所有的子Promise都按顺序执行完，该Promise完成，返回值是全部值的数组；如果有任何一个失败，该Promise失败，返回值是第一个失败的子Promise的结果。比如开发中有个组件需要多个请求完成之后再进行渲染，这时候用promise.all就非常nice了Pomise.race类似于Promise.
2021-11-02 15:27:56
1120
原创 关于BFC
名为 “块级格式化上下文”。本质就是一个封闭的盒子,是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。特性：1）内部元素在垂直方向上一个接一个放置2）垂直方向上的外间距由margin值决定，属于同一个BFC区域的相邻的元素margin值会重叠3）每个元素的左外间距与包含块的左边界相接触，浮动元素也是如此4）BFC区域不会与浮动元素区域重叠5）计算BFC高度时，浮动元素也会参与计算6）BFC是页面上一个独立的渲染区域，容器中子元素不会影响到外面的元素，反之亦然触发BFC
2021-11-02 10:01:48
88
原创 浏览器的渲染过程
1.首先解析收到的HTML文档，根据文档定义构建一棵 DOM 树。（DOM 树是由 DOM 元素及属性节点组成的。）2.CSS按照CSS 规则和CSS解释器解析转成CSSOM规则树。3.根据 DOM 树和 CSSOM 规则树构建render渲染树。（渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形
2021-10-28 11:48:10
93
原创 linux常规使用
目录结构1)root : 该目录为系统管理员目录，root是具有超级权限的用户。2)bin ->usr/bin : 存放系统预装的可执行程序，这里存放的可执行文件可以在系统的任何目录下执行。3)usr是linux的系统资源目录，里边存放的都是一些系统可执行文件或者系统以来的一些文件库。4)usr/local/bin：存放用户自己的可执行文件，同样这里存放的可执行文件可以在系统的任何目录下执行。5)lib->usr/lib: 这个目录存放着系统最基本的动态连接共享库，其作用类似于Wind
2021-10-28 10:35:27
204
原创 缓存机制匹配流程
1.浏览器发送请求前，根据请求头的expires和cache-control判断是否命中强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。2.没有命中强缓存规则，浏览器会发送请求，根据请求头的last-modified和etag判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。3.如果前两步都没有命中，则直接从服务端获取资源。强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。强制缓存的情况主要
2021-10-27 22:29:36
1457
原创 TCP三次握手四次挥手
三次握手第一次握手： 客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。第二次握手： 服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。第三次握手： 当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连
2021-10-26 20:04:12
2492
2
原创 从输入URL到页面加载中
用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL用户输入完内容，按下回车键，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得浏览器进程浏览器构建请求行信息，会通过进程间通信（IPC）将URL请求发送给网络进程GET /index.html HTTP1.1网络进程获取到URL，先去本地.
2021-10-25 14:32:46
116
原创 本地文件上传到阿里云生成网址
1.压缩文件至当前目录2.打开文件坐在目录的cmd3.scp ./文件名 root@端口号:/var/www/html传上去4.ssh root@xxx登录阿里云5.cd /var/www/html 进入目录6.可以ls查看确定已经上传，然后unzip 文件名.zip解压7.ls查看，此时已有解压文件8.cd进入再次确认网址名即可为：端口号/文件名/文件名/xxx.html...
2021-10-16 10:50:11
876
原创 vue day5+6
vue31) vue实例 let app = Vue.createApp() let vm = app.mount('#app');2) 生命周期钩子函数 beforeCreate vue对象的实例化，数据劫持（数据具有响应式） created vnode(虚拟节点) 模板编译 template/el --抽象语法树ast--> render() beforeMount vm.$el 【render函数产生的dom节点node】 mounte
2021-10-15 08:36:53
63
原创 vue day3+4
模块化(组件)vue中模块是最小组成单元组件定义vue参数的定义过程let briupList = {template:` {{}} `, data(){ return {}},methods:{}}组件注册 1) 全局注册 将组件注册到Vue上，所有组件均可用 Vue.component('briup-list',briupList) 2) 局部注册 将组件注册到某个组件内部，只有该组..
2021-10-13 11:04:13
63
原创 vue day1+2
1）Vue简介Vue2/3MVVMm model数据模型，data[数据state]v view视图，模板，template数据绑定事件绑定v-bind v-onvm viewmodel（封装dom）2）Vue实例一个模块是HTML/css/js的一个完整功能单元Vue实例代理了data中以及methods中变量的访问vm.状态data中声明的属性vm.方法methods中声明的方法根组件（模块） let options = { dat
2021-10-11 08:58:54
67
原创 修改this指向
call()、bind()、apply()的用法，改变this的指向，区别在于f.call(obj, arg1, arg2…),f.bind(obj, arg1, arg2,…)(),f.apply(obj, [arg1, arg2, .])1、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）2、call和apply都是函数对象的方法，需要通过函数对象来调用，在调用时可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this。不会产生新的函数，只是在调用时，绑定一下而已
2021-10-04 19:15:44
65
原创 width:auto 里的 width:100%
首先我知道，对于的width:auto：inline-block : 被内容撑开block : 充满父盒子后来在 width:auto 和 width:100% 一起使用时，我发现了一些有趣的问题，我随着我的发现把它们记录了下来[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmKO2cA9-1632813279106)(C:\Users\root\AppData\Roaming\Typora\typora-user-images\1.png)]&l
2021-09-28 15:15:04
159
原创 display
阶段一 最初只有两个基础盒子：块级盒子、内联盒子块级盒子(block-level box) 负责结构，可作用宽高，不与图文一行显示内联盒子(inline box) 负责内容，不作用宽高，与图文一行显示这时候，所有的"块级元素"只有一个"块级盒子"。阶段二 display:list-item因为list-item默认要显示项目符号，一个盒子解释不了。解决：为list-item重新命名一个盒子——附加盒子，学名标记盒子(marker box)用来存放圆点、数字这.
2021-09-25 16:33:52
67
原创 typescript
Typescript1. 为什么学面试需要, vue2(ES6) + vue3(Typescript)webpack - es6/ts -> Javascript React(ts) 2. Javascript超集 es5【标准】 < es6【标准】 < ts【社区】 ts = es6 + 强类型 3. 数据类型 es6是弱类型语言 (一个变量的数据类型取决于值，数据类型可以改变) let a = undefined;
2021-09-24 14:37:16
60
原创 2021-09-23
18) 面向对象 是ES5语法糖 1. 构造函数 function Animal(name,age){ this.name = name; this.age = age; } let animal = new Animal('terry',12); ------------------------------------- class Animal { constructor(name,age){ this.
2021-09-23 19:30:09
53
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人