明天也要努力的博客_JavaScript,Html/CSS,其他Web开发,Vue 2.x,uni-app,jQuery(5)

JavaScript 数组对象去重的几种方法

将要过滤的数据，将 arr 里面 city 重复的数据去掉（下面方法中用的arr都是这组数据）var arr = [ {id: 1,city: '南京'}, {id: 2,city: '南京'}, {id: 3,city: '杭州'}, {id: 4,city: '广州'}];1. 对象法：数组的 reduce 方法ie9以下不支持此方法var obj = {};var newArr = arr.reduce((prev,cur)=>{ obj[cur.city

JavaScript

javascript

前端

原创 2021-07-13 15:49:25 10000+阅读 1点赞

JavaScript中 Map Set详解

1. Map 和 Set1.1 MapMap: 一组键值对的结构，具有极快的查找速度。举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：var names = ['Michael', 'Bob', 'Tracy'];var scores = [95, 75, 85];给定一个名字，要查找对应的成绩，就先要在 names 中找到对应的位置，再从 scores 取出对应的成绩，Array越长，耗时越长。如果用Map实现，只需要一个“名字”-“成绩”的对照表，

JavaScript

javascript

前端

es6

原创 2021-07-13 15:49:24 587 阅读

Vue中使用定时器（setInterval、setTimeout）

js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout。注意：定时器需要在页面销毁的时候清除掉，不然会一直存在！ 1. 循环执行（ setInterval ）顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；语法： setInterval(code, milliseconds)； setInterva

Vue 2.x

vue.js

前端

原创 2021-07-13 15:48:39 3950 阅读

Vue中实现复制内容到剪贴板（引入使用 vue-clipboard2）

vue-clipboard2 github地址vue-clipboard2 npm地址 1. 安装并引入 npm install vue-clipboard2 --save // 全局引入main.js import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 2. 使用方法一 <template> &l

Vue 2.x

vue.js

前端

原创 2021-07-13 15:48:26 939 阅读

Element-ui 中表单（Form)验证数字值范围（大小）

方法一: 通过正则表达式实现 <template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-row> <el-col :sp

HTML CSS UI

前端

elementui

原创 2021-07-13 15:47:54 5215 阅读

Nodejs 入门基础

1. NodeJs 简介 Nodejs介绍Node.js 是一个 Javascript 运行环境(runtime)。它让 JavaScript 可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与 PHP、JSP、Python、Ruby 等后端语言平起平坐。Nodejs 是基于 V8 引擎，V8 是 Google 发布的开源 JavaScript 引擎，本身就是用于 Chrome 浏览器

node.js

后端

原创 2021-07-13 15:47:40 186 阅读

TortoiseGit 修改用户名和密码

在电脑下方输入框输入【控制面板】，然后打开控制面板。点击【用户账户】选项点击下【管理Windows凭据】选项在【普通凭据】里，找到我们的对应的git，点击下【编辑】按钮。修改下用户名和密码了，点击【保存】按钮即可总结1.首先，我们在电脑下方输入框输入【控制面板】，然后打开控制面板。2.接着，点击【用户账户】那个选项。3.然后，我们需要点击下【管理Windows凭据】

Tools

git

tortoisesvn

原创 2021-07-13 15:47:21 9914 阅读

解决 Element-ui中选择器（Select）因options 数据量大导致渲染慢、页面卡顿的问题

业务场景：服务端返回两万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我们把这个el-select优化一下,直接上代码。相关知识传送门：Vue实现自定义指令（directive）及应用场景Vue中实现函数的防抖、节流及应用场景 <template> <div class="content"> <el-sele

HTML CSS UI

前端

elementui

原创 2021-07-13 15:47:03 3950 阅读 1评论

Vue中实现右键自定义菜单

1. 原生方法1.1 完整代码<template> <div class="home">  <div class="test" v-for="item in menus" :key="item" @contextmenu.prevent="openMenu($event,item)">{{item}}</div>

Vue 2.x

vue.js

前端

Vue.js

原创 2021-07-13 15:46:46 3937 阅读 1评论

Vue中实现函数的防抖、节流及应用场景

1. 简介1.1 函数防抖(debounce)定义：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；(类似于王者荣耀回城效果~~）典型的案例输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理：函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。使用场景：搜索框搜索输入，最后一次输入完成后，再发送请求；手机号、邮箱的输入验证；window 触发

Vue 2.x

前端

vue.js

javascript

Vue.js

原创 2021-07-13 15:46:44 1324 阅读

Vue中实现静态文件下载（以下载表格为例）

应用场景：有时候我们需要下载的文件数量不多且内容是固定的不变的静态文件（如：模板之类），那么实现下载功能在前端就可以完成，不需要和服务端进行交互。如需下载内容较为复杂是动态文件，请移步传送门：Vue中实现文件流下载本文vue-cli 版本：3.x， 4.x1. 将待下载的文件放在 public 里public 文件夹下的文件并不会被 Webpack 处理，它们会直接被复制到最终的打包目录下。必须使用绝对路径引用这些文件，简单说 public 就是用来存放万年不变的文件。2. 组件中代码实现

Vue 2.x

vue.js

前端

Vue.js

原创 2021-07-13 15:46:43 4566 阅读

Vue混入（mixins）理解及应用

1. mixins 简介混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。1.1 mixins 理解组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。而 mixins 则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件

Vue 2.x

前端

vue.js

Vue.js

原创 2021-07-13 15:46:42 936 阅读

Vue中使用 WebSocket

1. WebSocket 简介前端和后端的交互模式最常见的就是：前端发数据请求，从后端拿到数据后展示到页面中。如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷。一种新的通信协议应运而生 WebSocket，它最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。WebSocket 其他特点：建立在 TCP 协议之上，服务器端的实现比较容易；与 HTTP 协议有着良好的兼容性；默认端口也是80和443，并且握手阶段采用 HTT

Vue 2.x

vue.js

前端

Vue.js

原创 2021-07-13 15:46:40 4339 阅读

Webpack中 SplitChunks 插件用法详解

前言 SplitChunks 插件是什么呢？简单的来说就是 Webpack 中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。提到前端优化，提取公共代码是必不可少的手段。在 Webpack 出现前，提取公共代码是人为去处理，而 SplitChunks 插件的作用就是通过配置让 Webpack 去帮你提取公共代码。Webpack创始人的

Webpack

前端

webpack

转载 2021-07-13 15:45:43 1248 阅读

Linux 系统安装 Node.js

node.js

Linux

前端

linux

centos

原创 2021-07-13 15:45:25 770 阅读

Linux 系统安装 Nginx

1. 前言系统平台：CentOS 7.x相关 shell 命令参考wget 安装Linux wget是一个下载文件的工具，用在命令行下。对于Linux用户是必不可少的工具，尤其对于网络管理员，经常要下载一些软件或从远程服务器恢复备份到本地服务器。如果我们使用虚拟主机，处理这样的事务我们只能先从远程服务器下载到我们电脑磁盘，然后再用ftp工具上传到服务器。这样既浪费时间又浪费精力，那不没办法的事。而到了Linux VPS，它则可以直接下载到服务器而不用经过上传这一步。wget工具体积小但功能完善，它支

Linux

Nginx

nginx

运维

原创 2021-07-13 15:45:24 207 阅读

Vue 2.x 面试题（2）

1. 讲一讲 MVVM MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。 2.

Interview

前端

面试

转载 2021-07-13 15:44:56 254 阅读

CSS3 面试题（1）

1. 介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin；低版本 IE 盒子模型：宽度 = 内容宽度（content+border+padding）+ margin； 2. box-sizing 属性用来控制元素的盒子模型的解析模式，默认为 content-b

Interview

面试

css3

前端

转载 2021-07-13 15:44:39 632 阅读

Vue中 computed 和 watch 区别及应用场景详解

在 vue 的项目中，我们时常会需要对 data 的改变做出处理，这时候就需要用到 watch 和 computed 这两个属性。既然都是数值改变触发改变的属性，他们之间又有什么异同呢？ 1. 计算属性 computed 特点：支持缓存，只有依赖数据发生改变，才会重新进行计算；不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化； computed 属性值会默认走缓存，计

Vue 2.x

vue.js

前端

原创 2021-07-13 15:44:18 2458 阅读 1收藏

Node.js 创建并封装静态 WEB 服务器

准备工作：准备好一个类似图片中这样的材料 1. 详细步骤创建 http 服务 // app.js const http = require('http'); // 加载http服务模块 http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});

node.js

前端

原创 2021-07-13 15:43:37 187 阅读

HTTP、浏览器面试题（1）

1. 浏览器存储的方式有哪些？数据生命周期数据存储大小与服务端通信 cookie 一般由服务器生成，可以设置过期时间 4K 每次都会携带在 header 中，影响请求性能影响 localStorage 除非被清理，否则一直存在 5M 不参与 sessionStorage 页面关闭就清理 5M 不参与 indexedDB 除非被清理，否则一直存在无限不参与补充：cookie 原本并

Interview

面试

前端

https

http

转载 2021-07-13 15:42:58 165 阅读

JavaScript 中 this 指向详解

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的 this 指向哪个对象。this的几种模式：方法调用模式下，this 总是指向调用它所在方法的对象，this 的指向与所在方法的调用位置有关，而与方法的声明位置无关（箭头函数特殊）；函数调用下，this 指向 window ,调用方法没有明确对象的时候，this 指向 window，如 setTimeout、匿名函数等；构造函

JavaScript

javascript

前端

原创 2021-07-13 15:42:28 218 阅读

JavaScript中 new 一个对象过程详解

要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤：创建一个新对象；将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；执行构造函数中的代码（为这个新对象添加属性）；返回新对象;1. new 操作符在有上面的基础概念的介绍之后，在加上 new 操作符，我们就能完成传统面向对象的class + new的方式创建对象，在JavaScript中，我们将这类方式成为 Pseudoclassical。基于上面的例子，我们执行如下

JavaScript

javascript

前端

原创 2021-07-13 15:42:27 625 阅读

JavaScript中 var、let、const 特性及区别详解

1. ES5 中 var 声明变量的弊端ES5 中其实给我们提供了两种声明变量的方法：var 命令和 function 命令。使用 function 命令声明函数这里不参与讨论，我们主要对比 var 命令。var 命令声明变量有三大特点：变量可以重复声明；变量声明会被提升；没有块级作用域；这三个特点使得 JS 代码的编写显得有些“随意”，不够规范，而且这样的语法逻辑也有悖常理，举两个例子：1.1 内层变量会覆盖外层同名变量我们用 var 声明一个全局变量 num 赋值为 1，之后在 s

JavaScript

javascript

es6

前端

原创 2021-07-13 15:42:25 157 阅读

JavaScript中函数闭包详解

1. 变量作用域理解闭包，首先必须理解变量作用域，在ECMAScript5的标准中有两种作用域：全局作用域和函数作用域。两者的调用关系是：函数内部可以直接读取全局变量；正常情况下，函数外部无法读取函数内部声明的变量；let num = 1;function test() { let n = 2; console.log(num); // 1}test(); console.log(n); // ReferenceError: n is not defined实际开发中

JavaScript

前端

javascript

原创 2021-07-13 15:42:24 10000+阅读

JavaScript中获取DOM元素尺寸和位置

1. 获取元素的 css 大小1.1 获取元素的行内样式<script> function boxInfo(){ let box = document.getElementById('box'); let w = box.style.width; let h = box.style.height; console.log(w,h) // 700px 800px }</script><body> <div id="

JavaScript

javascript

前端

原创 2021-07-13 15:42:22 309 阅读

JavaScript 面试题（1）

1. ES5、ES6 和 ES2015 有什么区别?ES2015 特指在2015年发布的新一代JS语言标准，ES6 泛指下一代JS语言标准，包含 ES2015、ES2016、ES2017、ES2018 等。现阶段在绝大部分场景下，ES2015 默认等同 ES6，ES5 泛指上一代语言标准。ES2015 可以理解为 ES5 和 ES6 的时间分界线。2. babel 是什么，有什么作用?Babel 是一个 JS 编译器，自带一组 ES6 语法转化器，用于转化 JS 代码。这些转化器让开发者提前使用最

Interview

前端

es6

javascript

JavaScript

原创 2021-07-13 15:42:20 207 阅读

JavaScript 面试题（2）

1. 实现 new 方法复制/** 1.创建一个空对象* 2.链接到原型* 3.绑定this值* 4.返回新对象*/// 第一种实现function createNew() { let obj = {} // 1.创建一个空对象 let constructor = [].shift.call(arguments) // let [constructor,...args] = [...arguments] obj.__proto__ = c

Interview

前端

面试

JavaScript

原创 2021-07-13 15:42:19 151 阅读

JavaScript 面试题（3）

1. undefined 和 null 有什么区别？在理解 undefined 和 null 之间的差异之前，我们先来看看它们的相似类。它们属于 JavaScript 的 7 种基本类型。let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];它们是属于虚值，可以使用 Boolean(value) 或 !!value 将其转换为布尔值时，值为 false。console.l

Interview

javascript

前端

面试

JavaScript

原创 2021-07-13 15:42:17 143 阅读

JavaScript中编码和解码的几种方式

JavaScript中有几个可以对字符串编码的函数，分别是：escape、encodeURI、encodeURIComponent。1. escape

JavaScript

javascript

前端

原创 2021-07-13 15:41:30 799 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

明天也要努力

JavaScript 数组对象去重的几种方法

JavaScript中 Map Set详解

Vue中使用定时器（setInterval、setTimeout）

Vue中实现复制内容到剪贴板（引入使用 vue-clipboard2）

Element-ui 中表单（Form)验证数字值范围（大小）

Nodejs 入门基础

TortoiseGit 修改用户名和密码

解决 Element-ui中选择器（Select）因options 数据量大导致渲染慢、页面卡顿的问题

Vue中实现右键自定义菜单

Vue中实现函数的防抖、节流及应用场景

Vue中实现静态文件下载（以下载表格为例）

Vue混入（mixins）理解及应用

Vue中使用 WebSocket

Webpack中 SplitChunks 插件用法详解

Linux 系统安装 Node.js

Linux 系统安装 Nginx

Vue 2.x 面试题（2）

CSS3 面试题（1）

Vue中 computed 和 watch 区别及应用场景详解

Node.js 创建并封装静态 WEB 服务器

HTTP、浏览器面试题（1）

JavaScript 中 this 指向详解

JavaScript中 new 一个对象过程详解

JavaScript中 var、let、const 特性及区别详解

JavaScript中函数闭包详解

JavaScript中获取DOM元素尺寸和位置

JavaScript 面试题（1）

JavaScript 面试题（2）

JavaScript 面试题（3）

JavaScript中编码和解码的几种方式

欢迎