- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue中v-model的两种实现方式
1、标准方式：自定义输入组件Vue.component("my-input", { template: ` <input type="text" @input="inputHandle" :value="value"> `, props: ["value"], methods: { inputHandle: function (e) { this.$emit("inp
2021-03-16 21:05:00
611
原创 ESLint和Prettier基本使用
ESLint介绍:eslint可以检查的问题大体上分为两类：语法错误：语法错误通常是需要手动修正的错误格式错误：通常使用Prettier进行格式化，此时就有可能出现Prettier和ESLint冲突的情况,即经过Prettier格式化后的代码无法通过ESLint的检验其次eslint的规则也可以分为以下三类：推荐规则：通过以下配置指定的建议使用的规则"extends": "eslint:recommended"可fix的规则：可以通过fix命令自动修正其他规则..
2021-03-16 14:29:11
644
原创 js深度比较
let obj1 = { a: 10, b: { x: 10, y: 20, }, }; let obj2 = { a: 10, b: { x: 11, y: 20, }, }; function isObject(obj) { //将null排除在外 .
2021-03-15 11:00:37
477
1
原创 抓包
使用场景：移动端H5页，查看网络请求，需要用工具抓包window一般用fiddlerMac OS一般用charles使用:1、手机和电脑连接同一个局域网2、将手机代理到电脑上3、手机浏览网页，即可抓包4、查看网络请求网址代理https...
2021-03-14 17:46:36
84
原创 BOM
Navigator:浏览器信息//判断是否是指定浏览器类型 userAgent简称UAnavigator.userAgent.indexOf('Mozilla')//浏览器宽高screen.width/screen.heightLocation
2021-03-13 20:31:00
70
原创 for-of异步循环
如果使用foreach遍历处理异步代码不会等待异步代码的执行，一次输出所有异步结果function muti(num) { return new Promise((resolve) => { setTimeout(() => { resolve(num * num); }, 1000); }); } var arr = [1, 2, 3]; arr.forEa
2021-03-13 16:55:09
1520
原创 rem响应式布局
定义:rem是一个相对单位，相对于根元素font-size大小。例如：html{font-size:10px;}1rem=10px如何实现响应式布局:首先确定设计稿大小，例如750像素，如果将设计稿10等分则1rem=75px将设计稿中的像素换算为rem单位，例如：设计稿中150像素大小的元素为2rem然后根据屏幕大小更改rem的值，当屏幕大小为500px时，1rem=50px;当屏幕大小为1000px时，1rem=100px当rem的值发生变化的时候以75为基准换算好
2021-03-12 19:50:40
240
原创 JSMath对象
1、随机数生成[0,1)之间的随机数：Math.random[n,m]之间的随机整数：function selectFrom(lowerValue, upperValue) { var choices = upperValue - lowerValue + 1; return Math.floor(Math.random() * choices + lowerValue);}var num = selectFrom(2, 10);alert(num); // 介于 2 和 10 之间
2021-03-08 20:05:49
59
原创 JS深拷贝
简化版只拷贝对象：var a1 = { name: 'zhang3', age: 18, sex: 'man', children: { name: 'zhang4', age: 18, sex: '' } }function DeepCopy(Origin) {
2021-03-08 18:44:47
132
1
原创 JS递归
样例：求n的阶乘写法一：function a(n) { if (n > 1) { return a(n - 1) * n } return 1 }这样写缺点1是递归内部的函数名跟外部的函数定义名直接联系在一起了，如果出现以下这种情况就会报错：函数定义名被赋值空function a(n) { console.log(n)
2021-03-08 16:57:18
59
原创 响应式图片srcset未生效
<img srcset="1.png 1920w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 1920px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />问题：调节窗口大小没有触发响应式变更图片原因：在浏览器有缓存中有更高分辨率.
2021-02-26 21:36:52
743
1
原创 vue-router小例子
<!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" /> <...
2021-02-22 15:00:32
97
1
原创 vue-router
1、定义组件：router-link定义子路由路径，router-view给子路由占位// 定义 APP 根组件 const App = { template: `<div> <!-- 头部区域 --> <header class="header">传智后台管理系统</header> <!-- 中间主体区域 --> <div cl
2021-02-22 13:52:59
113
1
原创 vue-购物车小例子
<!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" /> <t...
2021-02-22 11:21:19
140
1
原创 css布局
1、一行中包含图片，让行内元素垂直居中默认情况下图片跟文字的基线对齐给图片添加vertical-align:middle属性指定图片与文字的中线对齐：文字的位置依赖图片的位置，图片的位置不变为文字盒子指定line-height:50px;属性是文字在盒子中居中:盒子位置依赖文字位置，文字位置不变<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
2021-02-21 22:18:28
70
1
原创 vue-图书列表管理小例子
<!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" /> <...
2021-02-21 17:41:31
150
原创 vue-tab选项卡小例子
<!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>Do.
2021-02-20 22:59:56
150
2
原创 string基本包装类型
String 类型的每个实例都有一个 length 属性，表示字符串中包含多个字符var stringValue = "hello world";alert(stringValue.length); //"11"访问指定索引处的字符或字符编码：charAt()、charCodeAt()var stringValue = "hello world";alert(stringValue.charAt(1)); //"e"以数组的形式访问字符var stringValue = "he
2021-02-19 12:24:27
797
1
原创 闭包
闭包：闭包是指有权访问另一个 函数作用域中的变量的函数function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value1 < value2){ return -1; } else if (value1 > va
2021-02-18 23:04:41
62
原创 JSON
JSON定义:JSON 不支持变量、函数或对象实例，它就是一种表示结构化数据的格式。JSON表示范围:JSON能表示对象、数组、字符串、数字、布尔、null类型，类型为undefined的值在解析时会被跳过。JSON的序列化：将JS对象转换为JSON字符串。早期采用eval()函数序列化JSON对象，但是eval存在风险可能会被注入恶意代码，替代方案：shim：https://github.com/douglascrockford/JSON-js。ECMAScript 5定义了全局的J.
2021-02-17 22:21:17
55
原创 webpack打包
1、首先安装webpack,如果你使用 webpack 4+ 版本，你还需要安装 CLI。npm install --save-dev webpack@<version>npm install --save-dev webpack-cli在package.json的scripts属性里面配置快捷指令 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "bu.
2021-02-11 19:49:41
79
1
原创 css 三栏布局实现方式
三栏布局：左右两边固定，中间自适应1、左右两边浮动，中间用margin给左右两边留位置<style> .left{ float: left; width: 200px; background: green; height: 200px; } .center{ margin: 0 300px 0 200px; background: yellow; he
2021-02-08 19:11:10
64
原创 element-ui遇到的问题 版本2.15.0
1、使用table渲染数据的时候如果数据中包含children属性会默认渲染树形数据。如果不想要这个默认行为可以设置Table属性:tree-props="{ children: 'children2' }"
2021-02-05 21:02:57
862
原创 bcrypt插件
一、安装:bcrypt依赖以下运行环境:node-gyp、windows-build-tools、python。windwos-build-tools里面貌似带有python，如果没有的话需要自行安装。python安装好后需要设置环境变量npm install -g node-gypnpm install --global --production windows-build-tools...
2020-11-25 16:52:58
156
原创 BOM中的Location.hash用法
一、当前页面:可以通过location.hash进行设置 location.hash = 'sss' console.log(location.hash);设置后可以通过location.hash访问会将该值拼接到url上用法:在要跳转的html元素上设置name属性，然后设置location.hash值就可以实现页面内跳转。注意：如果跳转后如果location.hash不清空就无法继续跳转。<html><head>
2020-11-25 15:19:35
366
原创 MongoDB常见错误
1、Schema hasn't been registered for model "User"：在对两张表Article和User进行关联后调用author时报错const mongoose = require('mongoose');mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true, useUnifiedTopology: true }).then(() => { console.
2020-11-21 17:38:16
676
原创 JS常见算法
1、数组去重var arr = [1, 2, 3, 4, 5, 6, 3, 2]; var ansarr = []; ansarr = arr.filter(function(val, key) { return arr.indexOf(val) == key;});
2020-11-12 16:50:01
130
原创 DOM
一、获取元素在集合中下标的方法（伪代码）。1、设置自定义属性Element.setAttribute(name,value)2、通过为对象添加属性的方式element.index = value3、通过each方法collection.each(index,val)
2020-11-10 20:20:03
172
原创 viewport表现
1、做轮播图时，当设置meta标签 不设置user-scalable或者user-scalable=yes时，并且ul中包含多张图片时无法拖动到最后一张图片。user-scalable = true时则可以。暂不清楚原因。<meta name="viewport" content="width=device-width, initial-scale=1.0">...
2020-11-02 10:15:17
61
原创 web API细节
1、利用for循环注册多个事件时不要用下标i访问事件源而是用this访问事件源，因为注册完毕后就超出了i的作用域，当触发事件的时候会报错。
2020-10-13 15:40:14
48
原创 css不常见的表现(待解答)
1、设置body的background-image时如果background-position为上下位置为center会缩放背景图片的高度。
2020-10-13 13:25:19
40
原创 input和line-height以及margin的交互
line-hegith效果:1、存在文本子元素，并且未设置高度时，line-hegiht可以使文本元素垂直居中对齐、设置元素高度。line-height对input的影响:1、line-height会将input视为文本元素，并使其垂直居中，但是因为Input存在默认外边距边距(无法通过margin:0消除，可以用float消除)，所以看起来并不是居中对齐。2、当input的父元素设置了line-height时：如果input的margin-top/bottom值小于line-height为
2020-09-21 13:10:58
669
转载 CSS自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-space:normal; wi
2020-09-19 10:19:38
188
原创 CSS中伪元素的细节
1、伪元素表现为行内元素。2、伪元素必须包含content属性，否则不会显示。3、content中的内容不为空并且没有设置高度时，伪元素的高度会受到父级元素line-height影响。4、content中的内容位置受父级元素line-height影响。...
2020-09-10 18:32:05
241
原创 CSS中的定位：relative和absulote、fixed的表现
1、relative：不是脱标的。（1）相对定位的边偏移始终相对自身移动。2、absulote：脱标。（1）绝对定位的边偏移相对于最近的定位父元素移动。（2）当绝对定位的元素宽度/高度为百分比时相对于最近的定位父元素赋值。...
2020-09-10 17:59:15
1102
原创 CSS单行文本无限滚动
思路:把一行文本复制两份以达到循环往复的效果。注意点:文本的起始位置必须是左对齐。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g
2020-09-10 12:06:53
994
原创 CSS中的steps()函数表现
step(arg1,arg2)arg1:是一个数字表示动画的状态从0%到100%经历多少步。arg2：值可以为start或end,默认为end。情形1：end表示在一个周期的结尾赋值，当值为end时会由默认状态0%到第一次变更值作为第一步，并忽略掉最后一步。该过程分为以下几个阶段:第一阶段：默认状态到第一次赋值之前(不显示文字，此时的width大小为0)第二阶段：第一次赋值到第二次赋值之前(显示"前"，此时的width大小为20px)第三阶段:第二次赋值到第三次赋值之前(显示".
2020-09-08 14:28:39
2637
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人