JS
关注
分享
扫一扫
文章平均质量分 54
青阳zi
昨天我去书店买书，看到一本《解决你人生50％的问题》于是我就买了两本
展开
-
什么是原型、原型链？原型和原型链的作用
对象的继承,先申明一个对象，里面添加实例成员。之前，继承都用构造函数来实现；构造函数存在的问题：浪费内存。2、静态成员，就是在。原创 2023-02-26 09:50:13 · 624 阅读 · 0 评论 -
操作mongdb数据库
mongodb网站操作mongodb1.配置环境变量 进入电脑 配置环境变量 D:\mono\bin\bin 这样可以全局访问。原创 2022-12-15 15:52:49 · 4480 阅读 · 0 评论 -
dat.gui 快速调节变量工具
onFinishChange((value)=>{console.log("完全停下来之后触发",value);onChange((value)=>{console.log("修改的值：",value);创建一个文件夹folder，如果要在这个文件下添加一些调节变量，就不跟之前。在页面调节面板中这个就对应这个名字，默认是这个属性值的名字。：gui.add(调节的属性,“属性的某个值”)值被修改时触发的事件，可以返回value。调节的最小值(属性对应的数据类型)最大值(属性对应的数据类型)转载 2022-12-10 14:55:14 · 366 阅读 · 0 评论 -
ts定义数组中包含多个对象或者或者这种情况在vue3中怎么写
ts写数组对象的形式原创 2022-10-24 15:06:02 · 5094 阅读 · 0 评论 -
如何在 Vue3 组件中使用 TS 类型
据了解，已经有很多公司在使用 Vue3 + TS + Vite 开发新项目了。那么我们也不能落后，今天就给大家分享一下如何在 Vue3 组件中结合 Composition-使用 TS 类型。转载 2022-10-24 14:57:46 · 2624 阅读 · 0 评论 -
TS详细指南（保姆级教程）
abstract: 用abstract关键字声明的类叫做抽象类，声明的方法叫做抽象方法抽象类：指不能被实例化，因为它里面包含一个或多个抽象方法。抽象方法：是指不包含具体实现的方法；注：抽象类是不能直接实例化，只能实例化实现了所有抽象方法的子类// 抽象方法console.log(`我的名字是${this.name},年龄是${age}`);let res = new Person("小杜杜") //errorlet res1 = new Child("小杜杜");原创 2022-10-22 11:40:03 · 3607 阅读 · 0 评论 -
TS创建接口和接口类型数组
【代码】TS创建接口和接口类型数组。原创 2022-10-21 16:44:23 · 2678 阅读 · 0 评论 -
new Map()和for in两种方法判断一数据中对象和另一数组中对象是否想等
【代码】new Map()和for in两种方法判断一数据中对象和另一数组中对象是否想等。原创 2022-09-23 15:06:20 · 214 阅读 · 0 评论 -
浅拷贝与深拷贝的理解
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。转载 2022-09-07 17:14:34 · 1846 阅读 · 1 评论 -
用递归的方式处理数组 && 把递归方法方法定义到数组的原型上
这就不太好玩了，一般来说并发请求可以提高网络利用效率，但效率再怎么提高，带宽也是有限的，并发过多就会导致单个请求变慢，请求过慢就可能会被服务端干掉，被服务端干掉的话我们就拿不到想要的图片了。其实这也还只是一个半成品，我们可能还希望在递归完成的时候，再继续执行一些操作，比如说把下载下来的图片打个压缩包？我现在这种做法是有副作用的，递归过程中不断pop()，递归完成后，arr 就变成一个空数组了。可是既然是经常会用的东西……不管怎么说，这也是一个思路，如果发现这个思路中有其他严重的问题，或者有更好的建议。...原创 2022-08-26 00:19:35 · 533 阅读 · 0 评论 -
reactive创建的响应式对象会失去响应式
vue3原创 2022-08-24 23:56:31 · 433 阅读 · 0 评论 -
Vue2/Vue3中的代码逻辑复用对比（mixins、自定义hook）
mixins是Vue2.xOptionsAPI中常用的代码逻辑抽离手段，在Vue3.x中也同样可以使用。虽然好用，但其仍有一些比较显著的缺点，而Vue3.x引入的CompositionAPI中的自定义hook很好的解决了mixins带来的一些问题，本文将简单的对比一下这两种实现手段。使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势很清楚复用功能代码的来源,更清楚易懂。...原创 2022-07-27 00:04:36 · 5116 阅读 · 0 评论 -
vue3的setup语法糖＜script setup＞
在scriptsetup语法糖中，引入的组件可以自动注册，不需要再通过components进行注册，而且无法指定当前组件的名字，会自动以文件名为主，省去了name属性。父组件给子组件传值时，需要props接收。属性和方法也不用返回，也不用写setup函数，也不用写exportdefault，甚至是自定义指令也可以在我们的template中自动获得。使用组件，只需要引入组件就可以直接使用，不需要再在。中注册（组件命名采用的是大驼峰）...原创 2022-07-26 23:35:06 · 4728 阅读 · 1 评论 -
package.json中vue-cli-service相关配置说明
vue-cli-service：在脚手架的package.json中，serve配置的是与项目启动相关的信息：具体使用：或者在依赖中这样也可以改变或者在vue.config.js中也可以改变原创 2022-06-06 20:17:55 · 1370 阅读 · 0 评论 -
vue中sync的理解
官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，如图：父组件代码：<template> <div> <input type="button" value="我是父组件中的按钮" @click="show"> <c..转载 2022-05-30 00:22:38 · 4224 阅读 · 0 评论 -
vue中对于MVVM的理解
MVVM架构是指： 数据层（Model）：应用数据以及逻辑，主要指从后端获取的数据 视图层（View）：页面UI组件，主要由 HTML 和 CSS 来构建 视图数据模型（ViewModel）：数据与视图关联起来，数据和 DOM 已经建立了关联，是响应式的，使编程人员脱离复杂的界面操作 ViewModel主要功能是实现数据双向绑定： 数据变化后更新视图，既：model有数据更新时UI组件会响应变化 视图变化后更新数据，界面上如果有input输入框，输入数原创 2022-05-30 00:01:06 · 385 阅读 · 0 评论 -
vue中data为什么是函数--原理
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> /* var obj = { name:'里斯', age:30 } */ function box(){ return { ...原创 2022-05-29 23:46:03 · 519 阅读 · 0 评论 -
vue父组件向子组件传递函数方法
父组件<template> <div> parent <child :parentHandler="parentHandler" /> </div></template><script>import child from "@/components/child";export default { components: { child }, data() { return {};转载 2022-03-31 23:51:26 · 4025 阅读 · 0 评论 -
uniapp中微信小程序账号登录
<template> <view class="content"> <!-- 登录适配 --> <!-- 最新版登录方法 --> <button type='primary' lang="zh_CN" @tap="getUserProfile">新的登录方式 </button> <!.原创 2022-03-17 22:51:14 · 678 阅读 · 0 评论 -
vuecli项目结构与分析
vue-cli4.5目录结构原创 2021-12-24 11:16:46 · 374 阅读 · 0 评论 -
兄弟组件间通讯总线机制 以及$attrs和$listeners的使用
总线机制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="root"> <child content="DELL"></child> <child content=原创 2021-12-14 11:59:43 · 464 阅读 · 0 评论 -
使用require.context实现前端工程自动化
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-..转载 2021-11-16 17:03:06 · 450 阅读 · 0 评论 -
HTML5--拖放事件与dataTransfer对象
若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。若要拖放某个元素，则必须将其的draggable属性设置为true。img和a元素默认为true。拖放事件拖放的过程中被拖放的对象被称为源对象，过拖放过程中间经过的其他对象被称为过程对象，最终到原创 2021-10-20 15:26:55 · 1935 阅读 · 1 评论 -
数据劫持|数据代理
数据劫持：指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是Object.defineProperty()和 ES2016 中新增的Proxy对象。数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。一、Object.definePropertyVue 的双向绑定已经升级为前端面试的必考转载 2021-10-18 23:21:28 · 989 阅读 · 0 评论 -
vue2.X深入响应式原理
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这里，我们将研究一下 Vue 响应式系统的底层的细节。vue2.x是利用Object.defineProperty劫持对象或对象的属性的访问器，在属性值发生变化时获取属性值变化， 从而进行后续操作。1、Object.defineProperty在js中的描述：Object.原创 2021-10-17 17:06:27 · 659 阅读 · 0 评论 -
Javascript removeChild()删除节点及删除子节点的方法
下面给大家介绍Javascript removeChild()删除节点的方法，具体详情如下所示：在Javascript中，只提供了一种删除节点的方法：removeChild()。removeChild() 方法用来删除父节点的一个子节点。语法： parent.removeChild(thisNode)参数说明：参数 说明 thisNode 当前节点，即要删除的节点 parent 当前节点的父节点，即 thisNode.parentNode 例如，删...转载 2021-10-14 23:17:15 · 23411 阅读 · 2 评论 -
Ajax封装
Ajax 说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有：（地图）实时更新，表单验证等等.... ajax的优缺点： 优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力 缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制） 2.一个Ajax请求多了，也会出现页面加载慢的情况。 ...原创 2021-10-13 12:00:28 · 368 阅读 · 0 评论 -
面向对象的选项卡ES5和ES6的写法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .tit span{ float: left; width: 100px; background: #ccf; } .tit .select{ background: #99f; } .con...原创 2021-10-11 15:18:25 · 438 阅读 · 0 评论 -
构造函数内部定义的方法和挂在原型上的方法的区别
function A() { this.name = 'a' this.sayHello = function() { return 'Hello' } } function B() { this.name = 'b' } B.prototype.sayHello = function() { return 'Hello' } var a = new A() var .转载 2021-10-10 23:39:16 · 401 阅读 · 0 评论 -
阿里云滑块验证 vue+java Springboot使用案例
阿里云接口文档：前端：https://help.aliyun.com/document_detail/121898.html后端java：https://help.aliyun.com/document_detail/122003.html在vue的项目中public文件夹的index.html 里面引入案例的script<!DOCTYPE html><html> <head> <meta charset="utf-8">转载 2021-10-08 23:38:02 · 4359 阅读 · 1 评论 -
RSA加密登录
登陆操作，用户名和密码需要传输到后台但不能直接明文显示，出于安全考虑也不应该使用对称加密，RSA是比较常见的一种做法，这里给出一个java版的完整实现，以备后用，也提供给有需要的同学。（来源来自多个博客）maven项目，pom.xml引入<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15</artifactId><version>原创 2021-10-08 16:18:22 · 1348 阅读 · 0 评论 -
vue文件中如何import引入js文件，并且调用js文件中的方法
1. 项目结构2.在js文件中创建对外开放的方法3. 在index.vue中引入validate.js并且使用转载 2021-10-08 16:10:29 · 5240 阅读 · 0 评论 -
ES6中import和export的用法（8种）
首先这两个是基于服务器端环境的我这边是安装了phpstudy安装好之后会有一个www文件夹把内容放入该文件夹中我的文件夹叫exportandimport 里面有一个index.js和一个index.html 可以启动服务器 http://localhost/exportandimport<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></...原创 2021-10-08 11:40:23 · 2426 阅读 · 0 评论 -
ES6面向对象
01-创建类和对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l原创 2021-10-07 23:19:09 · 361 阅读 · 0 评论 -
节流与防抖2
节流<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">...原创 2021-09-24 16:30:54 · 213 阅读 · 0 评论 -
节流与防抖
节流这是一个没有做节流的改变屏幕尺寸可以变色的效果，会进行反复加载<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function coloring(){...原创 2021-09-24 16:44:23 · 408 阅读 · 0 评论 -
vue中nextTick的用法
nextTick的用法this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中未使用<!DOC原创 2021-09-24 12:09:05 · 1491 阅读 · 0 评论 -
类数组对象转化为数组的几种方法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>1</div> <div>1</div> <div>1</div&g...原创 2021-09-24 11:52:40 · 2686 阅读 · 0 评论 -
ES6-ES11相关资料 持续更新中…
ES6语法ES6相关概念什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地转载 2021-09-24 11:00:00 · 1425 阅读 · 0 评论