随笔分类 - 前端
前端的一些随笔
摘要：`async` 和 `defer` 是两种不同的JavaScript特性，它们的主要区别在于它们的执行顺序和时间点。 `async` 意味着函数或代码块会被异步执行。当浏览器遇到带有 `async` 属性的资源时，它会立即开始下载该资源，同时继续加载页面。这样可以避免由于同步执行而导致的页面加载阻
阅读全文
摘要：data() { return { tableData:[] } }, //原生JS+XLSX包实现 xls文件上传 methods: { //上传excel表格文件 uploadHandler(data){//对应的是 upload中的 => :http-request="uploadHandle
阅读全文
摘要：我在做一个页面其中有一个视频的播放，我开始用常规的思路去解决，我定义了一个一个控制视频播放的dialog和点击播放视频的开关，如何我发现当我点击开关的时候，dialog可以弹出，但不能播放视频，于是我就想是不是自动播放的问题，然后我就在视频的上面加了一个autoplay，然后我发现结果是视频可以播放
阅读全文
摘要：p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //多行在这里修改数字即可 overflow: hidden; /* autoprefixer: ignore ne
阅读全文
摘要：vue的双向绑定是由数据劫持结合发布者－订阅者模式实现的，那么什么是数据劫持？vue是如何进行数据劫持的？说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听
阅读全文
摘要：1、问题描述：页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。 2、解决思路： 办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localSt
阅读全文
摘要：1. hash 带#号的,history不带#号2.hash模式用的hashChange监听路径的变化3.history用的是HTML5相关的API语法 使用pushState => 添加一条历史记录 使用replaceState => 替换了一条历史记录 使用onpopState => 监听的前进
阅读全文
摘要：导航被触发。 在失活的组件里调用 beforeRouteLeave 守卫。 调用全局的 beforeEach 守卫。 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。 在路由配置里调用 beforeEnter。 解析异步路由组件。 在被激活的组件里调用 beforeRout
阅读全文
摘要：在Vue中利用数据劫持defineProperty在原型prototype上初始化了一些getter,分别是router代表当前Router的实例 、 router代表当前Router的实例、router代表当前Router的实例、route 代表当前Router的信息。在install中也全局注册
阅读全文
摘要：TypeError: Cannot read properties of undefined (reading 'map') 原因：第一次页面渲染的时候，map的对象是undefined,所以在前面加个要进行判断，当有值时再去遍历 报错代码 解决方法一 ：后面加一个空数组 解决方法二：链式调用（?.
阅读全文
摘要：行内元素实现水平垂直居中： text-align: center;（text-align: center只能实现文本的垂直居中） line-height: 50px;（line-height不能实现多行文本的垂直居中） padding:50px;（不固定高度的垂直居中 通过设置padding实现）
阅读全文
摘要：什么是BFC: 块级格式化上下文 BFC的作用： BFC其实就是规定了网页布局的规范 1.BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素 解释:BFC的基本改变,最大的BFC是HTML文件 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发
阅读全文
摘要：基线对齐（vertical-align : baseline）使元素的基线同基准元素（取行高最高的作为基准）的基线对齐顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐底端对齐（vertical-align : bottom）与顶端对齐（vertical-al
阅读全文
摘要：由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值 1. 所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。 2. 考虑到 this 是词法层面上的，严格模式中与 this 相关
阅读全文
摘要：this 指向： 1. 全局上下文（函数外） 无论是否为严格模式，均指向全局对象。注意:严格模式下全局对象为undifined 2. 函数上下文（函数内） 默认的，指向函数的调用对象，且是最直接的调用对象： 简单调用，指向全局对象注意:严格模式下全局对象为undifined，某些浏览器未实现此标准也
阅读全文
摘要：单例模式：单例模式是指在内存中只会创建且仅创建一次对象的设计模式。在程序中多次使用同一个对象且作用相同时，为了防止频繁地创建对象使得内存飙升，单例模式可以让程序仅在内存中创建一个对象，让所有需要调用的地方都共享这一单例对象。 策略模式： 封装一组数据结构(算法),对外提供一个接口,策略模式 一般 用
阅读全文
摘要：this.$el this.$el DOM的根元素 => 是一个完全唯一的 $el 直到组件挂载完成 (mounted) 之前都会是 undefined。 对于单一根元素的组件，$el 将会指向该根元素。 this.$nestTick: 定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据
阅读全文
摘要：promise 内部有三个状态，分别是pending，fulfilled和rejected pending是对象创建后的初始状态，当调用resolve函数时变为fulfilled（成功）状态（可调用.then方法进行成功处理），当调用reject函数时变为rejected （失败）状态（可调用.ca
阅读全文
摘要：浅拷贝：如果拷贝的是一个基本数据类型则拷贝的是值，如果是引用数据类型则拷贝的是内存地址，一个改变其他另一个也跟着改变 常见的浅拷贝有：展开运算符，Object.assign()，Array.prototype.concat()，Array.prototype.slice()等 深拷贝：在计算机中开辟
阅读全文
摘要：scoped是一个样式作用域: 1. 可以让当前这个组件独享这个样式 2. 对子组件的根元素样式同样有效果 3. 对子组件的内部没有效果 原理: 当是我们scoped修饰style的时候,会对当前组件里面的元素(子组件的根元素)的样式添加一个 属性 => data-v-xxx 如果我们在父组件中想要
阅读全文
