- 博客(44)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue中key原理和作用
key的原理和作用key 作用 :用来作为数据的唯一标识key原理：vue中的key其实存在着一种diff算法，也正是这个diff算法，使得页面在被渲染时更加高效，什么是diff算法，其实是一种虚拟DOM算法，就是将新的虚拟DOM与重新渲染的虚拟DOM进行一个对比 vue中的key属性就是按照这个key的值来一一对比。如果匹配到一样的Node节点会便不会重新使用新的虚拟DOM进行渲染，而是采用原有虚拟DOM结构。情景一在使用v-for时不使用key属性（其实vue会将其默认将索引作为
2021-10-28 22:25:55
1863
1
原创 webpack打包工具使用
webpack打包工具的使用什么是webpack？官方给出的解释是： webpack 是一个现代化javascript应用程序的静态模块儿打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块儿，然后将所有这些模块儿打包成一个或者多个bundle,bundle英文意思时一捆,一包,一扎的意思,接触过juery的小伙伴应该对于bundles不陌生在下载jquery文件时有jquery.js和query.bundles.js
2021-10-24 20:31:00
446
原创 js面向对象的几种创建方式
面向对象的几种创建方式字面量创建 //字面量创建 var obj = { name:"李四", age:21, hoddy:function() { console.log("学习"); } } var obj2 = { name:"张三", age:12, hobby:function() { console.log("唱歌"); } } console.log(ob
2021-10-21 15:29:10
197
1
原创 ES6新增语法
ES6新增语法let 和 constlet//let定义的变量不能重名 let a = 19; let a ="张三"; console.log(a);//Uncaught SyntaxError: Identifier 'a' has already been declared //let没有变量提升也就是预解析必须先定义才能使用 console.log(name);//Uncaught ReferenceError: name is not defined
2021-09-25 21:44:14
298
原创 js中的深浅拷贝
浅拷贝在介绍浅拷贝之前，先了解一下，数据类型的分类，我们知道共用六大类，其中有5中基本数据类型和一种引用类型五大基本数据类型：1.Number2.String3.Boolean4.undefined5.null引用类型（Object）1.object2.array3.function注意：基本数据类型式存储在栈当中，而引用类型存储在堆当中。1.基本数据类型的数据存储在栈中，就好比我们使用var 声明变量是开辟了一块儿空间，把数值存储在里面，用的时候取到的也是里面的值。
2021-09-08 23:08:38
86
原创 js拖拽事件
js的拖拽首先，在了解拖拽的原理之前，我们需要认识几个知识点（BOM三大系列），获取鼠标的位置，获取元素的位置offset系列：获取元素的占位宽高(content + padding + border)名称解释offsetWidth获取元素的宽度，使用语法 : 标签.offsetWidthoffsetHeight获取元素的高度，使用语法 : 标签.offsetWidthoffsetTop获取当前元素的顶部到定为父元素的距离，没有定位父元素到body的距
2021-08-28 11:24:02
316
原创 js中的迭代
js迭代器1.什么是迭代器？迭代就是重复执行一个重复的过程，每一次的迭代结果作为下一次开始的初始值，其实学过for循环，知道for循环的执行流程，就不难理解。js中的迭代主要有every()、map()、fliter()（过滤器）some(),下面一一介绍1every() 只有数组中的每一个数都满足才返回true,否则返回false语法是：数组.every(function(item,index,array){return 条件})//比如:判断这个数组是不是都是大于60的
2021-08-24 22:01:12
2484
原创 js中的数据类型
js中的基本数据类型和特殊类型（对象类型、引入类型）js中的数据类型有 number(数字类型）、string(字符串类型)、boolean(布尔类型)、undefined（未定义）、null(空对象)特殊类型 ： 包括 object(对象) 、Array（数组）、function(函数)1.先说一下数值类型（number）number 它包括整数、小数、八进制、十六进制、NaN、infinity（无穷大）下面一次进行举例<!DOCTYPE html><ht
2021-08-15 14:58:02
191
原创 css使容器实现垂直水平居中的几种方法
使子容器在父容器中垂直居中的六种方法.第一种，使用定位来实现 .wrap1 { width: 200px; height: 200px; background-color: #00FFFF; position: relative; } .index1 { width: 50px; height: 50px; background-color: #008000; position: absolute; le
2021-08-06 20:18:12
784
原创 图片懒加载
图片懒加载首先说一下懒加载的原理，我们知道浏览器在加载图片是通过src的地址进行访问的，如果加载图片数量少了还可以，如果是图片类型的网站，加载多个图片这无不是给浏览器请求增加了负担，所以我们通过用户浏览的情况来加载一定的数量，比如说,用户刚打开网页浏览时，看到的是整个浏览器窗口的大小，我们就先加载一定数量的图片信息，这样就给浏览器请求有了一定的缓解时间，当用户下拉页面时触发再次请求图片信息，这样缓解了浏览器的压力，还给用户一种在请求数据的体验。原理1.先写html,我们将src的请求地址给到空，
2021-07-27 21:17:33
84
原创 rem和em的区别
rem和em区别在介绍两者区别前，先说一下rem具体是什么？有什么含义。首先：rem全称（font size of the root element）（根元素的字体大小）它是css3新增的尺寸（度量单位），根节点（html）的font-size决定了rem的尺寸单位，也就是所它是一个相对的单位。rem是一个相对长度单位。相对于父元素的倍数来计算。浏览器默认字体大小是16px,1rem就是16px.rem可以应用到什么场景？可以用来做web app屏幕适配，因为不同手机型号的屏
2021-07-25 10:57:23
4254
原创 CSS浮动问题
CSS元素浮动问题概述：网页中有很多布局效果。标准流是无法完成的，可以利用浮动改变元素默认排列方式浮动的概念浮动可以使元素【脱离文档流】，【按照指定方向排列】（float：left和float：right），直到遇到父元素的边界或另一个浮动元素才会停止。浮动属性float– left 左浮动【从左向右浮动】– right 右浮动 【从右向左排列】– none 不浮动 (默认值)浮动的基本特性可以使块儿元素在一行排列脱离文档流【不在占用文档的空间】提升层级【浮动元素会覆
2021-07-21 21:26:23
282
原创 外边距问题
外边距问题典型例子典型案例一结构关系：嵌套块儿元素的垂直外边距塌陷问题描述：当父元素没有padding，border时子元素与父元素直接相邻时，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并，最终结果是正值取结果较大的值，负值取绝对值较大的值。表现：父子元素共同使用一个外边距（由于父类未定义border或者padding导致父类直接相邻的子元素设置外边距时，比如说设置margin-top:20px,此时刷新看到子元素并没有距离父类10px个像素，（如果父
2021-07-19 20:06:53
203
1
原创 flex布局
flex布局我们知道要想让块儿级元素按照从左到右的顺序排列，通常会设置元素的float，而设置float会是元素脱离文档流结构，从而改变父级元素的高度，并且还要考虑左右的清除浮动的影响。针对块儿级元素的排列方式，所以我们引入了flex布局，flex布局是给父级容器设置display属性为flex,让父级容器具备flex属性，然后来控制容器中的子容器的排列顺序flex布局分为容器属性和项目属性，容器属性指的是在父级容器中写入的css样式属性，项目属性则是给容器内部子容器的写的css样式属性。
2021-07-17 15:54:29
246
原创 HTML中的文档流
文档流什么是文档流？文档流：页面从上往下一行一行，其中每行从左至右的顺序，这种排列方式成为文档流。什么是脱离了文档流？脱离文档流意味着 它的排列顺序不遵循正常情况下文档的排列顺序，已经脱离了文档流，它不占用空间，处于浮动状态，脱离了文档流的元素的定位相对于其正常情况下的文档流，所以处于正常文档流的元素会占用原先的空间。脱离文档流的几种情况？首先是float1.先说一下，float使得元素脱离文档流，该元素也可以理解为不占用空间了，那么处于正常情况下的元素就占用了它的空间，所以通过下面的例子演
2021-07-17 10:50:25
1381
原创 谈一谈对web标准的理解
谈一谈对web标准的理解首先，什么是web标准？web标准不是一方面的标准，而是多个标准的集合，网页标准主要有三个标准，分别是结构标准、表现标准、行为标准。结构标准 :文档的结构与组织，对应了XHTML和XML表现标准：是文档的表现效果，对应的是css行为标准：是对网页的信息结构进行逻辑操作，网页的交互。 对应的是（W3c DOM 和ECMA Script）web标准有哪些优点？1.浏览器开发商和web程序开发人员遵循制定标准更有利于发展（相互依赖共同遵循才能有更好的发展）2.遵循we
2021-07-16 09:39:56
500
原创 如何将自己的项目发表在gitee上
如何将自己的项目发布在gitee上1.git init在本地初始化一个仓库（变成一个可供git管理的仓库，也就是resposibility仓库）2.git add .使用git add 命令将项目添加到缓存区中，注意不要忘记后面的" . “，这个”."代表的是所有的项目列表3.git commit -m "自定义一个提交名称"用来提交缓存区中的文件，可以自定义一个名称供方便查看4.git remote add origin 你的远程库地址关联到远程仓库：例如： git remote add
2021-07-04 20:55:31
279
原创 微信小程序中的省市区选择器
微信小程序中的省市区选择器的实现在一些小程序中我们不伐会用到市区选择器，那它是如何实现的，下面展示一下，效果图。首先在wxml这个文件中用到picker这个组件，picker是从底部加载的滚动选择器。<picker mode="region" bindchange="getUserProvince"> <view> 选择的省份:<text wx:for="{{region}}">{{item}} </text>
2021-07-03 20:13:49
17555
5
原创 git常用命令
git常用命令1.git branch查看本地所有分支2.git status查看当前状态3.git commit回车，会启动vim，输入信息4.git branch -a查看所有分支5.git branch -r查看远程所有分支6.git commit -m“注释”将暂存区提交到版本库7.git commit -a跳过暂存区，只有被跟踪过的文件才可以跳过暂存区8.git add具体文件将文件添加到暂存区9.git log查看提交记录10.git reflog查看所有的提交记录11.g
2021-06-10 23:49:19
64
原创 js中的数组的几种方法
js数组的几种方法总结1.toString()方法，将数组转化为字符串，将数组值（用逗号分割）的字符串var arr = [12,34,445,67,878,89]; console.log(arr.toString());可以看出将arr转化为带逗号的字符串2.join()方法，用法和toString()方法类似，只不过join可以规定分割符 console.log(arr.join()); //什么也不加结果同toString类似 console.log(arr.join("
2021-06-06 00:38:27
2153
1
原创 link和import的区别
link和import的区别1.link属于式XHTML标签，除了加载一些css样式以外，还能用与定义RSS,定义rel链接属性等作用，而@import是css提供的只能用于加载css2.加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。3.import是css2.1提出的，只能在IE5以上才能被识别，而
2021-06-04 23:23:28
311
原创 正则表达式
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-06-03 00:50:05
265
原创 Vue中的插槽slot使用
Vue中的插槽slot1.首先在了解这个插槽这个概念之前，我想通过一个图片来更加形象说一下。下面简单说一下这个图片，我们可以看到父组件中包含了各个大小相同的子组件，这些子组件中的布局上面的布局是一样的，唯一不相同的是，不同的形状。首先我们会想着先做好一个子组件，比如说是cpn1，这个组件做好后，我复制两份然后再修改他们不同的地方，这样作其实看来也是可以的，但是这样做导致了组件的复用性是特别差的.然后我们用到slot插槽后，就可以这样来做：我可以单单创建一个子组件然后用slot标签给布局不同的部分提
2021-05-18 14:42:02
150
1
原创 Vue局部组件和全局组件
Vue中的父组件和子组件 Vue中我们在定义组件时，需要先创建一个组件构造器，然后再跟据实际情况，采用局部组件定义和全局组件定义。 首先我先说一下为什么使用自定义组件，我们再写前端代码时候会遇到代码重复性高，或者说是代码冗余，观赏性不美观，我简单举个例子：我们想让这个div中的内容重复出现多次，我们会多复制几行运行结果：当我们想着多复制几行，会这样做<script type="text/javascript">//步骤1.组件构造器 const cpn = V
2021-05-09 00:16:20
473
原创 用Vue.js实现一个简易的购物车
基于Vue.js实现一个简易的购物车一、该案例主要实现功能功能1.可以对商品进行更改数量，加减按钮。（初始定义的数量为1，加操作正常进行，减操作当数量小于0时，减操作按钮不得使用）。2.可以对每一项商品进行删除操作，当商品删除完后，会有一个显示购物车为空的提示字下面就来展示一下代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>书籍购物车</tit
2021-05-06 10:33:20
3695
原创 js中get方式传送多个值
js中get方式传送多个值1.我们知道在访问url时一般传值采用‘？+名称=参数’，如何在url中传送多个值呢，我们可以采用“?param1=value¶m2=value¶m3=value”的形式传送多个值。举例：（在浏览一些网页时可以稍加注意一下）...
2021-03-07 23:20:04
2081
原创 如何解决li标签中文字换行问题
解决li标签超出容器范围自动换行问题1.这个用到了css中white-space:nowrap;问题li{white-space:nowrap;}
2021-03-04 22:42:49
3862
3
原创 java编程题检索一个字符串中出现元音字符长度最长是多少？
java编程题题目：给定一个字符串，返回最长元音字母字串长度测试举例：输入为：asdbuiodea输出为3 因为uio三个元音字姆是最长的分析题目：可以理解为元音字母连续且最长遍程思路：我个人是将用户输入的字符串和元音字符串分别转化为两个数组用split（）函数将其分开，并且通过for循环将两个数组进行匹配对比，符合的转化为1赋值给另一个数组，再将里一个数组进行是1的加等。具体代码实现如下：```javapackage codequestion;import java.awt.Fr
2021-02-26 22:12:26
852
3
原创 js动画事件
js之动画事件首先，动画事件主要包括以下三个animationstart，animationiteration和animationend事件，下面做简单分别介绍。animationstart该事件在css动画开始播放时触发animationiteration该事件在css动画重新播放时触发animationend该事件在css动画结束播放时触发我们知道animation主要有6个属性，分别来设置动画呈现出来哦的效果，这个在我的另一篇文章中有介绍，我这边简单展示一下。
2021-02-07 20:49:43
1390
原创 css3之animation属性
css3之animationanimation，是css属性中的简写，它主要有六种动画属性设置，下面简单介绍。主要包括以下六种：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction基本语法：animation:name duration timing-function delay iteration-cou
2021-02-06 22:51:19
312
原创 js拖拽事件
javascript 事件之拖拽事件首先，在了解拖拽事件之前我们先了解一下，拖拽事件都会用到哪些知识。在拖拽目标上发生的事件（源元素）ondragstart用于元素开始被拖拽ondrag元素正在被拖拽ondragend用户完成拖拽事件后释放目标后发生的事件:ondragenter当鼠标拖动目标对象进入到目标容器中触发该事件ondragover当某对象在另一个容器中被拖拽时触发该事件（已经从被拖拽进来，又开始被拖拽）ondragleave
2021-02-05 22:22:21
3408
2
原创 php如何上传文件并且将文件传到另一个文件中
php如何上传文件并且将文件传到另一个文件中注意：（我这边只针对一种文件上传格式，csv格式（也可以根据自己的情况进行更改），并且要有php服务器我这边用的phpstudy）1.要上传文件我们需要用到一个html文件，用来简单布局，下面是html部分<!doctype html><html> <head> <meta charset="utf-8"> <meta name="description" con
2020-11-23 21:19:59
304
原创 php与数据库连接如何实现数据的顺序和倒序
php与数据库连接如何实现数据的顺序和倒序这边，我简单用到了一个a标签用来传入order中的值，将order中的值传到地址栏中当点击倒序或者升序时将order值赋给在php代码中定义的order,然后修改sql语句就可以了详细代码展示：<?php if(isset($_GET['order'])) //判断order中是否有值 { $order=$_GET['order']; //如果有值就将当前的值赋给变量$order } else
2020-11-05 23:17:55
1905
原创 用php实现数据分页显示
如何用php将数据库中数据在页面上分页显示实现它的分页显示主要用到了sql语句limit 限制它的显示条数下面代码中有显示解释说明：（查看注释）<?php $link=mysqli_connect("localhost","root","root"); //链接数据库 mysqli_select_db($link,"test"); mysqli_query($link,"set names 'utf
2020-11-05 21:40:14
3623
1
原创 php实现搜索框链接数据库数据
用php实现搜索框实现检索数据中的内容我这边使用的phpstudy中的数据库并在数据库中预设几条信息，在php代码中加入一个搜索框和一个搜索按钮，当在页面中输入某些信息时，自动检索，我这边用搜索人的名字为例（字段是name）<?php $search = $_POST['search']; //接收搜索框中的内容 $link = mysqli_connect("localhost:3306","root","root");//数据库端口的连接 mysqli_sele
2020-11-01 23:36:25
6031
1
原创 用phpstudy创建数据库并在php中连接数据
如何实现，在phpstudy中创建数据库，并在php中取得数据，在网页中显示出来。首先第一步：（启动apache和数据库）第二步：在软件管理中打开数据库软件打开数据库并在数据库中创建数据库和表等操作（在我的博客中有详细介绍如何创建），这边我创建好一个数据库test并创建好一个sql表，命名为stu。第三步：这块儿，我们打开php，在php中连接数据库<?php $link = mysqli_connect("localhost:3306","root","root");//数
2020-10-29 21:52:35
7476
2
原创 如何用在php中连接数据库
如何在php中连接数据库1.先建立一个php文件，这边我建立一个命名为mysqlconnect的php文件这个文件要建立在phpstudy文件中的www的文件下2.然后，我们打开phpstudy 在首页，我们开启我们的Apache和MySQL两个服务都打开后，我们进入右边的“软件管理”然后找到SQL_Front安装，安装成功后点击管理进入数据库进入页面后：这边我们打开属性，查看localhost的信息，然后记住属性下的用户名和密码以及端口，如果直接进去的话，我们也可以在左上角看到“文
2020-10-24 21:39:58
3324
1
多样的进度条.html
2020-04-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人