西瓜坤坤坤坤-CSDN博客

原创前端知识点总结——Vue父子组件执行顺序 / dataset

Vue 父子组件执行顺序由外而内，再由内而外加载顺序：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted当父组件执行完beforeMount挂载开始后，会依次执行子组件中的钩子，直到全部子组件mounted挂载到实例上，父组件才会进入mounted钩子触发顺序：父beforeUp

2021-09-23 22:30:03 455

原创前端知识点总结——Vue组件的通信方式 / CSS伪类和伪元素 / CSS3新特性 / 跨域资源共享 CORS / cookie / 盒模型

Vue组件的通信方式父子组件：props / $emit父子组件：$parent/$children 与 $ref父子、兄弟、隔代组件：$emit / $ on通过设置一个空的App.vue作为一个模版的事件中心，用来触发事件和监听事件父子、隔代组件：provide/inject父子、兄弟、隔代组件：Vuex伪类和伪元素伪类作用于元素选择器上单冒号:常见伪类：:link、:visited、:hover、:active、:first-child和:nth-child伪元素作用

2021-09-08 21:32:13 366

原创前端知识点整理——v-if 和 v-show / 事件冒泡和捕获 / Git的操作方式 / canvas有什么优势（canvas 和 svg） / 重排与重绘 / async和defer

v-if 和 v-showv-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置dom元素的display样式，block为显示，none为隐藏v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换v-if有更高的切换消耗；v-show有更高的初始渲染消耗v-if是惰性的，如果初始条件为假，则什么也不做。v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且dom元素保留事件冒泡和

2021-09-05 22:32:49 789

原创前端知识点总结——Vuex / 事件循环 / 宏任务和微任务 / Vue3和Vue2的区别以及双向绑定的区别 / Vue的特性 / js垃圾回收机制 / less、sass

Vuex作用：全局状态管理。在state中定义一个数据后，可以在所在项目中的任何一个组件里进行获取、修改，并且修改的结果可以得到全局的响应变更。Vuex的核心部分：State，Getter，Mutation，Actionstate：包含了store中存储的各个状态。const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text:

2021-09-01 23:01:17 622

原创前端知识点总结——HTTP结构的形式

HTTP结构的形式请求报文和响应报文的组成形式：请求行请求头空行消息主体请求行：格式为Method Request-URI HTTP-Version \r\n请求头：通用报头：既可以出现在请求报头，也可以出现在响应报头中Date：表示消息产生的日期和时间Connection：允许发送指定连接的选项，例如指定连接是连续的，或者指定“close”选项，通知服务器，在响应完成后，关闭连接Cache-Control：用于指定缓存指令，缓存指令是单向的（响应中出现的缓存指令在请求

2021-08-29 15:44:41 108

原创前端知识点总结——强缓存和协商缓存 / Get和Post的区别 / 赋值、浅拷贝、深拷贝 / 手写实现Set类 / src和href

强缓存和协商缓存使用缓存的目的减少重复数据请求，避免通过网络再次加载资源，节省流量。降低服务器的压力，提升网站性能。加快客户端加载网页的速度，提升用户体验。如果浏览器命中强缓存，则不需要给服务器发请求；而协商缓存最终由服务器来决定是否使用缓存，即客户端与服务器之间存在一次通信。强缓存Expires：是http1.0的规范，值是一个GMT 格式的时间点字符串，比如 Expires：Mon,18 Oct 2066 23:59:59 GMT。这个时间点代表资源失效的时间，如果当前的时间戳在这

2021-08-26 16:15:58 404

原创前端知识点总结——数组的reduce函数 / 数组扁平化 / 插槽 / 水平、垂直、水平垂直居中 / 防抖和节流 / 行内元素和块元素

数组的reduce函数reduce方法没有独有的特点，它的功能for循环就可以实现，但是它的写法可能更加便捷。arr.reduce(callback,[initialValue])callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、array （调

2021-08-23 16:53:25 314

原创前端知识点总结——蔚来一面面经 / webpack打包的入口 / loader和plugin的区别 / 语义化代码 / Vue路由守卫

webpack打包的入口在vue-cli3中查看webpack的配置信息，输入vue inspect > output.jsentry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/main.js entry: { app: [ './src/main.js' ] }output 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist output: { path: '/Users

2021-08-23 10:10:27 265

原创前端知识点总结——http状态码 / Http和Https的区别 / 网络攻击

http状态码1xx（临时响应）：表示临时响应并需要请求者继续执行操作的状态码。100（继续）请求者应当继续提出请求，服务器此时已经收到部分请求，等待接受其余部分101（切换协议）请求者已要求服务器切换协议，服务器已确认并准备进行切换2xx（成功）：请求已经成功处理200（成功）服务器已经成果处理了请求3xx（重定向）：请求已经完成，需要进一步操作301（永久移动）：请求的网页已经永久移动到新位置。服务器返回此相应时，会自动将请求转到新的位置。302（临时移动）服务器目前从不

2021-08-09 19:25:36 317

原创前端知识点总结——排序算法

排序算法插入排序时间复杂度空间复杂度O(n^2)O(1)直接插入排序（稳定）：将数组中所有元素依次与前面已经排好的元素相比较，如果选择的元素比已排序的元素小，则交换，直到所有元素都比较过//直接插入排序function insert_sort(arr) { let temp = arr[0] for(let i=1;i<arr.length;i++){ temp = arr[i] //保存当前值，与前面所有元素做比较 for(let

2021-08-05 17:09:11 82

原创前端知识点总结——数组的方法

ES6

2021-08-03 10:01:38 180

原创前端知识点总结——Webpack的作用和运行原理 / ES6的Map和Set / 设计模式 / meta标签的作用

Webpack的作用和运行原理Webpack的作用打包：模块打包：一个工程中会分为很多个小的模块，每个小的模块实现一个功能，模块之间相互引用。webpack从入口开始分析每一个包的关系合并成为一个文件。代码转换：es6转换为es5，less、sass转换为css构建一个开发时环境，监听本地源代码变化，自动重新构建和浏览器刷新图片压缩，较小的图片转码为base64在vue项目中使用webpack：由webpack中的vue-loader将vue编译为js文件 => 由babel将

2021-07-28 19:13:38 206

原创前端知识点总结——Vue框架概述 / 双向绑定 / Vue生命周期 / Vue更新节点 / Vue子父组件通信 / Class类

Vue相关内容vue是一个渐进式框架，就是说vue有很多功能，你需要哪一部分，就可以使用哪一部分到你的项目中。vue的核心特性是数据双向绑定和组件化。除此之外，vue配套的工具库还有vuex和vue-router，前者做状态管理，后者做路由管理。经典图片渐进式框架：可以逐渐添加需要使用的功能，不需要使用的可以不添加。声明式渲染：数据发生变化时，视图可以自动更新，不用关心DOM的操作，专心于数据处理。例如：使用v-for时，我们只告诉Vue需要重复渲染多少次，并没有告诉Vue每一步该如何操作。这个

2021-07-26 17:28:47 321

原创前端知识点总结——bind、call、apply的区别 / null和undefined的区别 / BFC / 跨域相关问题 / Promise

bind、call、apply的区别apply：apply(this,[])第一个参数是this的指向，第二个参数是函数接受的参数数组，必须是数组形式，该方法会立即执行。let nums = [1,2,3,4,5]let temp = 0temp = Math.max.call(null,nums[0],nums[1],nums[2],nums[3],nums[4])console.log(temp); // 5call：call(this,args,args,...,)第一个参数是this的

2021-07-19 20:37:52 226

原创前端知识点总结——图片懒加载 / localStorage和sessionStorage、cookie区别 / 垂直居中

实现图片的懒加载实现原理是通过判断图片是否在浏览器窗口显示，显示时在进行加载 let length = document.getElementsByTagName('img').length //获取图片总数量 let imgs = document.getElementsByTagName('img') //获取图片列表 let now = 0 window.onscroll = lazylaod function lazylaod() { let height = document

2021-07-18 15:58:39 147

原创 2022 秋招前端字节一面

Http1.0 和 1.1 的区别最直观的区别是http1.0不支持持久链接，链接无法复用。浏览器的每次请求都会和服务器重新建立tcp连接和慢启动（最开始的发送量会指数级增长，当到达了慢启动阈值的时候进行加法增大，直到出现网络拥塞后重新进行慢启动，通过动态减少发送量缓解网络拥塞问题），并且请求完之后服务器立即断开连接，不跟踪每个浏览器的历史请求。这样会花费大量的时间在建立连接上，当连接数增多时丢包的几率也会增加，更加延长了连接时长。其次http1.0在发送...

2021-07-16 17:18:20 164

原创原型对象、原型链、prototype、proto的理解

PS：原型的概念还是很抽象，想要一次掌握还是很困难，需要不断复习，重复理解，加深印象。多看看不同人的讲解思路，每个人的思路都不同，可以从多维度的来理解！我也来分享一下我对原型的理解。首先要知道js中有哪几种数据类型、知道原型的作用是什么、原型是如何在对象中存在的、原型如何使用。JavaScript只有一种结构：对象js中万物皆是对象。出去五种基本类型以外的都是对象。五种基本数据类型包括：String / Number / Boolean / underfine / null剩下的Object /

2021-05-11 17:31:20 758

原创 Element UI + Vue 批量上传图片（只请求一次）

在使用elementui上传组件时，可以一次选择多个文件上传，设置:multiple="true"可以选择多个文件，但是文件请求的时候还是分开请求，多少个图片请求多少次。现在需求时一次请求上传所有选中的图片主要步骤：（1）通过elementui组件选取需要上传图片（2）封装上传函数代码：hmtl部分： <el-dialog title="选择上传图片" :visible.sync="dialogVisible_up_image" width=

2021-04-26 11:17:37 3716

原创 element UI表格下拉栏嵌入地图信息，并且实现手风琴效果

需求：点击某一行下拉显示该用户的位置信息，再次点击时收回，最多只展开一行数据解决步骤：使用element UI table表格的expand属性进行下拉扩展（此时只能点击箭头下拉，后面会增加点击一行任意位置下拉）<el-table-column type="expand"> <template slot-scope="props"> //进行参数传递的入口 <el-form inline class="demo-table-expand"> &l

2021-04-09 11:49:49 338

原创 H5页面（微信也可）中调用手机拨打电话功能

正常情况下直接调用如下代码：<a href="tel:13555555555">打电话</a>Vue中使用动态绑定<a :href="'tel:'+phone">打电话</a>如果要在组件内使用次功能，需要用a标签包裹组件才可生效<a :href="'tel:'+phone"><van-button type="primary">联系用户</van-button></a>上面的代码在绝大多数手机

2021-03-29 14:13:25 3520

原创微信公众号开发报错40048(无效的url)

微信公众号开发报错40048(无效的url)1. JS接口安全域名配置错误（不要http://）aabcdef.efg.cn/mobile 这种格式2. 设置安全域名时，txt文件未在域名根目录下(我遇到时需要将校验文件放到前端工程里)3. appid错误（用了其他公众号的基本前三个就能解决大部分问题，如果还未解决需要查看获取的URL和实际的URL是否相同...

2021-03-25 15:23:16 1310

原创微信公众号调用腾讯地图api

微信公众号项目测试号管理项目进行阶段中，需要进行调试，可以申请微信的测试号功能（测试号）申请之后会有appID以及appsecret配置js接口安全域名可以设置本地域名（可以使用ip地址，上线项目只能使用域名不能使用ip地址（不需要前面http部分：192.168.3.196:9020））扫码关注测试公众号在体验接口权限表中：网页服务->网页账号->网页授权获取用户基本信息点击修改image-20210318152103144.png)]首页获取用户信息第一步：用户

2021-03-22 15:32:54 1594

qq_33290968的博客