- 博客(58)
- 收藏
- 关注
RSS订阅原创 Vue的生命周期
Vue官网给出的关于生命周期的图示：var vm = new Vue({ el:"#app", data:{ num : 10 }, beforeCreate(){ console.log("beforeCreate") console.log(this.$data) }, created(){ console.log("created") console.log(this.$dat
2020-08-01 16:12:22
156
原创 Vue组件的使用
组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。一、全局注册Vue.component('componentNew', { /* ... */ })第一个参数为组件名，第二个参数为配置项，是一个对象的结构。全局注册的组件可以用在任何新创建的 Vue 根实例 （new Vue）的模板中。二、局部注册var vm = new Vue({ el : '#app', components:{
2020-08-01 15:14:26
231
原创 基于node.js使用redis
Redis（Remote Dictionary Server )，即远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。redis在对数据的读写上速度非常快，被许多公司所使用。且支持许多语言，在node.js上也可以使用。使用前的准备熟悉node.js的人都知道操作数据库需要使用npm下载模块，redis也不例外。下载命令npm i redis连接数据库redis数据库在读写数据前需要进行连接操作，设置
2020-07-25 14:55:00
356
原创 mongoDB环境配置和基本命令
mongoDB安装好后还需要进行环境配置：这里以window10系统为例1.在此电脑属性中找到“高级系统设置”打开2.打开环境变量找到Path并进行编辑操作，将mongoDB安装目录下bin文件夹的路径添加进去基本命令:1.连接mongod --dbpath 数据库文件夹路径2.创建数据库use DATABASE_NAME如果数据库不存在，则创建数据库，否则切换到指定数据库。3.删除数据库db.dropDatabase()删除当前数据库，默认为 test，可以使用 db 命
2020-07-19 14:44:59
277
原创 js异步加载的三种方式
js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载，用到再加载，不用不加载。异步加载又被称为非阻塞加载，浏览器在下载JS的同时，还会进行后续页面处理。我们可以封装一个自己的异步加载方式来实现按需加载：function loadScript(url, callback){ var script = document.createElement('script'); script
2020-07-19 13:42:02
423
原创 node常用模块
一、httphttp模块主要用于创建http server服务,并且支持更多特性不缓冲请求和响应处理流相关createServer()函数用来创建一个HTTP服务器，并将 requestListener 作为 request 事件的监听函数。const http= require("http");const server = http.createServer();server.on("request",(request,response)=>{...})二、path用于对路
2020-07-12 22:21:34
164
原创 使用node搭建本地服务器
首先去node官网下载安装好node，查看官方文档可以知道node有哪些功能，node中有非常多的内置模块，用于解决不同的问题。一、引入node模块组件http模块http模块主要用于创建http server服务,并且支持更多特性不缓冲请求和响应处理流相关文件模块 ：fsfs模块用于对系统文件及目录进行读写操作。const http = require("http");const fs = require("fs");二、调用createServer()函数该函数用来创
2020-07-12 21:22:48
469
原创 ES6 Set数据结构
一、Set的基本用法ES6提供的Set集合用于存储不重复的数据Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();s.add(1);s.add(1);console.log([...s]);//[1]在上面代码中，创建了一个Set结构，然后通过add()方法向里面添加了两个相同的成员，最后输出的只有一个成员。结果表明 Set 结构不会添加重复的值。let obj = { a : 1, b : 2}const s = new Set(obj
2020-07-01 20:01:36
107
原创 ES6 class的继承
ES5中的继承通过修改原型链实现继承，而在ES6中class 可以通过extends关键字实现继承 ,要清晰和方便很多。class Animal{ constructor(x, y) { this.x = x; this.y = y; }}class Dog extends Animal{ constructor(x, y, type) { super(x, y); // 调用父类的constructor(x, y) this.type = type;
2020-06-26 14:31:06
154
原创 ES6 class的基本语法
在学习ES6 class类之前，先看下传统生成实例对象的方法（构造函数）。function Person(name, age){ this.name = name; this.age = age; this.intr = function(){ console.log(name + ' is ' + age + ' years old'); }}var p = new Person('jack', 20);p.intr();//jack is 20 y
2020-06-23 23:57:24
243
原创 jquery中的Ajax请求
原生js中发送Ajax请求最少需要4步，相对繁琐，而在jQuery中为我们封装好了一个工具方法用于发送Ajax请求。url：接口文档中给的链接type：请求方式dataType:‘jsonp’ jsonp跨域jsop跨域，只能使用get方法，如果我们设置的是post方法，jQuery自动跳转为get方法在jQuery中会先判断是否为同源请求，如果同源，那么这是的是get就是get，设置的是post就是post，如果不同源，无论设置什么都改为getdata：参数 ，可以写字符串，也可以写对象
2020-06-21 20:54:29
244
原创 TypeScript的基础类型
TS是什么？TypeScript是ECMAScript 2015的语法超集，是JavaScript的语法糖。JavaScript程序可以直接移植到TypeScript，TypeScript需要编译（语法转换）生成JavaScript才能被浏览器执行。一、JavaScript代码可以在无需任何修改的情况下与TypeScript一同工作，同时可以使用编译器将TypeScript代码转换为JavaScript构建你的第一个TypeScript文件在编辑器，将下面的代码输入到greeter.ts文件里：
2020-06-21 20:02:49
222
原创 对象属性的保护
一个对象的属性在没有做任何处理的情况下，是可以被轻易修改或删除，是非常不安全的。一些重要的数据，也不希望被随意修改或删除。每个属性都有四大特征使用Object.defineProperty()或Object.defineProperties()方法可以对四大特征进行修改。一、value实际存储属性值二、writable是否可以修改，默认是true改为false后在控制台对属性进行++操作时，值并未发生改变三、enumerable是否可被for in遍历 仅仅只能控制 for in 无
2020-06-14 15:30:58
222
原创 AJAX请求的4个步骤
一、创建XHR对象 XMLHttpRequest（W3C标准）现在的浏览器基本都支持XHR对象，但IE5,6是例外。这时候就需要兼容性的写法二、监听XHR状态改变事件onreadystatechange()事件用于监听状态的变化当readyState等于4时，处于完成状态，XMLHttpRequest对象读取服务器响应结束当status等于200时，表示请求成功。这时候就可以进行对数据的处理。三、创建请求消息，连接服务器第一个参数为请求方式，第二个参数为所连接的服务器，第三个参数t
2020-06-14 14:12:18
997
原创 php中的函数与循环
一、函数创建randColor函数 返回一个随机的表示颜色的字符串 rgb(0-255,0-255,0-255);mt_rand(min.max) 使用 Mersenne Twister 算法返回随机整数,包含首尾。二、for循环在php中+只能做数学运算 自动转换为数值再做计算字符串的拼接用 .（点）例：for循环实现九九乘法表三、foreach循环语法：foreach ($array as $value){要执行代码;}...
2020-06-07 20:48:25
231
原创 php的基本语法
注意：php里每一句结束的代码后面都必须加分号，不然就会报错。PHP 脚本以 <?php 开始，以 ?> 结束PHP 文件的默认文件扩展名是 “.php”。一、变量PHP 变量规则：变量以 $ 符号开始，后面跟着变量的名称变量名必须以字母或者下划线字符开始变量名只能包含字母数字字符以及下划线（A-z、0-9 和 _ ）变量名不能包含空格变量名是区分大小写的（$y 和 $Y 是两个不同的变量）二、数据类型1.值类型 string boolean int/integer nu
2020-06-07 20:11:47
152
原创 简述HTTP协议
HTTP简介http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。工作原理HTTP是基于客户/服务器模式，且面向连接的。典型的HTTP事务处理有如下的过程：（1）客户与服务器建立连接；（2）客户向服务器提出请求；（3）服务器接受请求，并根据请求返回相应的文件作为应答；
2020-05-31 17:22:16
352
原创 五层网络
一、应用层应用层是网络应用程序及其应用层协议存留的地方。应用层包含许多协议，例如HTTP(它为web文档提供了请求和传送)、SMTP(它提供了电子邮件报文的传输)和FTP(它提供了两个端系统之间的文件传送)。二、运输层负责为信源和信宿提供应用程序进程间的数据传输服务，这一层上主要定义了两个传输协议，传输控制协议即TCP和用户数据报协议UDP。TCP协议：一直传递，直至成功UDP协议：传递一次，不关心是否成功三、网络层负责将数据报独立地从信源发送到信宿，主要解决路由选择、拥塞控制和网络互联等问
2020-05-31 15:48:00
200
原创 jQuery获取元素尺寸的方法
一、.width()为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。内容宽度二、.height()获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。内容高度三、.innerWidth()为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。内容宽度 + 左右padding四、.innerHeight()为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括bord
2020-05-24 17:38:46
2342
原创 jQuery遍历DOM树方法
一、.next()取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。二、.prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。...
2020-05-24 16:03:35
629
原创 jQuery取值和赋值的基本方法
一、.html()获取集合中第一个匹配元素的HTML内容,也可以往匹配到的元素中写入内容。如果写入的内容为标签，会被解析到页面中。二、.text()得到匹配元素集合中每个元素的合并文本，包括他们的后代写入的标签不会被页面解析三、.size()返回的jQuery对象匹配的DOM元素的数量。.length也可以获取匹配的DOM元素的数量，在使用上是首选的。四、.addClass()为每个匹配的元素添加指定的样式类名参数可以是一个或多个样式名，也可以是函数进行有逻辑的添加五、.
2020-05-17 22:01:57
1304
原创 jQuery选择元素的方法
一、.get(index)通过jQuery对象获取一个对应的DOM元素。index从0开始，用来确定获取哪个元素。二、eq(index)根据索引获取jQuery对象当index为正数，索引从0开始当index为负数，索引从-1开始，表示从集合中的最后一个元素开始倒数三、.find()获取当前匹配的元素的所有后代元素中符合条件的元素返回的是jQuery对象参数可以是选择器字符串、jQuery对象、DOM元素四、.filter()筛选元素集合中匹配表达式 或 通过传递函数测试
2020-05-17 21:01:30
2963
原创 Bootstrap4卡片组件
.card卡片组件是BootStrap4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。一、定义卡片为元素添加.card类，定义一个卡片如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽二、页眉为元素添加.card-header类三、主体为元素添加.card-bodyr类四、页脚五、图片.card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中.
2020-05-10 19:14:35
1349
原创 Less变量
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言,使css更容易维护和扩展。他不是一个直接使用的语言，而是一个生成css的语言。Less可以运行在Node或浏览器端。1.普通变量以@开头定义变量，并且使用时直接输入@名称。2.选择器变量作为选择器的变量在使用的时候需要添加大括号{}，变量的前面可以添加选择操作符。3.属性变量属性变量使用的时候也需要添加大括号{}4.变量的作用域就近原则，不是指代码的位置，而是指代码的层级结构。如果是
2020-05-10 18:36:41
1309
原创 Bootstrap3栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。1、“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。2、你的内容应当放置于“列（column）”内，并且，只有“列...
2020-05-05 14:35:20
290
原创 Bootstrap3字体图标组件
如何使用因为Bootstrap已经把许多图标放在css样式里，使用时就只需要引用所需要的图标对应的图标类就行了。所有的图标都需要一个glyphicon基类和对应每个图标的类。不能和其他组件混合使用一个图标使用一个单独的元素。应该创建一个嵌套的<span> 标签，并将图标类应用到这个 <span> 标签上。只对内容为空的元素起作用图标类只能应用在不包含任何文本内容...
2020-05-05 13:45:52
591
原创 CSS3之animation 属性
与transition不同，animation动画可以自动触发，且可以定义每一帧的动画效果，在动画效果上优于transition。animation 属性是一个简写属性，用于设置六个动画属性：一、animation-name规定需要绑定到选择器的 keyframe 名称。二、animation-duration规定完成动画所花费的时间，以秒或毫秒计。三、animation-timing...
2020-05-05 10:45:26
288
原创 CSS3之媒体查询（Media Queries）
一、什么是媒体查询通过查询当前网页处于什么设备，让网页能够在不同的设备下进行预览。媒体类型：all：适用于所有设备。print：用于在打印预览模式下，在屏幕上查看的、分页的材料和文档。screen：主要用于屏幕。speech：主要用于语音合成器。二、如何使用1.为不同的设备引用不同的样式表2.根据不同的媒体特性有选择性的执行css片段中的部分内容3.关键词not：not关...
2020-05-05 09:55:11
246
原创 CSS3之transition(过渡)
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现过渡效果必须规定实现效果的元素和效果持续的时长过渡效果通常在用户将鼠标指针浮动到元素上时发生。一、transition简写属性，用于在一个属性中设置四个过渡属性。二、transition-duration规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是0。实现过渡效果必须要设置的属性。三、transition-pr...
2020-04-27 10:49:40
673
原创 CSS3之transform2D转换
transform作为CSS3新增的属性，可以应用于元素的2D或3D转换，支持对元素进行旋转、缩放、移动或倾斜。一、translate（移动）translate(x,y)：定义 2D 转换。translateX(x)：定义转换，只是用 X 轴的值。translateY(y)：定义转换，只是用 Y 轴的值。二、rotate（旋转）rotate(angle)：定义 2D 旋转，在参数中规定...
2020-04-27 10:05:26
283
原创 CSS hack用法详解
CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。原理：使用CSS属性优先级解决兼容性问题。友情提示：尽量找到通用方法而减少对CSS hack的使用，大规模使用CSS hack会带来维护成本的提高以及浏览器版本变化而带来类似hack失效等系列问题。一、属性级hack在样式属性名或者属性值的前后加...
2020-04-19 13:35:25
2034
原创 nth-child()和nth-of-type的区别
nth-child()和nth-of-type都是伪类选择器p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。p:nth-of-type(2) 选择属于其父元素第二个p元素的每个p 元素。这是摘自W3School对这两个选择器的解释，都是找父元素上的子元素，但是区别就很大了。要搞清楚两个的区别就需要理解两个的用法下面为我为了区别两个选择器所写的案例对比A...
2020-04-19 11:44:54
406
原创 HTML5表单新增内容
新的HTML5表单较之HTML4.01表单在type属性上就新增了许多值,算是对HTML4.01表单内容的完善吧。但新增的这些框的样式还是一样的丑，很少用到，基本上还是自己写样式。HTML5在表单上还新增了许多的属性placeholder：输入提示语required：必须输入autocomplete=“off” 是否自动记录之前提交的数据 默认值为on 一般会关闭设置为offmaxle...
2020-04-13 10:31:35
129
原创 使用百度地图JavaScript API GL绘制轨迹动画
使用百度地图JavaScript API GL其实十分简单，只需去官网申请密钥（ak），具体使用操作官网已经写的非常清楚了。下面展示下我在学习过后自己写的一个轨迹动画第一步：引入js文件打码处填入自己申请的密钥就行了第二个js文件我是把需要的文件下载到了本地，这个文件就是用来实现轨迹动画的第二步：创建地图第三步：绘制轨迹动画轨迹动画实质上就是运动的折线，所以只需设置path中地...
2020-04-12 10:57:33
2639
7
原创 let，var，const的使用区别
一、let声明变量1.let声明的变量不会挂在window中，不会造成全局变量的污染2.新增了一个块级作用域{}，以前只有函数作用域，全局作用域3.let是不允许重复声明4.let不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before initialization）二、const声明常量1.跟let完全相同...
2020-03-22 10:06:17
187
原创 异步加载和加载时间线
一、异步加载异步加载又叫非阻塞，浏览器在加载执行 js 同时，还会继续进行后续页面的处理。异步加载js，按需加载，用到的时候再加载，不用到不加载。异步加载的三种方式：1.defer属性：在文档完成解析完成开始执行，并且在DOMContentLoaded事件之前执行完成。仅支持IE，最好是外部的script使用。2.async属性：加载完就执行，只能加载外部脚本，是W3C的标准。高版本的浏...
2020-03-11 09:40:03
141
原创 原型链
一、proto__和constructor每一个对象数据类型天生自带一个属性__proto，属性值是当前实例所属类的原型(prototype)。原型对象中有一个属性constructor, 指向函数对象。function Person(){}var person = new Person();console.log(person.__proto__ === Person.prototype...
2020-02-14 15:05:31
49
原创 函数相关面试题
一、在javascript中，(B)变量在函数外声明，并可从脚本的任意位置访问A.局部B.全局C.typeOfD.New1.局部变量 一般定义在函数体内，有函数作用域，外部不能访问内部局部变量。2.全局变量，在任何函数之外声明的变量，而全局变量在任意函数中都是可见的。3.typeof 判断变量数据类型4.new用于创建一个实例化对象二、以下对call() 和 apply() ...
2020-02-13 16:22:09
554
原创 作用域和作用域链
一、作用域作用域分为全局作用域和局部作用域全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。局部作用域：在固定的代码片段才能被访问。var a = 10;var b = 20;//全局作用域function fun1(){ var a = 100; var c = 30;//fun1作用域 function fun2(){ var a ...
2020-02-13 12:46:51
99
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人