- 博客(31)
- 收藏
- 关注
RSS订阅原创 解决element-ui对话框组件el-dialog遮罩层小问题
问题场景：在使用对话框组件时，点击弹出后，遮罩层始终显示在最前面，导致整个页面无法操作。出现原因出现这种情况是因为遮罩层的dom元素插入进了body标签底下，标签如下所示：解决办法在el-dialog标签里添加一个属性，:modal-append-to-body:false, 让遮罩层插入至dialog的父元素上就OK啦，官方文档如下...
2022-01-05 16:45:19
2121
原创 vue使用定时器重新渲染某个组件
强制vue组件重新渲染加载的方式：采用将key分配给组件的方式，如果想重新渲染组件，只需改变key值就可以。使用示例：<template> <div> // 需要重新渲染的组件，绑定一个key值 <childComponent :key="childKey" /> </div></template><script>export default{ data()
2021-05-12 17:35:45
663
原创 vue报错合集
npm run serve 运行vue项目时，报如下错误解决方案：将项目底下的node_models文件夹删掉，重新npm install，再运行
2020-12-05 09:32:17
271
原创 webpack基础教程（简单使用）
一 、webpack是什么？Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。（本文以webpack4为准）二、 安装webpack首先确保本地环境支持node.js，再使用npm安装webpack，如果觉得npm安装速度慢，可使用淘宝镜像及其命令cnpm全局安装webpack命令行如下 npm install webpack -g 项目安装webpack命令行如下 npm install
2020-11-29 09:27:01
1296
原创 前端浏览器常见兼容性问题及解决方案
1. 最常见的：每个浏览器的默认margin，padding大小都不同，当设置定位时会有些许差异。解决方案：这也是最容易解决的, 在css样式文件中重置margin，padding*{ margin:0; padding:0;}2. 图片默认有间距：当几个img标签放到一起时，有些浏览器会有默认间距，加上第一条的设置的通配符样式也无用。解决方式：使用float属性让其浮动，消除间距3. min-height问题：由于min-height本身就是一个不...
2020-11-29 09:10:09
4204
原创 js简单实现观察者模式
1、什么是观察者模式？观察者模式（Observer），又叫发布-订阅模式（Publish/Subscribe），定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并自动更新。2、代码具体实现首先定义一个主题，用于接收状态变化，并通知每个观察者// 主题，接收状态变化，并通知每个观察者 class Sub{ constructor(){ this.state = 0
2020-11-19 17:55:12
5292
原创 vue自定义指令使用详解
1、当需要对普通DOM元素进行底层操作的时候，可以使用自定义指令。2、使用规则：代码如下所示<div id="app"> <!--使用全局自定义指令--> <input v-focus /> <!--使用局部自定义指令--> <div v-dir1></div> <input type="text" v-focus2></div>Vue.directive('focus
2020-11-01 16:30:15
212
原创 vue组件间(父传子，子传父，兄弟组件)通信方式
*## 1、父传子：使用props使用规则：组件内部通过props接收传过来的值，props传递数据原则：单向数据流（只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据）<!--父组件内容--><div id="app"> <div>{{pmsg}}</div> <!--父组件通过属性绑定将值传递给子组件--> <menu-con :me-con="hhh"></menu-con&g
2020-10-29 11:29:59
268
原创 JavaScript踩坑记录
1.数组排序问题，Array.sort()，直接使用sort排序时，会自动把元素转换为字符串再进行比较，所以排序出来的值可能会不准。 所以使用sort排序时，要使用如下写法：[5,3,4,1,2].sort(function(a,b){ return a - b})2、对函数进行bind绑定，会返回新对象，之前绑定的事件无法取消。this.node.on('test',this.onTouch.bind(this))// this.onTouch.bind(this)两次传递的是不同对象，内部
2020-10-25 17:45:11
188
原创 vue中ref和$refs用法详解
一、基本概念Vue中的ref用来给元素或子组件注册引用信息，而$refs可以用来获取ref注册过的元素或组件，并调用其方法。二、基本用法用法： 子组件上定义ref=“refName”, 父组件的方法中用 this.$refs.refName.method 去调用子组件方法三、几种情况当ref用在组件上时，用$refs获取到的的是组件实例。<template> <div id="app"> <Home ref="test" /> </div&
2020-10-18 10:58:20
2438
1
原创 leetcode q2 两数相加（考查链表）
q2题目描述：给出两个 非空 的链表用来表示两个非负的整数。其中，它们各自的位数是按照 逆序 的方式存储的，并且它们的每个节点只能存储 一位 数字。如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。可以假设除了数字 0 之外，这两个数都不会以 0 开头。示例：输入：(2 -> 4 -> 3) + (5 -> 6 -> 4)输出：7 -> 0 -> 8原因：342 + 465 = 807题解：首先创建一个节点，判断l1 和 l2 是否为空，
2020-09-27 17:27:17
133
原创 leetcode有关二分法题目（使用JavaScript题解）
q35. 搜索插入位置给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。可以假设数组中无重复元素。题解：本题使用二分法，先设定左侧下标left，为0，和右侧下标right，为数组长度减一。根据left和right算出mid，然后判断目标值和数组最中间的值的大小，如果目标值大，则缩短查找区间为[mid+1,right]，所以此时让left = mid+1，如果目标值小，则可缩短查找区间为[left,mid-1]，此时让right =
2020-09-26 15:03:54
228
原创 前端实现路由的两种方式（hash和history）
前端实现路由主要有两种方式：第一种：通过location.hash实现前端路由hash是指url中#后面的部门，这部分在服务器会被自动忽略，但是在浏览器中可以通过location.hash来获取。此方式主要是用到了onhashchange事件，这个事件可以监听url中的hash值变化，以此来进行一些DOM的切换操作。onhashchange事件的触发条件有:a、改变url地址，在最后面增加或改变其hash值b、改变location.href或location.hashc、点击带有锚点的链接d、
2020-09-07 22:08:52
3045
原创 less基本语法笔记
1、less中的注释：以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中2、less中的变量：a、使用@来声明一个变量：例 @red:redb、作为普通属性值来使用：直接使用@redc、作为选择器和属性名使用：#@{selector}的形式d、作为url：@{url}e、变量是延迟加载的3、less中的嵌套规则：a、基本嵌套规则b、&的使用4、less中的混合：混合就是将一系列属性从一个规则集引入到另一个规则集的方式a、普通混合（编译到原
2020-08-25 21:40:27
355
原创 Promise学习笔记（使用详解）
一、promise是什么？总体来说：Promise就是JS中进行异步编程的新的解决方案。具体来说：从语法上看，Promise是一个构造函数；从功能上看，promise对象用来封装一个异步操作并可以获取结果。二、promise的状态（⭐⭐⭐⭐⭐）1、初始状态为pending（未决定），pending可变为fulfilled（履行）2、pending可变为rejected（拒绝）注意：一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据。成功的数据一般会称为value，失败的
2020-08-19 15:02:32
451
原创 Vue中keep-alive的使用详解
1、概念：keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。2、作用：用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。3、使用方式:方式一：在App.vue中使用keep-alive标签，表示缓存所有页面 <div id="app"> <keep-alive> <tar-bar></tar-bar> <div class="container">
2020-08-16 09:12:05
22991
原创 JavaScript关于事件的兼容性问题及解决方法
1、事件对象本身：标准浏览器是发生时自动给方法传一个实参，IE是全局的window.event解决方法：e = e || window.event2、事件源：标准浏览器是e.target，IE下是e.srcElement，解决办法是：let target = e.target || e.srcElement3、DOM二级事件绑定：标准浏览器是element.addEventListener，IE下是element.attachEvent，解决办法是通过判断：if(ele.addEventListe
2020-08-14 17:41:36
1409
原创 防抖节流基本原理及实现
1、防抖：防抖是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求）实现代码如下：// func代表一个函数，里面可能会频繁发生回调或ajax请求，delay表示隔多少秒触发才触发，immediate表示是否立即执行，可传true或false，默认falsefunction debounce(func,delay,immediate) { // result表示返回
2020-08-07 17:25:01
25320
1
原创 vuex中四个核心特性及基本使用
一、Vuex概述vuex是实现组件全局数据管理的一种机制，可以方便组件之间的数据共享。二、vuex的作用1、能够在vuex中集中管理共享的数据，便于开发和后期进行维护2、能够高效实现组件之间的数据共享3、存储在vuex中的数据是响应式的，当数据发生改变，页面中的数据也会同步更新三、Vuex中的核心特性1、State：用于提供唯一的公共数据源，所有共享的数据都要放到Store中的state中存储。在组件中访问state的方式有两种：a、使用this.$ store.state.全局数据名称，
2020-07-28 15:27:20
1387
原创 跨域三种常用解决方案
一、什么是跨域请求？所谓跨域请求，就是指当前发起请求的域与该请求指向的资源所在的域不一致。二、什么是同源策略？同源策略是浏览器的核心基础安全策略。如果少了同源策略，浏览器很容易受到XSS，CSFR等攻击。所谓同源是指协议，域名和端口号均相同，任何一个不同都是跨域。三、解决方案1.JSONP原理是Ajax存在跨域问题，但是script标签不存在这类问题，所以利用script标签可解决跨域问题。注意，JSONP只支持get方式，有一定的局限性和安全问题。实例代码如下：这是html页面，由于loca
2020-07-26 12:00:39
251
原创 有关闭包小结
由于js的作用域链规则，函数内部能够访问到函数外部的数据，但在函数外部，无法访问函数内部的数据。所以，为了能访问到函数内部的数据，闭包产生了。闭包的定义： 是指有权访问另一个函数作用域中的变量的函数。这么说有点晦涩，按我的理解，闭包就是一个能在外部访问其他函数的局部变量的函数。闭包的产生条件：1、嵌套函数2、内部函数引用外部函数的变量闭包实例： function fn() { var num=10; function fun() { va
2020-07-22 09:48:18
236
原创 js实现四种常见排序算法
1、插入排序：主要思想，将左侧序列看成一个有序序列，每次将一个数字插入该有序序列。插入时，从有序序列最右侧开始比较，若比较的数较大，后移一位。var insertSort = function(arr){ for(let i = 0;i<arr.length;i++){ // 将一个值看为最小值 let min =arr[i] let j // 将这个最小值循环与左侧的值进行比较，保证左侧数据是有序的 for(j= i - 1; j>=0; j--){ // 如果m
2020-07-18 16:21:38
1236
原创 flex布局有关属性整理
一、flex容器属性有：flex-direction:设置主轴方向，可设置的属性值有a. row：表示横向排列，从左至右b. row-reverse：表示横向排列，从右至左c. column：表示纵向排列，从上至下d. column-reverse：表示纵向排列，从下至上排列flex-wrap:设置一条轴线排不下如何换行，属性值有a.wrap:内容超过后换行b.nowrap:不换行，总是在一行显示c.wrap-reverse:换行后有两行，reverse就是把两行的排列顺序倒过来3.j
2020-07-17 22:43:07
293
原创 仿移动端bilibili项目总结
一、项目总体功能介绍二、关于各功能板块重点笔记1、登录功能页面如上图所示，使用flex+vw布局，可以下载Px to Rwd插件，使用快捷键快速将px转换为vw,快速实现屏幕适配。由于页面布局和注册页面基本一致，可将其抽离成一个组件，用于复用。首先将顶部信息抽离成组件，顶部文字信息可通过props父组件向子组件传值显示，顶部布局组件具体代码如下，登录信息也可抽离成组件，这里输入框使用vant框架实现，下载vant，在main.js中引入后，可在组件中使用。输入框组件在登录页面引入组件，
2020-07-16 23:47:15
1424
1
原创 随时记笔记：v-model实现原理
v-model仅仅是一个语法糖。<input type="text" v-model="msg" />上面一行代码是v-model非常常用的一种形式，它等同于下一行代码，就是下一行代码的语法糖。<input v-bind:value="msg" @input="msg=$event.target.value" />所以，实际上v-model的实现，第一步是通过v-bind绑定value值，第二步通过触发input事件，传递数据。v-model在组件中使用，如下图代码所示
2020-07-03 16:01:56
241
原创 随时记笔记：实现CSS垂直居中
方法一：子绝父相，子盒子top，left都给50%，再设置margin-top，margin-left为盒子宽高的一半（负）.father{ position:relative;}.father .son{ position:absolute; top:50%; left:50%; width:100px; height:100px; margin-left:-50px; margin-top:-50px;}方法二：子绝父相，子盒子top、left都50%， 用transform
2020-06-23 17:30:33
85
原创 随时记笔记：对js执行机制Event Loop的理解
Event Loop是什么？Event Loop是一个执行模型，在不同的地方有不同的实现。宏任务和微任务是什么？宏任务：也叫macrotask，在JavaScript中，一些异步任务会进入macrotask队列中，等待被调用，常见的异步任务有：setTimeout，setInterval。微任务：也叫microtask，有Promise，process.nextTick 。了解JavaScript代码执行的具体流程：1、执行全局script同步代码2、全局script同步代码执行完之后，调用栈
2020-05-31 16:35:19
193
原创 随时记笔记：对JavaScript继承的理解
1、原型链继承：以下代码定义了两个类型，Father和Son，每个类型都有其属性和方法，Son通过创建Father实例，并将其赋值给Son.prototype继承了Father。使用原型链继承会共享所有引用类型值，因此很少单独使用原型链继承。 function Father(){ this.hobby = ['read','run'] this.property= true } Father.prototype.sho
2020-05-31 14:44:59
203
原创 深刻理解JavaScript闭包、原型、this指向
1、this指向问题a、普通函数，谁调用就指向谁。注意，严格模式下全局作用域的this是undefined。 function fn() { console.log('普通函数的this'+this); } fn(); //实际是window.fn() 所以这里指向windowb、对象的方法 var o ={ sayHi:function () { console.log('对象方法的this：'+this);
2020-05-10 21:59:25
243
原创 各浏览器获取滚动条高度
Firefox：document.documentElement.scrollTop或者$(window).scrollTop()chrome：document.body.scrollTopSafari：document.body.scrollTopIE9及以上：document.documentElement.scrollTop
2020-03-08 11:00:35
446
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人