- 博客(44)
- 收藏
- 关注
RSS订阅原创 数组对象封装成树形结构
原数组：const treeData = [ { id: "zw", parentId: "1", title: "政务", key: "0-0" }, { id: "bszn", parentId: "zw", title: "办事指南", key: "0-0-0-0" }, { id: "yqfk", parentId: "zw", title: "疫情防控", key: "0-0-0-1" }, { id: "bsznadd", parentId: "bszn", title:
2021-07-15 09:02:21
273
原创 防抖，节流，深拷贝
防抖 // 防抖 function anti(fn,wait){ var timer=null; return function(){ if(timer){ // 清除定时器 clearTimeout(timer); } let that = this;
2021-06-01 19:52:23
119
转载 vuex的结构及核心属性
vuexvuexvuex的核心属性vuex原理图vuex的结构vuex 的实例对象vuex 的statevuex 的mutationsmutation的基本用法提交载荷 payload以对象的形式提交mutationmapMutations 辅助函数vuex 的getters访问gettersgetters的参数mapGetters 辅助函数vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式（可以理解为对数据进行统一的管理）vuex的核心属性一共五个核心属性： state, mu
2021-04-26 15:42:21
214
原创 vue 路由的使用
Vue路由vueRouter路由的配置路由跳转命名路由动态路由路由传参嵌套路由vueRouter路由的配置引入vue-rotuer.js 文件<script src='vue.js'></script><script src='vue-router.js'></script>创建路由组件模板每个组件必须存在一个唯一的根元素const 组件名 = { template:`组件模板`}创建路由配置path属性： 匹配的路
2021-04-23 11:54:21
401
原创 vue 的组件
vue组件vue 的组件组件的注册全局注册组件名组件中的data属性局部注册组件的传值方式组件的关系组件父子通信组件子父通信$on() 和 $emit()$emit()用法$on()用法子父通信vue的插槽插槽概念插槽的分类默认插槽具名插槽作用域插槽插槽的默认值v-slot指令的简写组件标签和HTML标签的区别生命周期钩子函数动态组件vue 的组件组件是可复用的 Vue 实例，且带有一个名字：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、comp
2021-04-23 11:49:22
94
原创 nodejs 处理用户的请求
nodejs 处理用户的请求nodejs 处理用户的请求get 请求post 请求nodejs 处理用户的请求get 请求get请求的数据拼接在url地址后边， 以? 作为连接， 多个数据之间使用 & 符号连接获取用户传递的数据通过 query 字段获取const http = require('http')const url = require('url')http.createServer((req, res) => { // 获取用户传递的数据 let
2021-03-19 14:24:21
191
原创 js连接mysql的使用方法
mysqlmysqlmysql 安装mysql 使用结果result 理解常用的sql语句mysqlnodejs 中使用 mysql 链接访问数据库mysql 安装当前路径下cmd输入npm install mysql (在当前项目下安装mysql包)npm i mysqlmysql 使用在 指定的 js 文件中引入 mysql 进行相关配置// 1 引入const mysql = require('mysql');// 2 创建链接配置const conn = mysql.crea
2021-03-19 14:22:49
22858
2
原创 nodejs常用模块
nodejsnodejsnodejs 介绍nodejs 模块nodejs 搭建服务器nodejs 的 url 模块nodejs 的 fs 文件系统对文件的基本操作读流和写流nodejs 的路由nodejs 搭建一个静态资源服务器nodejsnodejs 介绍nodejs运行在服务器端的js; 非阻塞I/O; 基于谷歌的V8引擎nodejs 模块内置模块第三方模块自定义模块nodejs 搭建服务器需要借助 http 模块 搭建服务器const http = require('htt
2021-03-18 09:38:41
949
原创 git的使用方法
Git1、什么是gitGit是一个免费、开源的版本控制工具。2、什么是版本控制版本控制是一种记录一个或若干个文件内容变化，以便将来查阅特定版本修订情况的系统。系统具体功能记录文件所有的历史变化。随时可以恢复到任何一个历史状态（版本）多人协作开发错误恢复版本控制的工具SVN 集中式Git 分布式3、下载和安装下载：官网下载 https://git-scm.com/国内较快地址 https://npm.taobao.org/mirrors/git-for-wind
2021-03-09 14:02:44
115
原创 面向对象；构造函数；原型对象
构造函数构造函数1.什么是构造函数2.为什么要使用构造函数如何封装一个构造函数3.构造函数的执行过程4.构造函数的返回值5.与普通函数的区别5.1调用方式的不同5.2 返回值不同5.3 作用的不同原型对象对象的封装混合模式（构造函数+原型 模式）`__proto__`原型链继承使用call()方法实现继承特点：使用prototype实现继承组合式继承构造函数1.什么是构造函数定义：在js中，使用new关键字来调用的函数，被称为构造函数。构造函数的作用：创建对象。2.为什么要使用构造函数假如需要创
2021-03-01 18:42:50
162
原创 数组的扩展：forEach；map()；Array.from()，对象扩展方法
数组的扩展数组的扩展forEachmap方法Array.from()Array.of()copyWithin()find()和findIndex()keys(),values(),entries()for...of循环includes()includes方法与indexOf()方法的区别对象扩展方法Object.assign()浅拷贝深拷贝同名属性用在数组上数组的扩展forEach格式：//第一个参数为函数 //函数的第一个参数 是遍历的当前元素 //函数的第二个参数 当前元素的下标
2021-02-25 20:38:01
381
原创 函数扩展，函数参数的默认值，箭头函数
函数扩展1.函数参数的默认值作用域2.rest参数2.1 基本用法2.2 rest参数和arguments对象的区别3.箭头函数3.1 定义3.2 语法3.3 其他写法3.4 箭头函数中this指向1.函数参数的默认值ES6之前，不能为函数的参数设置默认值，只能在代码中进行判断function show(a,b){ if(typeof b === "undefined"){ b = 0; } console.log(a,b);}show(1);ES6的
2021-02-24 20:34:46
158
原创 变量的结构赋值
变量的结构赋值1.什么是解构2.数组解构不完全解构不完全结构3.对象解构赋值方法解构注意点4.字符串解构5.函数参数的解构赋值6.用途6.1 交换变量的值6.2 从函数中返回多个值6.3 函数参数的定义1.什么是解构ES6中，按照一定的模式，从数组或对象中提取值，对变量进行赋值。这个过程叫做解构赋值。2.数组解构const arr = ["诺手","蝎子","劫","EZ","女坦"];let nuo = arr[0];let lailai = arr[1];let jie = arr[2];
2021-02-24 20:03:13
130
原创 ES6简介，let关键字,const基本用法
let1.ES6简介2.let关键字2.1 不存在变量提升2.2 暂时性死区2.3 不允许重复声明3.块级作用域3.1 为什么需要块级作用域缺点1：内部变量可能会覆盖外层的变量缺点2：for循环中的计数变量泄露为全局变量。3.2 ES6块级作用域4.案例const1.基本用法1.2 必须初始化1.3 一般变量名大写1.4 也有块级作用域1.5 不存在变量提升1.6 不可重复声明1.7 对于数组和对象中的元素进行修改，不算对常量的改变1.ES6简介ECMA是一个标准 JavaScript是ECMAScri
2021-02-24 18:43:39
167
原创 this指向
1.this在每一个函数中，都有一个内置的变量 this。大部分情况下，这个this存储是当前函数的调用者。this的指向在函数定义的时候是确定不了的。只有函数执行的时候才能确定this到底指向谁。function fn(){ console.log(this)}fn() //windowobj.fn // obj2.几种情况1.全局变量中指向windowfunction show(){ console.log(this);//window}show()2.在对象的方法中
2021-02-23 20:23:54
82
原创 js，json字符串的使用方法，localstorage本地存储，cookie存储
目录josn字符串localstorage本地存储cookie储存josn字符串json字符串json格式的字符串“abc123truelkgsjhgo” 普通字符串“< h1>hgahgo< /h1>” html格式字符串键值对格式 键和值都需要用双引号去包括 ‘“name”:“yasuo”’json用途：在网络传输时使用。 比如前后端交互。不能够传输对象和数组的。只能通过字符串形式去传输数据。所以说我们如果要传输对象和数组，我们需要将其转换为字符串。
2021-01-25 19:14:13
405
2
原创 js使用正则，元字符。
使用正则正则概念正则概念js 最初就是用来做表单验证的什么是正则表达式：regular expression js中RegExp类表示正则表达式 它是一个描述字符模式的对象正则作用：1.用来验证字符串是否符合规则2.从字符串中获取一部分符合规则的内容...
2021-01-20 17:39:17
299
原创 用js制作游戏：扫雷，源代码
扫雷要求游戏的区域：9*9的区域方格可以打开与标记左键打开，显示数字，为周围格子的地雷数，右键标记地雷地雷随机分布踩到地雷时，游戏结束所有的地雷显示出来连锁开大空方格剩余地雷数与计时器游戏胜利条件所有的方格除了地雷都被打开了，则游戏胜利一个方格所包含的信息：坐标 x y是否是一个地雷周围的地雷数 = 9二维数组中存储的是周围的地雷数html格式代码<body> <div class="level"> <bu
2021-01-20 10:28:06
768
2
原创 事件对象：鼠标事件对象，获取浏览器尺寸，鼠标跟随事件，事件委托
事件对象事件对象获取元素的尺寸获取元素的偏移量获取浏览器窗口尺寸鼠标移动页面小块跟随移动事件传播机制冒泡和捕捉阻止事件传播事件委托事件对象事件绑定：元素节点.on+事件类型 = 匿名函数；事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。获取事件对象：在标准浏览器中。直接在事件处理函数上定义一个形参。会在事件触发的时候，由浏览器自动传递实参。IE低版本window.event在标准浏览器下也可以使用兼容写法：var event = event || window.event;
2021-01-19 20:47:21
164
原创 js节点操作，js事件：键盘；事件浏览器事件；鼠标事件
js节点操作表格的添加删除节点操作创建节点元素节点：document.createElement(“标签名”);返回值：新的元素节点创建完成后，需要插入到页面中才能看到文本节点document.createTextNode(内容);插入节点node.appendChild在父节点的最后添加一个新的子节点。node.insertBefore(新节点，参考节点)在父节点的参考节点前添加一个新的子节点。如果参考节点为null，则在父节点的最后添加新的子节点删除节点父节点.remo
2021-01-19 19:21:02
203
1
原创 js ，DOM节点，制作点名器
DOM节点document页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。 根节点。html页面中最大的元素节点。根元素节点。元素节点html标签文本节点每一段文本内容都是一个文本节点包含 换行 和 空格一般来说作为元素节点的子节点存在。属性节点：属性节点不能单独存在，必须依赖于元素节点。注释节点页面中的注释，作为说明文本使用户。自定义获取元素节点方法 function elementsByClassName(node,classSt
2021-01-17 22:06:27
128
原创 js中浏览器网址的相关信息：location；navigator；history。浏览器的滚动。
location对象location对象：里面存储了和网页地址所有内容有关的信息。https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1http https 传输协议www.baidu.com 域名?fr=aladdin 查询字符#2_1 hash（锚点定位）location对象属性：href：地址信息。跳转页面：location.href = “XXX”;search：查
2021-01-09 10:58:31
294
原创 Js定时器的应用，用于写倒计时，时钟，计时表。BOM对象。
定时器在js中定时器有两种1，setInterval()2，setTimeout()setInterval()格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);【注意】可以写执行的代码，也可以直接传入函数。返回值：启动定时器时，系统分配的编号关闭定时器的方式：1.关闭页面。2.clearInterval();【注意】 clearInterval函数需要一个参数：定时器的编号。setTimeout（）只在指定时间后执行一次关闭：clearT
2021-01-08 19:23:14
258
原创 js对象Object，，日期时间的应用
对象对象是指一个具体的事物。万物皆对象。一个具体的事物一般都会有行为和特征。对象的行为------js对象的函数对象的特征------js对象的属性JavaScript中的对象JavaScript中的对象可以看做生活中具体事物的抽象。js对象是属性+函数的集合。属性：可以是基本数据类型，也可以是引用数据类型。创建一个对象使用new关键字类创建 var hero = new Object();使用字面量 var hero = {}新增属性
2021-01-08 18:41:27
300
原创 js的函数应用
函数function作用：1.简化代码2.方便维护3.提高开发效率4.提高了代码的复用性，减少代码冗余格式：function 函数名（参数…）{函数执行的代码}【注意】函数先定义后调用分类：内置函数（官方提供的函数，系统自身拥有函数）alert();document.write();console.log();parseInt();parseFloat();自定义函数根据参数和返回值的不同，可将函数分为四种。1.无参数无返回值2.有参数无返回值3.无参数有返
2021-01-06 16:12:57
196
原创 JavaScript数组。
数组当我们需要处理一组数据时，一定性定义很多变量，比较难处理。这个时候我们就需要用到数组。概念：数组：一组数据的集合。其中每个数据被称为数组的元素。在数组中存放任意类型的数据。数组是将一组数据存储到单个变量名下的方式。数组声明三种声明1.通过new关键字创建数组。2.省略new关键字创建数组3.字面量赋值示例： var arr = new Array('holle', 10, 8, true, 40); var arr = Array('holle',
2021-01-05 20:06:15
77
原创 JavaScript流程语句
程序的三大流程语句顺序：从上往下执行。选择：根据不同的情况，执行相应的操作。循环：重复做一件事情。顺序：最基本最简单的程序流程结构。选择格式： if(条件表达式){ //条件为true时，执行的代码 }else{ //条件为false时，执行的代码 }【注】小括号中可以写任何表达式，但是推荐使用条件表达式。默认为双分支。else可以省略，省略之后变成单
2021-01-05 17:19:14
68
原创 JavaScript运算符的运用
数学运算符常见的数学运算符 + - * / 余数：% 指数：**多个数字和字符相加时，注意顺序不同，结果也会不同 var a = 3 + 4 +'5' ; 结果75 var a = '3' + 4 + 5 ;结果345余数运算符%返回前一个运算云被后一个运算元除之后得到的余数。5%2=1 得出的余数为1。【注】运算结果的正负号是由第一个运算元的正负号决定的。指数运算符 **2**2 2的平分，二次方平常运算符：左结合指数运算符：右结合数值运算符，负
2020-12-30 17:48:26
160
原创 JavaScript入门，js基础教学
JS入门js的书写位置内嵌式使用的是Script标签，该标签可以写在html文档中的任何位置【强调】一般情况下，我们应该将其写在head标签中。外链式通过script标签的src属性，引入外部的js文件。常见错误写法：< script src=“js/demo.js”>alert(“看看能不能用”);< /script>不要在同一个Script标签中同时使用内嵌式与外链式。如果设置了src属性，Script标签中的内容就会被忽略。外链式的优
2020-12-29 20:10:26
452
原创 移动端网页比例缩放，，scss入门。
相对单位这里就先说一下rem，vw,vh。remem:相对单位，它需要一个参考属性。当前元素的字体大小。rem：相对单位 root em。 参考值为：HTML根标签的font-size的值。rem布局的原理：动态修改html根标签中的font-size值。实现方式：通过js通过vw。rem想要真正实现比例缩放还是要使用vw。vw百分比布局缺点：计算百分数不方便。多层嵌套时使用不方便。vw：1vw = 屏幕宽度的百分之一。vh： 1vh = 屏幕高度的百分之一。
2020-12-25 20:43:01
602
2
原创 html媒体查询，同一个网页，在不同的条件下，使用不同的样式。
媒体查询简述设备：屏幕：PC 手机端打印机屏幕阅读器尺寸：常见尺寸 320-420之间响应式网页：同一个网页，在不同的条件下，使用不同的样式。rem/百分比：等比例缩放。【注】使用min-width时，通常将小的条件放在前面。使用max-width时，通常将大的条件放在前面。实现方式：内嵌式格式：@media 设备名 逻辑关键词（and , not）（条件）{样式；}外链式:通过link标签引入样式，再通过media属性设置样式引用的条件。< link
2020-12-24 18:59:33
644
原创 网页中三栏布局的常用方法：圣杯布局，双飞翼布局，弹性盒子布局三栏。
圣杯布局利用浮动定位进行布局<header>头部</header> <div class="flote"> <div class="center">中间</div> <div class="left">左</div> <div class="right">右</div> </div> <footer>尾
2020-12-24 08:52:54
235
原创 HTML5—新语义元素使用及兼容，BFC解决曾经遇到的问题
H5常用标签属性HTML5语义元素兼容性BFC应用如何创建BFCBFC的作用HTML5语义元素什么是语义元素?一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: < div> 和 < span> - 无需考虑内容.语义元素实例: < form>, < table>, and < img> - 清楚的定义了它的内容。H5新语义元素：< header>：表示网页的头部。通常是一些导航信息或者标题。<
2020-12-22 17:22:37
95
原创 CSS3 弹性盒子的常用属性
弹性盒子flex 弹性盒子用弹性盒子来实现居中弹性盒子与浮动比较flex声明flex-direction属性flex-wrap属性justify-content属性align-items属性align-self属性，用于单个元素flex-grow属性flex-shrink属性flex-basis属性复合写法flex的用法order属性flex 弹性盒子用弹性盒子来实现居中传统方法是绝对定位来实现的。用弹性盒子更简单更方便。绝对定位：实现居中：用弹性盒子来实现：达到的效果和绝对定位的效
2020-12-21 20:44:31
4650
原创 css3动画案例，滤镜的各个使用比较
css动画案例，用案例看出其用法动画复合写法案例，制作音乐盒滤镜滤镜阴影与盒子阴影的对比。动画动画通过@keyframs定义动画。在指定元素中，通过animation属性来调用动画。定义动画格式：@keyframes 动画名{from{ 初始帧}to{结束帧}}【注】动画名不要起关键词，最好见名知意。动画的调用：通过animation属性来调用动画。示例animation-name：动画名称animation-duration 执行一次动画的完成时间。
2020-12-17 20:14:49
194
原创 css3中2D与3D页面的过渡与转换，，制作立方体相册源代码
2D的过渡与转换过渡2D转换-缩放转换位移。旋转倾斜过渡过渡，2D转换transition 过渡之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。transition-property:指定过渡的属性。all为指定所有属性都有过渡效果。 必须要有transition-duration: 过渡的时间单位可以是s或者ms。 必须要有transition-delay:指定过
2020-12-17 14:40:01
335
1
原创 CSS背景的常见问题
CSS背景的常见问题背景色背景图背景色背景系列background属性。background-color 设置元素的背景颜色。background-img 将图片设置为元素的背景。background-color：颜色的表示方法：单词red bluergbred green blue 三原色 饱和度 0-25516进制0-9 a-f #ff0000所有的#aabbcc的形式，都可以简写为#abc。常用的颜色：#000 黑色#fff 白色#f00 红色#222
2020-12-17 13:28:32
261
原创 CSS清除浮动与定位的使用方法
浮动1.清除浮动的方法1.方法一给父元素设置高度示例先看下没有清除的效果：<body> <div class="father"> <div class="son1"></div> <div class="son2"></div> </div></body>css样式 .father{ background-c
2020-12-10 23:05:10
1196
原创 css盒子模型与盒模型的浮动
CSS盒子1.盒子2.内边距3.边框4.margin外边距5.父子盒模型6.外边距塌陷7.嵌套盒子的外边距塌陷8.盒模型9.标准文档流行内块元素1.行内块元素与块级元素2.按显示分类3.浮动4.脱标5.字体围绕效果6.收缩7.浮动的嵌套1.盒子盒子：容器盒子模型 英文： box model。最常见的盒子是div span盒子中的区域：content宽 width px content高 height content内边距 padding边框 border外边距 ma
2020-12-09 20:44:13
763
原创 CSS常用文本样式
css样式css样式1.继承2.层叠权重的选取属性3.important文本字体样式1.行高2.字体大小3.字体4.字体加粗5.字体样式6.文本溢出7.段落对齐方式8.文本缩进9.文本修饰10.单词间距11.字母间距12.大小写转换13.文本垂直对齐方式css样式1.继承继承性：继承属性是由父级添加的属性进行继承的。有一些属性给父类或祖先元素设置后，其后代元素也会继承该样式，这就叫做继承性。继承性是从当前元素开始，一直到最小的元素。后代元素能够继承来自祖先元素的文字样式。这些属性包括：colo
2020-12-08 20:45:56
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人