- 博客(106)
- 收藏
- 关注
RSS订阅原创 Promise 与 async/await
二级标题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
2022-04-05 19:21:17
460
原创 鼠标拖动改变div 宽度
鼠标移动改变div 大小/宽度如图在这里插入图片描述<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2022-02-12 16:10:08
1763
原创 【vue】路由与组件使用的方法（步骤）
router:根据不同的地址跳转到不同的页面一、vue-router的使用1.下载路由模块 npm vue-router --save2.在router.js中 先引入路由 import Router from ‘vue-router’ 接着通过use在vue全局注册使用 Vue.use（Router） 最后将路由表导出 export default ne...
2019-08-04 17:17:35
1287
原创 Vue 响应式系统的底层的细节
1.如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 gette...
2019-08-04 16:08:07
160
原创 webpack开发配置API代理解决跨域问题-devServer
1. 一个完整的webpack配置代理代码设置代理的前提条件：1、需要使用本地开发插件：webpack-dev-server。2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。3、webpack版本： 3.0、4.0亲测有效一个webpack配置信息module.exports = { //... devServer: ...
2019-08-04 15:48:36
1981
原创 Mock js 的理解以及应用
官网介绍：http://mockjs.com/1、安装1.1、安装：yarn add mockjs -S输入：yarn add mockjs -S（在当前项目下安装 Mock） myapp 是项目名称1.2、看网站的示例，实例就是语法1.3、创建文件夹在项目下创建 》 mock文件夹 》再创建 index.js总结mock.mock()参数1：请求地址 选...
2019-08-02 23:16:45
6680
原创 HTML和css(2+3)知识点汇总
HTML和css汇总 第一天:html基础（语法，定义，标签，空标记，常规标记，HTML5文档结构，标签有哪些默认的属性），w3c标准。 第二天：css基础，CSS语法，概念。css样式表{语法，区别（优先级）},选择器。 选择器： 元素选择器/类型选择器 类选择器/class选择器 ID选择器 伪类选择器 群组 包含/后代 子选择器 通配符 伪元素:...
2019-08-02 22:52:12
189
原创 npm中的 i g s
npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象ornpm i -S module_name npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies...
2019-08-02 20:45:28
679
原创 关于 vue-cli 脚手架安装，以及对接项目做的工作， 项目复制使用的问题（后期持续更新）
vue的脚手架安装 vue cli1、安装前端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。2、查看node的版本号...
2019-08-02 20:03:58
800
原创 购物车总价的计算出现多位小数问题...(持续更新...)
在小数相加时，可能会产生多个小数位。如下所示：var x=1+1; //2var x=1.20+1.11; //2.31var x=1.56+1.76; //3.3200000000000003导致上述原因是因为Javascript的数字类型是以64位的IEEE 754格式存储的。在用的时候一定要小心，测试要到位。解决方法：1、 加上toFixed()函数就可以...
2019-08-01 23:27:46
1436
原创 在此总结一下this向的问题
关于this的指向问题概要在javascript当中每一个function都是一个对象，this是javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用this出现的场景分为四类1、有对象就指向调用对象2、没调用对象就指向全局对象：window是js中的全局对象3、用new构造就指向新对象4、通过apply或者call或bind来改变thi...
2019-08-01 21:06:15
120
原创 案例模拟使用数据（用到 json-server）（继续更...）
1、安装json-server全局安装 cnpm install json-server -g2、安装完成后可以用 json-server -h 命令检查是否安装成功，成功后会出现3、在项目内创建一个data问价夹，在该文件夹内创建data.json文件在data.json 文件内写在该文件的data 数组中写 需要模拟是的数据4、执行 json-server...
2019-08-01 11:32:33
294
原创 json-server---基本使用
json-server—基本使用一、前后端并行开发的痛点前端需要等待后端开发完接口以后 再根据接口来完成前端的业务逻辑二、解决方法在本地模拟后端接口用来测试前端效果 这种做法称之为构建前端Mock三、json-server的基本使用 (1)、全局安装 cnpm install json-server -g(2)、准备json文件 (data.json) json-se...
2019-08-01 11:27:54
910
原创 Vuex 公共状态管理模式（最好的非父子组件传值方案）
Vuex:公共状态管理模式。最好的非父子组件传值方案1、cnpm install vuex -S;2、引入vue3、引入vuex4、使用vuex vue.use(vuex)Vuex中常用的5个属性 01 state: 用来存储公共的状态 辅助函数： mapState 书写方式有2中 ...
2019-08-01 11:24:55
290
原创 浅谈前端工程化
前端发展简史石期时代最初的前端页面都是一些静态页面，人们看到的网页就像报纸一样。青铜时代后端为主的时代，往往页面都是后端利用一些模版引擎来完成页面；对于有大量页面的项目，前端在写页面需要构造一定的环境，比如jsp，php等。铁器时代随着ajax的诞生，浏览器可以主动从服务端拉取数据，前后端分离的时代到来，SPA应运而生，前端可以处理一些复杂的交互、业务逻辑。工业时代随着前端扮演的角...
2019-07-31 20:05:22
376
原创 export ，export default 和 import 区别 以及用法
首先要知道export，import ，export default是什么ES6模块主要有两个功能：export和importexport用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6...
2019-07-31 17:52:07
264
原创 javaScript遍历对象总结（持续更新）
javaScript遍历对象总结在日常工作过程中，我们对于javaScript遍历对象，今天抽空把经常用到的方法小结一下，方便今后参考使用！1、使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).var obj = {'0':'a','1':'b','2':'c'};Object.keys(...
2019-07-29 15:01:32
571
原创 vue中的render函数介绍
vue中的render函数介绍1、render函数是什么 2、render函数怎么用render函数是什么 简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。 当使用render函数...
2019-07-27 14:56:42
297
原创 webpack
一、初识webpack1、什么是webpack?WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用2、webpack工作的方式把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开...
2019-07-27 10:24:02
201
原创 vue组件中data必须是一个函数的原因
vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。...
2019-07-26 14:46:23
1396
原创 innerHTML与outerHTML 的区别？
1.innerHTML<body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div> <script type="text/javascript"> var hj=document.getElementById("test").innerHT...
2019-07-25 22:35:00
774
原创 promise的理解已经利用promise实现图片的预加载（顺序加载）
1、先介绍一下面向对象的函数图片预加载写法var num=3;//这个定义为3是因为图片名称定义，在给图片起名一般是其他是固定，同一个位置修改为不同数字var list=[];//空数组用来存加载完成的init();function init(){var img=new Image(); //创建一个Image对象img.addEventListener("load",loadHand...
2019-07-24 22:18:42
4172
1
原创 选项卡案例【vue】
选项卡案例【vue】<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib...
2019-07-23 19:34:30
126
原创 object.defineProperty 基本使用
object.defineProperty 基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2019-07-23 15:22:16
140
原创 for in 与Object.keys()的区别
for in 与Object.keys()的区别function Person(name, age) { this.name = name; this.age = age;}Person.prototype = { sex: "男"}var man = new Person("张三", 18);console.log(Object.keys(man));//...
2019-07-23 15:08:20
1617
原创 this的指向
一、this的指向1.谁调用该函数this的指向就指向谁2.回调函数中的this的指向永远指向window3.this指向当前的作用域，即离他最近的大括号4.箭头函数的this的指向会指向离自己最近的作用域5.构造函数中的this指向实例化对象6.箭头函数本身是没有this的指向7.在严格模式下，普通函数或匿名函数的this指向undefined，但是定时器和箭头函数中的this还是...
2019-07-19 11:26:49
127
原创 bind、call、apply三者的区别,还有bind()的封装
1.bind、call、apply三者的区别： 1）bind的返回值是一个函数体，不会被立即调用 2）call、apply会立即调用，第一个参数都是用来改变this的指向，两者的区别是前者传递参数的时候是一个一个传递，后者是以一个数组的形式传递 3）bind、call、apply这三个方法都属于函数（Function）的方法2.bind的封装：bind的特点：(1)返回一个函数体(...
2019-07-19 11:19:29
248
原创 服务端渲染与客户端渲染的区别（优缺点）
服务端渲染与客户端渲染的区别服务器端渲染？互联网早期，用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将 html 拼接好的，然后返回给前端完整的 html 文件，浏览器拿到这个 html 文件之后就可以直接解析展示了，这也就是所谓的服务器端渲染。客户端渲染？而随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，可能是添加更多功能的组件，复杂性更大，另外，...
2019-07-19 10:03:35
2785
原创 MVC模式、加密、jsonwebtoken
MVC模式、加密、jsonwebtoken一、MVC模式（架构思想）M:model层，主要是数据的增删改查V:view层，主要是视图的展示C:controller层，主要负责业务逻辑二、加密（md5加密、sha256加密）1.sha256加密：以一个随机字符串的形式将需要加密的字符进行加密，安全性比md5加密方式要好2.sha256加密步骤： 1）引入加密模块 const...
2019-07-18 23:36:49
155
原创 当输入www.baidu.com的时候按下回车会发生什么事情？
1.DNS解析 域名解析2.找到相对应的服务器3.TCP三次握手4.找到相对应的资源库5.返回相对应的页面并进行页面解析6.解析完毕后,返回客户端
2019-07-15 22:18:01
736
原创 关于报文
HTTP报文的结构https://blog.csdn.net/kongmin_123/article/details/82154780HTTP请求报文和HTTP响应报文https://www.cnblogs.com/sjm19910902/p/6423181.htmlHTTP 协议报文解析https://blog.csdn.net/chf1142152101/article/detail...
2019-07-15 21:57:34
107
原创 什么是模块化？模块化的好处
什么是模块化简单地说，模块化就是有组织地把一个大文件拆成独立并互相依赖的多个小模块。模块内部有许多私有属性，只向外暴露一部分公开的接口(如可以修改私有属性的方法等)模块化是一种处理复杂系统分解为更好的可管理模块的方式。所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数。模块化开发使代码耦合度降低，模块化的意义在于最大化的设...
2019-07-15 21:16:37
7642
原创 单页面开发与多页面开发的优缺点
**单页面应用（SPA）：**指只有一个主页面的应用，包含（ html, js, css）。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。单页面的优点：1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小2，前后端分离3，页面效果会比较...
2019-07-15 20:52:49
557
原创 传统的DOM渲染方式？
1.什么是DOM渲染？DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。2.DOM渲染的演化过程，大致可以分为可以分为三个阶段：纯后端渲染纯前端渲染服务端的js渲染结合前端渲染（1）.纯后端渲染：采用这样的渲染方式，就是每一个页面中，在Chrome中展开得到的DOM，和服务器返回的DOM是基本一致的（可以通过查看网页源代码来得到服务器返回的DOM）。当然，这里是“...
2019-07-15 20:29:56
184
原创 用cloneNode 克隆，解决id问题/方法 深复制和浅复制修改id的方法
cloneNode 使用函数方法解决深复制中id重复的问题// var ul1=clones(ul,true);// document.body.appendChild(ul1);// 深复制修改id// function clones(sourceElem,deep,target) {// var elem;/...
2019-07-14 23:04:38
1972
2
原创 点击产生4位随机数，验证码设置
点击产生四位随机数字母与数字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
2019-07-12 10:03:37
737
原创 左右案例+小圆点的轮播图+无时间
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* *{ margin: 0; ...
2019-07-09 17:40:57
184
原创 DOM+JS+轮播图+无时间
DOM+JS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; ...
2019-07-09 14:46:23
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人