敲起来blingbling-CSDN博客

原创 Array.map()方法获取数组中处理后的内容

Array.map()方法获取数组中处理后的内容arr.map() 方法返回一个新数组，数组中的元素为原始数组arr中的元素调用函数处理后的值。map() 方法会按照原始数组元素顺序依次处理元素。注意：map() 不会对空数组进行检测map() 不会改变原始数组const list = [ { id: 1001, name: 'Alice', gender: 'female', score: 90 }, { id: 1002, name: 'Max', gender: 'f

2022-01-14 16:26:39 647

原创报错 Duplicate keys detected

可以看到控制台把所有重复的key都打出来了。因为这里我们遍历使用的key是它的 index ，也就是它的索引 0，1，2 ，所以共有2对 0，1，2 这样的index ，就出现重复了。这里将第二个便利中的key加上了前缀 abc，这样一来它的key就为 abc-0 ，abc-1 ，abc-2 了，不会与上面的0，1，2 重复了。（2）将它们放到不同的父元素下。

2021-11-10 17:23:02 73030

原创 vue指向src目录的别名@和~

默认会有‘@’别名，指向src目录。使用别名一般三种情况：在js中用，在css中用，在html文档内用：js中：import {getName} from '@/util/name'css中使用，需要加入“~”，并且不要写成字符串：{ background: url(~@/assets/img/04_2.jpg); background: url('~@/assets/img/04_2.jpg'); //错误写法，不能写成字符串！}html中使用，可以加入 ~ 可加可不加。 <

2021-11-10 16:51:13 1173

原创 attribute和property

attribute是元素标签的属性。<input id="input" value="testValue"><script> let input = document.getElementById('input'); console.log(input.getAttribute('value')); // testValue console.log(input.value); // testValue</script>input 的 value a

2021-11-10 16:43:25 670

原创 vue项目创建注意点项目结构

1 创建项目注意点[ ]可选命令，< >必须命令创建项目命令不使用中文和驼峰命名vue create test-projectnpm run serve 启动的是项目目录下 package.json 中的"script"属性下的"serve"命令: 开启服务器2 项目结构public 整个模块化项目服务器的根目录在地址栏 http://localhost:8080 后面直接加public下的文件名,可以直接访问此文件，http://localhost:8080 省略了

2021-11-10 16:39:20 714

原创 vue动态绑定class和style

动态添加style<div :style="s1">123</div><div :style="s2">123</div><div :style="s3">123</div><div :style="{ color: color1 , fontSize: fontsize1 + 'px'}">123</div><div :style="`color: ${color1}`">123</

2021-11-10 16:29:13 573

原创 pointer-event 和 cursor 属性在div上实现button的disabled禁用效果

当按钮是用div写的时候，不能够像button一样直接使用disabled属性，此时可以通过事件禁用样式 pointer-events: none; 和鼠标悬浮禁用手势样式 cursor: not-allowed; 来实现类似button按钮disabled属性效果；但是如果把这两个样式写在一个class里面，事件禁用样式会影响鼠标悬浮禁用手势样式，使得禁用状态无法显示。解决：将 cursor: not-allowed 写在外层div上<div class="A"> <d

2021-11-10 16:27:12 1957

原创 vue中transition实现过渡动画效果

vue中经常会有v-if条件渲染，v-show显示/隐藏，以及动态组件切换等范围区域的视觉变化，如果没有动画过渡效果，会显得有一些突兀。我们可以使用transition来实现过渡的动画效果。transition的几个css相关设置属性：v-enter：过渡1（从无到有）开始前v-enter-to：过渡1（从无到有）结束v-enter-active：包含v-enter、v-enter-to，在这里可以设置过渡时间、曲线等v-leave：过渡2（从有到无）开始前v-leave-to：过渡2（从有到无

2021-09-19 20:42:57 2465

原创前端vue中使用Element UI表单校验及密码复杂度校验组件

在使用表单提交数据时，表单校验可对输入数据进行验证，保证输入数据的格式正确。表单校验<template> <div class="container"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >

2021-09-19 17:17:49 3568 1

原创 typora 右击桌面新建Markdown File（.md文件）

平时经常用到的Typora，需要打开Typora写入内容再另存为才能在指定位置（例如桌面），生成一个Markdown File:而很多同学习惯平时一下子建很多新的空Markdown文件，统一重命名之后再一个一个进入里面写笔记，这时候迫切希望Markdown文件可以像新建文件夹一样，右击就能新建一个。接下来就介绍一下怎么右击就能新建Markdown文件。步骤：（1）快捷键 win+R，输入 regedit ，进入注册表编辑器（2）在注册表编辑器内搜索 .md（3）右击.md，点击新建，选择【项

2021-09-15 21:59:12 2151 1

原创时间格式处理转换为“刚刚”、“n分钟/小时前”、“一天前”等

function filterTime(time) { const getTimeStamp = (time = "") => { let date = time ? new Date(time) : new Date(); return Number(date.getTime().toString().substr(0, 10)); }; let timeStamp = getTimeStamp() - getTimeStamp(time.replace(/-/g, "/

2021-09-15 21:18:17 311

原创 url格式正则—test同一个内容时结果出现true和false交替问题

test( ) : 检索字符串中指定的值。返回 true 或 falsefunction fn(url) { var objExp=new RegExp('$https?:\/\/\\S+$$?=\\s|$$','gi'); console.log(objExp.test(url),objExp.lastIndex); objExp.lastIndex = 0 // 归零 if(objExp.test(url)){ console.log("网址正确！");

2021-09-15 21:13:12 731

原创微信小程序如何自定义组件

小程序中一个自定义组件由 json wxml wxss js 4个文件组成。1 创建自定义组件首先创建一个components文件夹，用于放置所有自定义的组件。2 基本配置mytoast.json（进行自定义组件声明）{ "component": true}mytoast.wxml<view class='wx_toast_container' hidden="{{!toastShow}}"> <view class='wx_toast_text'>{{to

2021-09-15 20:59:30 314

原创微信小程序首页加载的优化

冷启动如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。触发场景新用户第一个进入小程序用户已经进入过小程序，但小程序被销毁（原因：小程序被删除或小程序在后台等待时间过长，自动销毁了）首屏加载慢大部分原因是冷启动时加载的数据过多，需要依赖过多的服务端的接口数据等热启动如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。触发场景：用户打开了小程序，在小程序没有被销毁时再次打开小

2021-09-15 20:58:10 2762

原创微信小程序login流程

小程序可以通过官方提供的登录方式获取微信提供的用户身份标识，快速建立小程序内的用户体系。通过wx.login()来获取code然后调用wx.request()向服务端发起一个请求，即向登录api接口发送code换取openid和session_keylogin: function() { wx.login({ success: function (res) { console.log(res.code) //发送请求 wx.request({

2021-09-15 20:57:38 1531

原创小程序对应HTML常用标签

HTML微信小程序<div></div><view></view><h1></h1>...<h6></h6> <p></p><span></span><view></view><i class="icon"><icon></icon><iput type=...

2021-09-15 20:57:10 476

原创微信小程序里的rpx单位

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)iPhone5（宽320） 1rpx = 0.42px 　　 1px = 2.34pxiPhone6 （宽375） 1rpx = 0.5px

2021-09-15 20:56:10 396 3

原创小程序和vue的区别

1 生命周期相比之下，小程序的钩子函数要简单一些。vue的钩子函数在跳转新页面时，钩子函数都会触发；但小程序中，页面不同的跳转方式，触发的钩子并不一样。onLoad：页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow：页面显示每次打开页面都会调用一次。onReady：页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onHide：页面隐藏当navigateTo或底部tab切换时调用。onUnl

2021-09-13 21:21:40 337

原创 Node以及基于node的Express框架 + MongoDB

目录1 Node2 为什么要用node3 使用npm有哪些好处4 如何判断当前脚本运行在浏览器还是node环境中5 同步和异步的区别6 几种常见模块化规范的简介7 node怎么跟MongoDB建立连接8 Express9 Express + MongoDB初始化Express项目接入 MongoDB 数据库10 MongoDB常用命令11 关系型数据库和非关系型数据库关系型数据库非关系型数据库12 使用node解决跨域1 NodeNode 为我们提供了一个无需依赖浏览器、能够直接与操作系统进行交互的 J

2021-09-13 20:54:08 3312 2

原创移动端适配多种方案详细分析 em rem vw

目录基本概念1 像素2 设备独立像素3 设备像素比（device pixel ratio）4 分辨率5 viewport（视口）适配方案1 百分比2 rem3 vh/vw4 rem+vw/vh5 媒体查询@mediaAPP应用H5页面原生APP由于手机屏幕尺寸、分辨率不同，为了使得web页面在不同移动设备上有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。基本概念1 像素屏幕尺寸：对角线的长度（厘米）屏幕分辨率：横纵向上物理像素的个数（物理像素）物理像素：设备能控制显示的最小

2021-09-13 20:12:03 1298

原创手写防抖函数和节流函数

防抖函数function debounce(fn, delay) { var timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉（每次触发就重新计时） clearTimeout(timeout); // 然后又创建一个新的 setTimeout, 这样就能保证间隔时间内如果时间持续触发，就不会执行 fn 函数 timeout = s

2021-09-13 19:51:27 175

原创手写一个ajax

function Ajax(type, url, flag) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() // 声明一个XMLHttpRequest对象 xhr.open(type, url, flag) // 创建请求 (规定请求的类型、请求路径、是否异步处理请求) xhr.setRequestHeader('content-Type', 'application/x

2021-09-13 19:50:22 118

原创手写call，apply，bind方法

callFunction.prototype.myCall = function (obj = window) { // 不传参默认为window obj.fn = this const args = [...arguments].slice(1) const res = obj.fn(...args) delete obj.fn return res}var obj = { x: 10}function foo() { console.log(this); //

2021-09-13 19:49:42 221

原创手写一个promise

function fn(flag) { return new Promise((resolve, reject) => { if (flag) { setTimeout(() => { resolve(1) }, 1000) } else { reject(2) } })}fn(1).then((data) => { console.log(data); // 1s后输出1}).catch((e

2021-09-13 19:48:55 63

原创两个数组的交集和并集

let arr1 = [1, 2, 3, 4, 5, 5]let arr2 = [4, 5, 5, 6]// 交集let res1 = Array.from(new Set(arr1.filter(item => arr2.includes(item))))// 并集let res2 = Array.from(new Set([...arr1, ...arr2]))console.log(res1); // [4,5]console.log(res2); // [1,2,3,4,5,

2021-09-13 19:48:13 245

原创正则实现trim()功能

function myTrim(str) { let reg = /^\s+|\s+$/g return str.replace(reg, "")}console.log(myTrim(' asdf ')) // 'asdf'

2021-09-13 19:47:46 261

原创让某个div每n秒换一次背景

var imgs = ["a.png", "b.png", "c.png"];var x = 0;function timer() { x++; x = x % 3; // 超过2则取余数，保证循环在0、1、2之间（3张图） document.getElementById("bgImg").src = "./image/" + imgs[x]; // bgImg为目标div的id ./image是存放三张替换图片的路径} setInterval("timer()"

2021-09-13 19:46:59 331

原创解构赋值，实现两个变量的值的交换

let a = 1;let b = 2;[a, b] = [b, a]console.log(a) // 2console.log(b) // 1

2021-09-12 11:33:20 2103 1

原创 js查询字符串中出现最多的字符（reduce高级应用）

reduce高级应用：计算数组中每个元素出现的次数 { }var str = 'abcdaabc';console.log(str.split('')) // [ 'a', 'b', 'c', 'd', 'a', 'a', 'b', 'c' ]let resObj = str.split('').reduce((pre, cur) => { pre[cur] ? pre[cur]++ : pre[cur] = 1 return pre;}, {})console.log(resO

2021-09-12 11:32:44 492

原创 js数组去重

1 es6 Setfunction unique(arr) { return Array.from(new Set(arr))}let arr = [1, 2, 1, 3, 9, 4, 5, 3, 4, 6, 6]let res = unique(arr)console.log(res); // [ 1, 2, 3, 9, 4, 5, 6 ]Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组2 filter + indexOfindexOf() 方法可返回某

2021-09-12 11:31:45 80

原创 js冒泡排序

1、比较相邻的两个元素，如果前一个比后一个大，则交换位置2、比较完第一轮的时候，最后一个元素是最大的元素3、这时候最后一个元素是最大的，所以最后一个元素就不需要参与比较大小（ len - 1 - i）function fn(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { // 相邻元素两两对比，元素交换

2021-09-12 11:31:00 148

原创部分vue3.0 特性

目录一、一些小改变二、新特性1 片段2 组合式 API一、一些小改变1 destroyed 生命周期选项被重命名为 unmounted2 beforeDestroy 生命周期选项被重命名为 beforeUnmount3 data 选项应始终被声明为一个函数在 2.x 中，开发者可以定义 data 选项是 object 或者是 function：<script> const app = new Vue({ data: {

2021-09-12 10:56:32 121

原创 vue项目优化

目录一、代码层面的优化二、Webpack 层面的优化三、基础的 Web 技术优化vue项目的优化分为三部分：Vue 代码层面的优化webpack 配置层面的优化Web 技术层面的优化一、代码层面的优化1 v-for 遍历为 item 添加 key在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。2 v-for 遍历避免同时使用 v-ifv-for 比 v-if 优先级高，这意味着 v-if 将分别重复运行于每个 v

2021-09-12 10:51:52 6998

原创渲染函数render

render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码繁琐且大量重复，这时候就可以用 render 函数。简单的说，在vue中我们使用模板HTML语法组建页面的；使用render函数我们可以用js来构建DOM，方法：createElement，简写h。createElement 函数的作用就是生成一个虚拟dom节点，接着渲染成真实dom节点，并挂载到根节点上。...

2021-09-12 10:50:35 185

原创 vue核心数据驱动和组件系统

vue的两大核心：数据驱动、组件系统数据驱动：ViewModel，也就是数据的双向绑定，保证数据和视图的一致性。组件系统：一个页面或模块可以由多个组件组成。将常用的代码封装成组件之后，就能高度复用，提高效率，易于维护。组件的核心选项模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。方法（methods）：对

2021-09-12 10:50:04 281

原创组件化和模块化

组件：一个个小的单位，内部资源都是独立的，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。模块：就像是独立的功能和项目，可以调用组件来组成模块，多个模块可以组合成业务框架。为什么要组件化和模块化随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要把所有相同的地方都修改一遍，重复劳动，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改。所以如果项目比较复杂，可以极大简化代码量，提高开发效率，易于维护。...

2021-09-12 10:49:23 146

原创 $set方法为对象添加属性

为data中的某一个对象添加一个属性： this.student.age = 15如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。可以看出原来的name属性是有get 和 set方法的，而新增的age属性是没有的。新增的age属性并没有同步渲染到页面上，这是因为Vue最初实例化的时候，student中没有属性age，故而如果用 this.student.age 添加属性的话Vue不会把他作为响应式监听。而使用 this.$set 新添加的属性值才会被Vue监听到并且同步渲染到页面上：

2021-09-12 10:44:30 1332

原创 scoped 样式私有化

scoped表示它的样式只作用于当前模块，是样式私有化。在vue单文件组件中，为了防止全局css类名重复，对 <template> <div class="aa"> 123 </div></template><style scoped> .aa { color: red; }</style>vue编译渲染完之后的结果：<template> <div data-v-2f

2021-09-11 16:11:27 215

原创动态组件以及keep-alive标签

目录动态组件keep-alive动态组件动态组件就是让多个组件使用同一个挂载点，并动态切换。动态绑定 is 来实现动态组件。<component :is="Abox"></component> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁，主要用于保留组件状态或避免重新渲染。keep-alivekeep-alive作用就是能够缓存不活动的组件。就是在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。一般情况下，组件进

2021-09-11 15:49:02 317

原创混入 (mixins)

场景运用：有两个非常相似的组件，基本功能相同，但又存在着足够的差异性。他们可能会共用一部分业务逻辑，但是页面结构又不同。这个时候就可以使用混入来让代码复用。局部混入首先创建一个 mixins 文件夹，然后再在里面创建一个mixins.js文件，然后再创建混入对象：const mixin = { data() { return { str: '你好' } }, created() { console.log("我是混入的生命周期函数") },

2021-09-11 15:46:42 272

空空如也

空空如也