- 博客(46)
- 收藏
- 关注
RSS订阅
原创 在面试初级前端需要知道那些知识
通过目录查找第一天HTML1、link与@uimport的区别2、HTML包含的元素CSS1、圣杯布局和双飞翼布局的理解和区别2、css新增特性JS1、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值2、去除字符串中最后一个指定的字符第二天HTML1、HTML的全局属性有哪些CSS1、在页面上隐藏元素的方法有哪些？2、css选择器有哪些？那些属性可以继承？JS1、去除字符串中的空格第三天浏览器什么是同源策略JS什么是回调函数CSSLess 伪元素生成横线第四天HTML简述超链接target属
2021-01-26 18:45:31
702
原创 你知道 details 标签的妙用吗?
details 标签在以往的项目中去实现如下效果,我一般是使用 HTML + JS 去完成的，但今天我了解到一个很便捷的方法可以帮助我只使用 HTML 就可以快速的完成如下效果。那就是 HTML5 中新增的 detils 标签。基本介绍实现代码如下： <details> <summary> 文章概要 </summary> <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div&g
2022-04-18 17:43:04
1991
原创 event loop 面试题
题目一async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { new Promise(function (resolve) { console.log('promise1'); resolve(); }).then(function () {
2021-10-11 17:36:15
650
原创 学习 react有这一张图就够了，帮你梳理必会知识
此图可以帮助你有效的总结在学习react中所遇到的知识，其中包含从创建一个简单react文件到使用 react脚手架，从函数组件到高阶组件，生命周期、组件优化、虚拟DOM和Diff算法。当然此图也只是帮助你去梳理和概括react中的基本知识，关于react中深入的知识还需自己学习...
2021-05-28 19:53:41
273
4
原创 1~100的递归案例
function num(a) { if (a == 1) { return 1 } return num(a - 1) + a // 100+99+98+97+96}let b = num(100)console.log(b) // 5050
2021-05-25 17:23:21
559
原创 vue 导入导出Excel文件
导入一 、安装xlsx包$ npm i xlsx二、使用ElementUI创建上传Excel的组件<template> <div class="upload-excel"> <div class="btn-upload"> <el-button :loading="loading" size="mini" type="primary" @click="handleUpload"> 点击上传 <
2021-05-22 14:43:19
362
原创 vue 报错 this.getOptions is not a function
this.getOptions is not a function报错的主要原因是 vue脚手架中less-loader的版本过高导致的绝决方法首先将原来的 less-loader 删除 npm uninstall less-loader然后在重新npm less-loadernpm install [email protected] --save...
2021-05-21 21:12:09
16777
原创 vscode配置文件及提升开发效率的24个必备插件
vs code是一个体积小速度快的一款编辑器，它最大的优点在于它有很多免费的好用的插件来帮助你来提高你的开发效率，它甚至可以让你在你的vs code里面听音乐，看小说、打游戏，这可真是上班摸鱼必备啊哈哈哈。言归正传，在此我把我使用的插件分享给大家，并附上我的配置文件。{ "editor.fontSize": 16, "window.zoomLevel": 0, "todo-tree.tree.showScanModeButton": false, "todohighlight.keywor
2021-05-14 01:50:09
170
原创 超详细！如何在windows安装Hyper-V虚拟机
一、hype-v是什么Hyper-V是微软的一款虚拟化产品，是微软第一个采用类似Vmware ESXi和Citrix Xen的基于hypervisor的技术。这也意味着微软会更加直接地与市场先行者VMware展开竞争，但竞争的方式会有所不同。二、安装hype-v1、打开控制面板中的程序和功能2、打开启用或关闭Windows功能3、选择Hype-vh和适用于Linux的Windows子系统4、重启电脑后打开Hyper-V管理器**注意：**在win10家庭版中，是没有hype-v的。复制下
2021-05-04 21:08:06
11239
原创 Vuex由入门到深入
入门Vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。什么是“状态管理模式 ”让我们从一个简单的计数器开始new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div>
2021-04-29 17:36:10
186
1
原创 canvas笔记
一、什么是canvasHTML5 提出了一个新的 canvas 标签，彻底颠覆了 Flash 的主导地位。无论是广告、游戏都可以使用 canvas 实现了，Canvas 是一个轻量级的画布，我们使用 Canvas 进行 JavaScript 的编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅二、基本使用<canvas width='400' height='400' id='mycanvas'>当前浏览器不支持canvas，请升级浏览器</canvas>
2021-04-25 21:03:18
127
原创 微信小程序使用字体图标
1、使用阿里图标库，把项目中需要的图标添加入到项目中2、选择Font class后，复制生成的代码3、在浏览器网址中打开这段css代码4、复制代码，直接粘贴到app.wxss中5、最后就可以直接在所需要的页面中使用了<text class='iconfont icon-iconfontplatformentranc'></text>...
2021-04-14 09:41:57
123
原创 uniapp项目开发踩坑篇
uniapp项目开发踩坑篇因为是第一次尝试使用uniapp开发app，对个平台兼容性不是很清楚，所以在开发过程中遇到了不少问题，特地来总结一下存储机制uni-app的localStorage在不同端的实现不同H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理app端为原生的plus.storage，无限制大小，不是缓存，是持久性的各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可
2021-04-14 09:27:40
1267
1
原创 vue项目中引出的问题【一】
表单验证给el-form 添加属性:rules='formLoginRules',formLoginRules则是验证规则在data中定义formLoginRules的规则export default { data() { return { loginForm: { username: "", password: "" }, // 定义验证规则列表 loginFormRules: { usern
2021-03-17 18:06:19
581
原创 看!Vue CLI(脚手架)来了
Vue CLI(脚手架)Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统安装npm install -g @vue/cli使用vue -V查看版本，确认是否安装成功创建项目vue create 项目名选择版本及配置我们选择第三个自定义版本选择需要的特性以上选择的分别是选择Vue的版本js高级语法转换Router路由选择版本这里选择的是 vue 2路由这里选择的是no配置文件选择YES是否保存记录选择NO打开项目 cd hell
2021-03-11 18:18:49
124
原创 webpck与vue的相关知识
什么是模块化传统开发模式的主要问题命名冲突文件依赖模块化：就是将单独的功能封装到一个模块（文件）中，模块之间相互隔离，可以通过特定的接口公开内部成员，模块也可以依赖于其他模块好处：方便代码重用，提升开发效率，并且方便后期维护ES6模块化主要使用场景是在Node中node之前的模块化规范主要是commonJs,从13.2版本之后，开始支持ES6模块化修改type属性首先创建a.jsvar a = 10var f1 = ()=>{ console.log(20)}
2021-03-10 22:40:47
147
原创 对于Vue路由你知道多少
路由再讲Vue路由之前先简单概括一下路由的概念后端路由：URL地址与服务器资源的匹配关系前端路由：根据不同的用户事件，显示不同的页面内容，主要用于实现SPA(单页面应用)Hash方法定义路由首先让我们通过一个简单的案例来了解路由首先定义三个锚点来对应响应的页面<div id="app"> <ul> <li><a href="#/pageA">页面一</a></li> <
2021-03-08 20:42:30
178
原创 Vue组件的相关说明
一、定义组件首先创建一个Vue的实例Vue.component('el-div',{ template:"<div>我是自定义组件</div>"})然后我们就可以再页面中使用这个组件了<div id="app"> <el-div></el-div></div>结果：1、组件名的大小写定义组件名的方式有两种：使用连字符Vue.component('my-component-name',{...}
2021-03-05 16:45:38
446
6
原创 Vue中必掌握的知识
Vue入门基础一、什么是vue二、与原生JS的区别三、数据绑定1、内容绑定2、属性绑定3、表单标签的值四、事件处理五、列表渲染六、条件渲染七、Class与Style绑定八、计算属性九、侦听器一、什么是vuevue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。二、与原生JS的区别
2021-03-03 21:52:26
12666
18
原创 Git学习笔记
在讲git之前先来讲一下什么是版本控制版本控制是指对软件开发过程中各种程序代码、说明文件等文档的变更进行管理。它将追踪文件变化，记录文件的变更时间、变更内容、甚至变更执行人进行记录，同时对每个阶段性变更添加版本编号，方便将来进行查阅特定阶段的变更信息，甚至是回滚Git是什么Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。首先我们需要了解两个概念状态、区域状态状态分为四种已修改（modified）已暂停（staged）已提交（committed）为追踪（Un
2021-02-04 16:33:53
85
原创 Node.js学习历程【五】之 Express模块
一、Express是什么基于Node.js Web的开发框架安装初始化项目生成版本库npm init -y安装项目依赖模块npm install express --save搭建后端服务引入express模块调用express方法生成express实例对象设置路由监听端口号const express = require('require')const app = express()app.get('/',(req,res)=>{ res.send('首页')
2021-02-02 16:26:43
195
1
原创 Node.js学习历程【四】之 Promise
前言通过今天学习Promise我发现我在js中对同步与异步、回调函数，的概念还是有点模糊，凭着知其然也要知其所以然的道理就来好好玩一下这些东西。同步与异步同步：你去肯德基买一个汉堡，但发现你前面有很多的人，所以需要站在那里一直等待你前面的人的餐都送到他们的手里以后你才可以点餐。这就是同步：任务队列中工作的排序是1234，就必须按照1234的顺序去完成console.log('第一个顾客')console.log('第二个顾客')console.log('第三个顾客')console.lo
2021-01-28 00:25:39
145
原创 Node.js学习历程【三】之模块化开发
模块化开发在实际开发中，js模块化有一下几种规范AMDCMDCommonJSES6其中Node中使用的是CommonJS什么是模块化开发模块化开发可以用乐高积木来比喻。每个积木都有固定的形状和颜色，想要组合积木就必须正确的使用他们之间的连接点进行连接，最后拼出你想要的形状模块化其实是一种规范，有了规范自然会大大的提升开发效率。每个js文件都是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容怎样做到模块化开发在node.js中可以使用exports来将成员导
2021-01-26 18:37:48
130
1
原创 我的Node.js学习历程【二】之案例总结
前言经过一周的学习也算是对Node.js有了一些了解，也学着完成了第一个小案例。使用的方法都是比较原生的，没有使用任何框架。其过程不算很难，但新的知识实在是多，所以在每天学习完后，我都会写写笔记来梳理下思路。废话不多数，让我们进入正题。Here we go！案例介绍使用http创建服务器，实现对前台数据的增、删、改、查。前台的数据存储在json文件当中。每条数据包括编号、姓名、年龄、创建时间字段。所使用的模块http ---- 用来创建服务器fs ---- 读取静态页面和json
2021-01-25 21:25:11
126
1
原创 服务器端的概念
服务器端基础概念网站的组成网站应用程序主要分为两大部分：客户端和服务端。客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JS构建服务端：在服务器中运行的部分，负责存储数据和处理应用逻辑网站服务器能够提供网站访问服务的机器就是服务器，它能够接收客户端的请求，能够对请求做出响应IP地址IP地址是互联网中设备中的唯一标识。IP是Internet Protocol Address（互联网协议地址）的简写IP地址相当于门牌号域名由于IP地址难以记住，就产生
2021-01-21 21:22:47
4121
2
原创 实现判断数据类型的函数
分析:typeof只能返回，string、number、boolean、undefined、objectnull会被判为objectarray会被判为object所以比较优雅的方式是Object.portotype.toString.call()的方法，最后再用正则把其中的[object ]替换掉就ok了const fn = obj => { return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g,
2021-01-20 22:43:54
886
1
原创 我的Node.js学习历程【一】之基础认识
前言2021年1月20日，初遇Node.js,有感而发，写出如此文章，若有错误敬请指正。一、Node是什么简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。二、Node的组成JavaScript由三部分组成：ECMAScript、Bom、Do
2021-01-20 20:52:08
236
1
原创 【面试】面试中的js问题（一）
前言问题：js中的数据类型有什么答：javascript中包含原始数据类型和引用数据类型。原始数据类型包括null、undefined、string、number、BigInt、symbol、boolean、和引用数据类型Object那么由这个问题我们可有的说了，让我们一起探讨一下null 和 undefined 有什么区别吗？typeof null 为什么是 object？为什么 ES6要提出 Symbol？Bigint 解决了什么问题？为什么0.1+0.2 ！== 0.3 ？如何
2021-01-18 22:38:38
174
2
原创 PHP基础知识
数据类型三大类八小类标量数据类型类型说明Boolean（布尔值）True 真 ，可以用1表示 False假，可以用0表示String（字符串型）连续的字符序列，可以是计算机中能表示的一切字符Integer（整形）只能包含整数，可以是正数或负数Float（浮点型）有小数位,保存的是近似位，不能参与比较单引号’ ’不会解析变量，双引号” “会解析变量<?php $a = 10; echo '$a';//输出 $a echo
2021-01-18 14:28:58
6280
7
原创 JS DOM对象的介绍与操作
js中的事件获取与节点操作JS Web APIAPI的概念API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。Web APIs的概念Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）API和Web API总结API是为程序员提供的一个接口，帮助我们实现某种功能。Web API 主要针对浏览器提供的接口，主要针对浏览器做交互效果。Web API
2021-01-18 14:27:48
239
原创 (rem+媒体查询+less)的适配布局
一、rem1、rem是什么rem（root em）是一个相对单位，类似与em，em父元素字体大小不同的是rem的基准是相对于html元素的字体大小比如：根元素（html）设置font-size=12px，非根元素设置width=12px;非根元素设置width：10rem；则换成px表示就是120pxhtml { font-size: 12px; } .box { width: 10rem;
2021-01-14 16:18:09
496
1
原创 flex弹性布局详解
一、什么是弹性布局弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。与传统布局的区别传统布局，基于盒模型，依赖 display属性 、position属性 、float属性，它对于那些特殊布局非常不方便。传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex布局操作方
2021-01-12 21:27:33
14502
2
原创 移动端基础知识
一、物理像素整个屏幕是由一个个的点组成的，每个屏幕上的点组成的，每个屏幕上的点一定是有限的。那么这些有限的点就叫做像素，或者叫物理像素（physical pixel）二、分辨率分辨率=画面水平方向的像素值*画面垂直方向的像素值屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素点个数越多，图像显示越精细三、CSS中的 1px 并不等于设备的1px从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着
2021-01-07 17:15:29
191
原创 与HTML5+CSS3的初相识
CSS3之3D转换一、特点近大远小物体和面遮挡不可见二、三维坐标系x轴：水平向右——右面是正值，左面是负值y轴：垂直向下——上面是正值，下面是负值z轴：垂直屏幕——往外面是正值，往里面是复制三、translatetranslateX()向x轴平移正数向右，负数向左translateY向y轴平移，整数向下负数向上translateZz轴可以理解为你与电脑屏幕之间的距离，值越大距离屏幕越近，值越小离屏幕距离越远首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转
2021-01-05 13:40:14
231
1
原创 js正则表达式
什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。语法/pattern/attributespattern是一个字符串，指定了正则表达式的模式或其他正则表达式attributes是一个可选字符串，包括属性g全局匹配,i区分大小写m多行匹配实例var patt = /grh/i/grh/是一个正则表达式grh是一个模式i是修饰符（把搜索修改为大小写不敏感）正则表达式的特点
2020-12-24 15:18:33
98
原创 JS中的构造函数
一、面向对象基本特征封装：也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。继承：通过继承创建的新类称为“子类”或“派生类”。继承的过程，就是从一般到特殊的过程。多态：对象的多功能，多方法，一个方法多种表现形式。Javascript是一种基于对象（object-based）的语言。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）—–es6以前是这样的。所以es5只有使用函数模拟的面向对象。二、对象
2020-12-22 23:34:56
8301
原创 那些惊艳你的前端冷知识
HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address bar :)');将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正
2020-12-22 23:33:18
109
1
原创 JS实现图片上传并显示
HTML代码<!-- html代码 --><body> <input type="file" id='file'> <div id=""> <img src="" id='img'> </div></body>js代码<script type="text/javascript"> var file =document.querySelector('#file'); file.add
2020-12-22 23:31:55
1742
原创 JS的BOM对象与执行机制
一、何为BOMBOM（browser object model）浏览器对象模型1、关于BOM核心是window对象，所有的全局变量和全局函数都被归在了window上 2.BOM是Browser Object Model的缩写，是浏览器对象模型2、BOM的构成2、window对象window对象：BOM的核心对象是window，它表示浏览器的一个实例在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global
2020-12-09 23:31:53
178
原创 搭建静态页面中必须要知道的知识
一、display：table的用法1、父元素宽度固定，让若干个子元素平分宽度.parent{display: table; width: 1000px;}.son{display: table-cell;}2、块级子元素垂直居中.parent {display: table;}.son {display: table-cell; vertical-align: middle;text-algin:center}3、注意（1）display: table时padding会失效（2
2020-12-07 20:48:41
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人