随笔分类 - 前端
前端的一些随笔
摘要:`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 如果我们在父组件中想要
阅读全文