时光无声￡-CSDN博客

原创 vue组件render函数中作用域插槽使用方式

父组件使用render函数写的,子组件的书写方式随意,想在父组件中使用子组件时写一个作用域插槽.

2024-04-24 22:52:08 99

原创连接本机MongoDB报错MongoNetworkError/MongooseServerSelectionError

修改MongoDB配置文件。

2024-01-20 15:54:25 751

原创单行文本溢出省略和多行文本溢出省略

单行文本溢出省略和多行文本溢出省略

2023-02-01 16:59:17 141

原创自定义SSL证书(react项目开发环境中使用https)

在react项目开发环境中使用https,自定义ssl证书

2022-08-05 10:48:11 972

原创 JSON兼容IE7及以下

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <script type="text/javascript" src="js/json2.js"></script> <sc

2022-01-22 10:26:32 240

html5标签<video>:Html5提供的播放视频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面<audio>:Html5提供的播放音频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面 <source> 视频： type='video/webm; codecs="vp8, vorbis"' type='video/ogg; codecs="theora, vorbis"'

2022-01-21 15:38:50 166

原创 dataset(方便取自定义属性&更改属性),dom元素可编辑

1.dataSet<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="test" data-baidu-qq="qq"> </div> </body> <script type="text/javascr

2022-01-21 10:02:26 689

原创渐变(线性,径向)

线性渐变为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。-默认从上到下发生渐变linear-gradient(red,blue);-改变渐变方向：（top bottom left right）linear-gradient(to 结束的方向,red,blue);-使用角度linear-gradient(角度,red,blue);-颜色节点

2022-01-19 21:34:36 89

原创文本边框,文本方向,边框图片

文字描边https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-text-stroke只有webkit内核才支持：-webkit-text-stroke文字排版direction:控制文字的方向一定要配合unicode-bidi:bidi-override;来使用边框图片https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-imageborder-image-source

2022-01-19 21:27:00 250

原创 axios笔记

1. 文档https://github.com/axios/axios2. 是什么前端最流行的ajax请求库react/vue官方都推荐使用axios发ajax请求3. axios的特点基本promise的异步ajax请求库浏览器端/node端都可以使用支持请求／响应拦截器支持请求取消请求/响应数据转换批量发送多个请求4. axios常用语法axios(config): 通用/最本质的发任意类型请求的方式axios(url[, config]): 可以只指定url发get请

2022-01-13 17:22:49 84

原创 ajax笔记

ajax笔记

2022-01-13 16:30:57 78

原创 ES(6-11)

规范集成(ES6-11)

2022-01-11 17:22:28 731

原创工具函数库

工具函数库

2022-01-10 17:23:48 202

原创 mouseenter和mouseleave&mouseover和mouseout

mouseenter和mouseleave 没有事件冒泡(很干净) 不会作用到子元素mouseover和mouseout 有事件冒泡(不干净) 会作用到子元素共同点: 作用于这些事件的元素不受定位影响mousemove和mouseclick 在dom0默认是冒泡阶段在dom2默认也是冒泡阶段,但是可以改为捕获阶段...

2021-09-14 09:17:02 107

原创自定义工具函数库并发布到npm中央仓库

1.1 安装node1.2.创建项目# 创建一个空的项目文件夹: nicecode-utils# 在文件夹下执行命令npm init -y#1.3.下载依赖包npm i webpack webpack-cli -D#1.4.配置webpackwebpack.config.jsconst path = require('path')module.exports = { // 模式 mode: 'development', // 也可以使用 production // 入

2021-08-04 17:12:20 440

原创 webpack中的package.json文件

{ "name": "webpack_code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core":

2021-08-04 15:44:05 750

原创 webpack性能优化

webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR优化代码调试source-map生产环境性能优化优化打包构建速度oneOf 当多个loader对同一个文件类型处理时,只有一个loader可执行babel缓存多进程打包externals 不打包某个第三方库,然后手动进行cdn引入dll 将第三方包生成单独的文件优化代码运行的性能缓存(hash-chunkhash-contentha

2021-08-04 15:43:06 80

原创生产环境配置

npm install --save-dev mini-css-extract-pluginnpm install --save-dev postcss-loader postcss-preset-env npm install --save-dev optimize-css-assets-webpack-plugin npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

2021-08-04 15:40:19 95

原创 Promise面试题

1setTimeout(()=>{ console.log(1) },0) Promise.resolve().then(()=>{ console.log(2) }) Promise.resolve().then(()=>{ console.log(4) }) console.log(3)1结果:2setTimeout(() => { console.log(1)

2021-08-03 15:13:18 105

原创线程与进程&浏览器内核模块组成&事件处理机制& H5 Web Workers

线程与进程进程:程序的一次执行, 它占有一片独有的内存空间可以通过windows任务管理器查看进程线程:是进程内的一个独立执行单元是程序执行的一个完整流程是CPU的最小的调度单元关系一个进程至少有一个线程(主)程序是在某个进程中的某个线程执行的浏览器内核模块组成主线程js引擎模块 : 负责js程序的编译与运行html,css文档解析模块 : 负责页面文本的解析DOM/CSS模块 : 负责dom/css在内存中的相关处理布局和渲染模块 : 负责页面的布

2021-07-31 11:09:23 98

原创对象高级(对象的创建模式,继承模式)

对象的创建模式Object构造函数模式var obj = new Object();obj.name = 'Tom'obj.setName = function(name){this.name=name}对象字面量模式var obj = { name : 'Tom', setName : function(name){this.name = name}}工厂模式function createPerson(name, age) { //返回一个对象的函数===>工厂

2021-07-31 10:31:35 49

原创函数高级(原型链,执行上下文,作用域链,闭包,内存溢出,内存泄漏)

原型与原型链所有函数都有一个特别的属性:prototype : 显式原型属性所有实例对象都有一个特别的属性:__proto__ : 隐式原型属性显式原型与隐式原型的关系函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象实例对象的__proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值原型对象即为当前实例对象的父对象原型链所有的实例对象都有__proto__属性, 它指向的就是原型对象这样通过

2021-07-31 10:06:24 86

原创基础总结深入

数据类型的分类和判断基本(值)类型Number ----- 任意数值 -------- typeofString ----- 任意字符串 ------ typeofBoolean ---- true/false ----- typeofundefined — undefined ----- typeof/===null -------- null ---------- ===对象(引用)类型Object ----- typeof/instanceofArray ------

2021-07-31 08:24:44 58

原创 DOM细节

DOM1. 节点及其类型: 1). 元素节点 2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 4). document 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert('hello world');">Click Me!</button> 缺点: ①.

2021-07-31 08:23:25 54

原创 JavaScript基础知识&获取指定元素的当前样式&事件委派&BOM介绍

1.in 运算符作用: 判断一个对象中是否有指定的属性 (包括对象中的原型,以及对象中的原型的原型直到Object的原型为止) 用法: “属性名” in 对象hasOwnProperty() 这个方法也可以用于判断一个对象中是否有指定的属性用法: 对象.hasOwnProperty(属性名) 如果有就返回true,否则返回false(这个方法只用于判断对象本身的属性,不包括原型上的)2.for … in遍历对象用法:for(var 变量 in 对象){ 变量:就是对象中的

2021-07-30 11:13:44 138

原创 css预处理器之less

less less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/bootstrap中less教程：http://www.bootcss.com/p/lesscss/less中的注释以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中

2021-07-30 10:42:44 291

原创检测ie9及以下的方法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //检测ie9以下的版本可用(包括ie9) console.log(isIE(5)); function i

2021-07-30 09:52:18 154

原创多棱柱(可以自己设置多少条边)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*n边形的外角和为360 360/n n变形的内角 180 - 360/n*/ *{ margin: 0; padding: 0; } html,body{ height

2021-07-30 09:34:37 171

原创文字光斑特效

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; background-col

2021-07-30 09:06:55 91

原创两列布局(利用BFC特性)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ overflow: hidden; } #left, #main{ padding-bottom

2021-07-30 08:57:41 82

原创解决ie6底下fixed失效的问题

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; overflow: hidden; } body{ h

2021-07-30 08:48:31 77

原创黏连布局(常见移动端,PC端也可)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="t

2021-07-30 08:42:01 95

原创双飞翼布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ overflow: hidden; } #wrap .middle,#wrap .left,#wrap

2021-07-30 08:33:56 69

原创圣杯布局终极版

圣杯布局1.两边固定中间自适应2.中间优先加载3.中间完整显示(页面设置最小宽度 )1. 别人想的<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 个人觉得这种方式麻烦!!! */ *{ margin: 0; p.

2021-07-30 08:24:14 58

原创自定义表单按钮形状

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } label{ float: left; position: relative; width: 200px;

2021-07-29 14:49:35 135

原创 CSS选择器&CSS声明的优先级

CSS选择器CSS最新选择器规范css的全称是Cascading Style Sheets样式表的组成样式表由规则组成规则由选择器和声明块组成声明块由声明组成声明由css属性和css属性值键值对组成1. 基本选择器 /*通配符选择器*/ * { margin: 0; padding: 0; border: none; } /*元素选择器*/ body { background: #eee; } /*类选择器*/ .list { list-style: squar

2021-07-29 14:42:39 94

原创 inline-block元素垂直水平居中

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 400px; border: 1px solid;

2021-07-29 12:37:29 420