- 博客(79)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 虚拟dom中key的作用
虚拟dom中key的作用 key是虚拟DOM对象的标识,当数据发生变化时,vue会根据新数据生成新的虚拟DOM,随后进行新旧虚拟DOM的差异比较对比规则1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:若虚拟DOM中内容没变,直接使用之前的真实DOM，若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。2. 旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到页面。用index作为key可能会引发的问题1. 若对数据进行,逆序添加,逆
2022-03-27 09:20:02
1454
原创 JS中的Error对象
文章目录MDN文档错误类型错误处理错误属性借鉴链接MDN文档Error错误类型Error：所有错误的父类型ReferenceError：引用的变量不存在 console.log(a);//ReferenceError: a is not defined console.log(a);//ReferenceError: a is not defined console.log('-----');注意第二行代码,当我写入上述两行代码时,控制台只打印了第一行代码的错
2021-10-19 13:25:45
498
原创 带你十分钟了解BFC(渡一教育笔记)
文章目录BFC简介创建BFCBFC特性结语BFC简介它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局创建BFCBFC渲染区域: 这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:根元素浮动和绝对定位元素(包括固定定位)overflow不等于visible的块盒display设置为inline-block或者inline-table或flexBFC特性创建BFC的元素,它的自动高度需要计算浮动元素(可以使用该特性来解决高度坍塌问题)&
2021-10-10 11:14:16
252
转载 前端面试题2021(超详细)
haowe 身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题2021及答案... 点进来之后你的噩梦就要来了，接下来你要面对上百道面试题，那么，如果你—— 是个小白菜： 推荐使用2~3周的时间来消化接下来的面试题，遇到不会的没听说过名词请立刻去搜；文章中只是简答，如果想要详细了解的话还需要你自觉去搜索如果你是个大神： 好.
2021-10-04 16:08:03
220
原创 js数组常用方法总结(包括ES6)
目录Array.push( )Array.pop( )Array.unshift( )Array.shift( )Array.concat(arr1,arr2...)Array.slice(start,end)Array.join ( )Array.splice(index,many,...args)Array.reverse( )Array.every( function)Array.map(function)Array.push( )Array.push( ),向数组末尾添加一个或多个新的元素,方
2021-10-03 13:33:11
165
原创 剑指offer(面试战备ing,持续更新)
javascript原型链js原型和原型链你只要看这一篇继承js继承的6种方式作用域Js作用域与作用域链详解闭包js中的闭包this的指向 函数调用方式以及this指向立即执行函数【前端 教程】详解 立即执行函数apply,call和bind改变函数this指向柯里化详解JS函数柯里化v8垃圾回收机制V8垃圾回收机制new操作符new 操作符到底做了什么？事件循环机制js 事件循环（Event Loop）机制...
2021-09-22 23:23:37
100
2
原创 移动端知识补充
浏览器私有前缀-moz-:代表firefox浏览器私有属性-ms-:代表ie浏览器私有属性-webkit-:代表Safari，chrome私有属性-o-:代表Opera私有属性meta视口标签布局详解流式布局(百分比布局)rem布局rem基础rem相对于html元素,字体大小来说的em相对于父元素的字体大小来说的rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制背景渐变媒体查询语法规范1. mediatype媒体类型
2021-09-16 12:08:49
85
原创 计算机网络体系结构
计算机网络的分层模型分层模型分层的好处可以屏蔽底层差异使每一层功能容易实现和标准化各层之间相互独立简化系统设计模块化易于维护系统的更新成本和效率分层的负面影响信息冗余,降低性能层次难以确定协议首部(Header)越来越大 网络协议概念:为进行网络中的数据交换而建立的滚则,标准或约定网络协议三要素:. 语法:数据与控制信息的结构或格式. 语义:发出任何控制信息,完成何种动物以及做出何种响应. 语序:包括时序控制和速率匹配关系 网络系统的数据通信由协议
2021-09-13 20:47:47
369
原创 Vue生命周期钩子函数的使用以及应用场景
前言昨天做项目时,由于自己对Vue的生命周期钩子函数了解的不是很到位,以至于出现了很多问题，所以便在闲暇之余写下这篇博客,加深一下对钩子函数的认知。钩子函数介绍话不多说，先上图！！初看这幅图,可能觉得这Tm是什么啊,能不能说的直白点！！！(淦),但习惯就好，这就是官方。但稍微学习一下之后,可以发现这是很简单的~vue提供了多个生命周期函数供我们使用,分别为beforeCreate, created, beforeMount, mounted, beforeUpdate,
2021-09-09 11:19:19
2639
原创 Composition-API
简介Composition API简介：一组基于函数的附加API，能够灵活地组成组件逻辑，Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易Options API和Composition-API的区别Options API在vue2中，
2021-09-08 00:44:22
3126
原创 计算机网络的基本概念
计算机网络导引概念网络定义:网络是由若干节点和构成这些节点的链路构成,表示诸多对象及其互相联系计算机网络定义:计算机网络指地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统,简而言之就是自主,互连的计算机集合网络的组成节点+链路开放系统+互联环境(OSI)核心网+边缘网(TCP/IP)核心网的交换模式:电路交换,分组交换,报文交换,混合交换边缘网的通信模式:C/S(Cl
2021-09-06 13:01:09
340
原创 Git基础学习(黑马程序员笔记)
Git介绍Git是目前世界上最先进的分布式版本控制系统Git与Github两者区别Git是一个分布式版本库控制系统,简单的说就是一个软件,用于记录一个或若干文件内容变化，以便将来来查阅特定版本修订情况的软件。Github是一个为用户提供Git服务的网站,简单说就是一个可以放代码的地方(不过可以放的当然不仅是代码)除了提供管理的Web界面外,还提供了订阅，关注，讨论组，在线编辑器等丰富的功能。Github被称为全球最大的基友网站。注册Github官网: https://github.com/G
2021-07-22 14:59:00
674
1
原创 5分钟快速了解微信小程序如何获取收货地址,耶稣也拦不住,我说的！！！
步骤绑定点击事件调用小程序内置api wx.chooseAddress获取用户的收货地址获取用户对小程序所授予的获取地址的权限状态scope假设用户点击获取收货地址的提示框 确定authSetting scope.addressscope值true 直接调用获取收货地址假设用户从来没有调用过 收货地址的apiscope undefined直接调用获取收货地址假设用户点击获取收货地址的提示框 取消scope值false诱导用户自己打开授权设置页面 当用户重新给予获取地址权限的时候获取
2021-06-02 00:36:14
2730
原创 常用寻址方式介绍
寻址方式立即数寻址方式 MOV BL,80H MOV AX,1090H 功能:立即数寻址方式只能作为源操作数,主要用来给寄存器或存储单元 值 说明:该寻址方式所提供的操作直接包含在指令中,紧跟在操作码之后,他 为 指令的一部分,这种操作数称为立即数注意:操作数在内存中按照小端法规则存放,即低字节存低地址,高字节存高地址、寄存器寻址方式 MOV CL,DL MOV AX,DX 说明:寄存器
2021-05-30 10:55:35
4025
原创 汇编程序基本指令集
指令概述指令指令是CPU操作的基本单位,每条指令执行一个特定的操作。可以理解为:指令通知CPU执行某种操作的“命令”。CPU全部指令的集合,称为指令集指令分类机器指令:二进制格式编码的序列(一串0,1代码书写)。注意:硬件只能识别,存储,运行机器指令符号指令:用字符串形式的序列(包含字符串形式的操作码以及操作数助记符)汇编语言基本指令集总说明(所有的指令都要遵守的)对于双操作数指令(如:MOV,ADD,CMP…)源,目操作数不可同为内存操作数源,目操作数属性一致(长度相同)当
2021-05-28 17:12:19
5334
2
原创 刮刮乐案例
写在前面想必大家都玩过刮刮乐叭,但你是否知道如何在电脑上实现类似刮刮乐的效果嘛,今天我就来为大家展示~效果图代码区域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
2021-05-24 20:13:38
269
原创 炫彩小球案例
前言以下是利用canvas实现炫彩小球的效果,需要利用基础的前端知识,我就来为大家展示一下叭效果图如下HTML <body> <canvas width="800" height="500"></canvas> </body>css给画布设置边框样式 <style> canvas{ border: 1px solid #000; background
2021-05-22 13:29:25
221
原创 新鲜出炉的canvas~
canvas概述canvas的基本使用canvas只有两个标签属性,width和height;如果不写这两个属性的话,默认宽高为300px*150px<canvas>当前浏览器版本不支持,请升级浏览器</canvas>注意:canvas的宽高不要用css样式设置,如果使用css样式设置,画布会失真,会变形兼容替换由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素canvas在这些浏览器上你应该总是能展示替代内容。支持canvas的浏览器会只
2021-05-22 12:45:31
176
4
原创 Vscode快捷键整理
前言闲来无事,将vscode编译器的快捷键给大家整理一下,希望可以为大家提供一点点帮助。以下~Ctrl+S：保存文件Ctrl+【: 代码行向前缩进,Ctrl+】:代码行向后缩进,Ctrl+Shift+【， Ctrl+Shift+】：折叠打开代码块Ctrl+C :复制Ctrl+V：粘贴Ctrl+/：单行注释Ctrl+Shift+/:多行注释Shift+Alt+F：代码格式化Alt+Up，Alt+Down：上下移动一行Shift+Alt+Up:向上复制一行Shift+Alt+Down
2021-05-20 18:14:58
3897
原创 Web本地存储和小程序本地存储的区别
web本地存储localStorage.setItem("key","value")localStorage.getItem("key")web中不管存入什么类型的数据,最终都会调用以下toString(),把数据变成了字符串 再存入进去想要了解更多的话,请从此处进入,客户端存储(一个大佬的博客，很详细)小程序存储存储时调用官方文档中的apiwx.setStorageSync("key","value");wx.getStorageSync("key");小程序不存在类型装换的这个数
2021-05-17 18:00:14
119
原创 MySQL数据库详解
废话不多说,我就直接展示~~mysql基本语句使用查看数据库我们使用数据库前,都应该先查看数据库中有没有已经创建好的数据库,有的话我们就直接使用，没有的话我们再自己创建~SHOW DATABASES;注意：此处不区分大小写，但后面的分号一定不要忘记！！！创建数据库create database 数据库名称;使用数据库USE 数据库名称;删除数据库DROP DATABASE 数据库名;创建表创建表需要以下信息:表名表字段名定义每个表字段CREATE TABLE t
2021-05-08 18:00:35
1300
3
原创 学习tab栏切换必备,快速上手排它算法
前言之前学习Tab栏操作的时候,了解到一种新的算法思想(排它思想),趁着今天闲暇之余,写下这篇博客,希望可以给读者朋友们提供帮助。算法简介何为排他算法呢,简单点来说就是干掉所有人,留下我自己(干就完了),只要牢记这段口诀,相信学习起来就不会很难了！！何时使用当存在多个元素的情况下,我们需要给其中的一个元素设置样式(留下我自己),而其它元素则保持原来状态(干掉所有人)，这时我们的排它思想就华丽登场了~~~案例效果下面是我做的一个tab栏效果,请大家仔细观看其中的排它思想，注意观察上面文字的背景
2021-05-07 21:24:27
150
原创 微信小程序基础学习
微信小程序官方文档配置pages配置 "pages":[ "pages/index/index", // 添加新的页面 "pages/demo01/demo01", "pages/logs/logs" ],windows配置// 导航栏背景色"navigationBarBackgroundColor": "#fff",// 导航栏内容"navigationBarTitleText": "Weixin",// 导航栏字体颜色,只能设置黑白
2021-05-03 20:02:41
110
1
原创 轮播图案例
案例效果案例功能需求鼠标经过轮播图,左右按钮显示,离开隐藏左右按钮点击左右按钮一次,图片往左播放一张,以此类推,左侧按钮同理图片播放的同时,下面小圆圈模块跟随一起变化点击小圆圈，可以播放响应图片鼠标不经过轮播图,.轮播图也会自动播放图片鼠标通过,轮播图模块,自动播放停止代码展示我此处的代码全部是写在html中的,这是不提倡的,最好各写各的,封装在自己的模块中<!DOCTYPE html><html lang="en"><head> &
2021-05-02 17:50:58
468
2
原创 动画函数封装
函数封装话不多说,直接上代码function animate(obj,target,callback){ //对于存在按钮点击后,开启器定时器的情况下, 当我们不断的点击按钮,元素的速度就会越来越快,因为开启了太多的定时器 // 解决方案:当我们开启下一个定时器的时候,清除上一个定时器 clearInterval(obj.timer); // 给不同元素设置不同定时器,提高运行效率 obj.timer = setInterval(function(){
2021-05-01 15:58:26
126
原创 仿京东倒计时案例
Date（）日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象如果里面没有参数 返回当前系统的当前时间参数常用的写法 数字型 2019,10,01 或者是字符串型’2019-10-1 8:8:8’getmonth :记得月份加1哦getfullyeargetdate 返回今天几号Getday 返回今天周几 周一至周六返回1~6 周日为0getHours 返回小时数getMinutes 返回分钟getSeconds 返回秒数时间戳:通过valueOf() getTime()
2021-04-30 22:10:12
115
2
原创 axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax缺点:配置和调用方式等非常混乱jQuery-Ajax缺点:在Vue整个开发中都是不需要使用jQuery的axiosaxios功能特点:在浏览器中发送XMLHttpRequests请求在Node.js中发送http请求支持Promise API拦截响应和请求转换请求和响应数据axios的基本使用安装axios框架:npm install axios --save在入口文件main.js中引入axios并调用注意:axios
2021-04-29 16:55:54
529
4
原创 事件对象以及事件委托(pink老师笔记）
事件对象element.onclick = function(e){console.log(e);}// event就是一个事件对象,写到我们侦听函数的小括号里面,可以当形参来看// 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数// 事件对象是我们事件的一系列相关数据的集合跟时间相关的,比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊等等。// 事件对象我们也可以自己命名,比如event,etarget与this<!DOCTYPE html&g
2021-04-25 19:30:13
215
原创 JS事件流(事件冒泡 事件委托)
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流分为三个阶段:捕获阶段(从上往下,从外往内)目标阶段冒泡阶段(从下往上,从内往外)注意:js只能执行捕获或者冒泡其中的一个阶段，两者不可共存onclick和attachEvent只能得到冒泡阶段，如果需要捕获阶段的话,则需要使用addEventListener事件冒泡事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程&l
2021-04-25 18:58:36
115
原创 改变函数this指向
改变函数this指向fn.call(thisArg,arg1,arg2,…);call可以调用函数 并且改变函数内的this指向* thisArg:在fun函数运行时的this值* arg1,arg2:传递的其他参数* 返回由指定的this值和初始化参数改造的原参数拷贝<script> var obj = { name:'zhangsan' } function fn(){ console.log(t
2021-04-21 12:03:40
126
原创 函数调用方式以及this指向
函数调用方式以及this指向普通函数:fn();function fn(){ console.log( '普通函数:'+ this); } fn();//普通函数:window对象的方法 var obj = { sayhi:function(){ console.log(this); } } obj.sayhi();//obj构造函数: new 函数名()构造函数中的this中的
2021-04-21 11:59:02
124
原创 ES6中新增数组遍历方法
ES5中新增的方法遍历方法: forEach(),fifter(),some()；array.forEach(function(currentValue,index,arr))// currentValue:数组当前项的值// index:数组当前的索引// arr:数组对象本身 <script> var arr = [1,2,3]; arr.forEach(function(value,index,array){ con
2021-04-21 09:37:33
299
原创 利用3D转换实现旋转木马
该案例就是对3D转换的利用，话不多说直接上代码案例效果案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马</title> <style
2021-04-16 23:23:37
163
原创 transform3D转换
3D转换三维坐标系x轴:水平向右 注意:x右边是正值,左边是负值y轴:垂直向下 注意:y下边是正值,上边是负值z轴:垂直屏幕 注意:往外面是正值,往里面是负值主要知识点3D位移:translate3d(x,y)/* 仅在x轴移动 */transform:translateX()/* 仅在y轴移动 */transform:translateY()/* 仅在z轴移动(注意:translateZ一般用px单位)*/transform:translateZ()/* xyz是不能省略
2021-04-16 18:17:42
385
原创 transform2D转换
2D转换移动:translate语法格式:/* x就是x轴上移动的位置,y则是在y轴上移动的位置 中间用逗号分割 如果里面参数是% 移动的距离是 盒子自身的宽度或者高度来对比的*/transform:translate(x,y)/* 只在x轴上移动 */transform:translateX()/* 只在y轴上移动 */transform:translateY()特点定义2D中的移动,沿着x和y轴移动translate最大的优点:不会影响到其他与元素的位置translat
2021-04-16 16:41:58
117
原创 仿小米logo切换
今天看博客的时候发现类似于小米logo切换的效果,所以就心血来潮,写下这篇博客,。话不多说直接上代码了 冲冲冲！！！！运行效果伪元素实现该方法主要在于为盒子设置伪元素,并给伪元素设置背景,利用hover实现伪元素的切换,从而实现滑动效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl
2021-04-15 23:51:49
303
原创 CSS背景属性
背景属性背景图片位置参数是方位名词, /* 如果是方位名词 right center和center right 效果是等价的 跟顺序没有关系 如果第二个参数省略 默 认垂直居中显示*/ background-position: center right;如果指定的两个值都是方位名词,则两个值前后顺序无关如果只指定了一个方位名词,另一个值省略,则第二个值默认默认居中对齐 background-position:center;参数是精确单位如果参数是精确坐标,那
2021-04-14 14:03:35
77
原创 css3动画
动画(animation)动画的基本使用定义动画 @keyframes 动画名称{ /* 1. 可以做多个状态的变化keyframe关键帧 */ /* 2. 里面的百分比要是整数 */ 0%{ background-position: 0 0; } 100%{ background-position: -3800px 0;
2021-04-08 21:11:46
83
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人