js
关注
分享
扫一扫
wyy7293
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
[Node]npm临时使用淘宝镜像
【代码】[Node]npm临时使用淘宝镜像。原创 2024-11-27 14:45:16 · 241 阅读 · 0 评论 -
[vue3] Fragment 和 Teleport 和 Suspense
Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用vue框架已经做好的处理,作为程序员不需要写代码Teleport什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。<teleport to="移动位置"> <div v-if="isShow" class="mask"> <原创 2023-03-05 12:15:29 · 241 阅读 · 0 评论 -
[JS] 对于原型和原型链的相关方法(instanceOf|setPrototypeOf|getPrototypeOf|isProrotypeOf|in|hasOwnProperty...)
instanceOf语法：object instanceof constructorobject：某个实例对象constructor：某个构造函数解释: 用来检测 constructor.prototype 是否存在于参数 object 的原型链上。Object.setPrototypeOf语法：Object.setPrototypeOf(‘现有对象’,‘原型对象’)解释: 为现有对象设置原型，返回一个新对象。Object.getPrototypeOf语法：Obj原创 2022-05-12 17:18:48 · 434 阅读 · 0 评论 -
[js]深浅拷贝的理解和多种实现方式(最终完整版)
深浅拷贝的区别浅拷贝将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用。深拷贝创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。为什么要用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）深浅拷贝的实现浅拷贝因为是引用数据类型,修改赋值后的变量等于修改引用的地址数据,会修改原数据 let obj = {name:'张三'} let object = obj console.原创 2022-05-10 16:15:04 · 384 阅读 · 1 评论 -
[JS]深入理解原型和原型链以及区别(包含面试题详解)
原型一个可以被复制（或者叫克隆）的一个类，通过复制原型可以创建一个一模一样的新对象，也可以说原型就是一个模板，在设计语言中更准确的说是一个对象模板原型是定义了一些公用的属性和方法，利用原型创建出来的新对象实例会共享原型的所有属性和方法所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象所有函数都有一个prototype(原型)属性，属性值是一个普通的对象所有引用类型的__proto__属性指向它构造函数的prototype说说对原型的理解(面试题)在 Jav原创 2022-05-09 16:35:22 · 1828 阅读 · 0 评论 -
[JS]事件冒泡和事件委派
事件冒泡上图说明两个概念捕获事件解释 从document到触发事件的那个节点，即自上而下的去触发事件,直到点击的那个节点结束栗子 设置从捕获事件let domDiv = document.getElementById('id')domDiv.addEventListener('click',()=>{},true)/**true:给该节点添加一个click事件,并且触发在捕获事件阶段 false:常用的冒泡阶段*/冒泡事件解释 从点击的节点开始自下而上的去触发原创 2022-04-29 10:47:09 · 335 阅读 · 0 评论 -
[JS]梳理原生对DOM的增删改查
在项目上一直都是用数据驱动试图(MVVM)的模式进行开发对于JS原生的操作很少了,陌生了许多,回顾下增删改查查元素代码说明备注document.getElementById(“id属性值”);根据元素绑定的id属性查询一个元素节点对象常用 且id必须唯一document.getElementsByName(“name属性值”);根据元素的name属性值查询一组元素节点对象 [返回数组]常用 多用于表单项[多选,下拉]document.getElements.原创 2022-04-21 17:27:33 · 429 阅读 · 0 评论 -
[JS]原生使用Object.defineProperty劫持数据,实现响应式数据驱动DOM(借助VUE2.X的核心思想)
举个栗子点击按钮只修改响应式数据,达到DOM更新和数据更新的功能核心思想定义需要被劫持的响应式对象数据对于定义的数据进行针对劫持,使用getter和setter进行对DOM的处理当点击功能按钮时,只需要修改定义的响应式数据就可以完整代码供体验 希望大佬指点不足之处供参考 下方注释掉的是JS原生操作DOM实现的<html> <head> <title>操作DOM</title> </原创 2022-04-21 15:27:37 · 1387 阅读 · 0 评论 -
[vscode]代码规范ESLint + Prettier 在vue项目中的使用和冲突解决[完美解决]
前言在创建项目的时候记得勾选使用代码规范ESLint把规矩都列出来写在文件里，规范大家的代码统一化如果代码不符合规则,ESLint就会报警高或者报红Prettier把规矩都列出来写在文件里，规范大家的代码统一化一键保存自动帮助大家通过统一的规则格式化代码使用在vscode中开发vue项目需要安装这三个插件在.eslintrc.js文件中配置rules属性[详细的规则见文档]举个栗子 规定字符串使用单引号和末尾不加分号 rules: { '原创 2022-04-18 16:36:49 · 1754 阅读 · 0 评论 -
【JS】高级函数相同点和差异性[map|foreach|for|find|findIndex|filter|reduce](包括但不限于)
map用于改变数组中元素的值数据处理返回新数组,不改变原数组let arr = [1,2,3,5,4,6]let result = arr.map((item,index,arr)=>{ return item * 2})console.log(result) // 结果: [2, 4, 6, 10, 8, 12]foreachforEach 是 ES5 中操作数组的一种方法，主要功能是遍历数组，就是 for 循环的加强版，该语句需要一个回调函数，作为参数。回调函数的形参，原创 2022-04-18 10:51:48 · 277 阅读 · 0 评论 -
[正则表达式] 含义说明
表达式含义备注new RegExp(‘正则表达式’,‘匹配模式’)通过构造方法创建正则表达式字面量创建: / //[a-z]/从a到z的 “或”/[^a-c]/从a到c的 “除了”/a{3}/连续出现 a 3次/a{1,3}/连续出现 a 1到3次/a{3,}/连续出现 a 3次以上+至少一次相当于{1,}-0个相当于{0,}?0个或1个相当于{0,1}/^1/开头第以1开始/1$/结...原创 2022-04-15 16:25:57 · 362 阅读 · 0 评论 -
[JS基础] arguments 解释和实际使用场景
arguments 解释和实际使用场景在定义函数的时候,浏览器会给函数传入两个隐匿的参数函数的上下文对象 this 和 封装实参的对象 argumentsarguments是一个类数组对象,可以通过索引类操作实参,也可以获取实参长度会把我们传递的实参,同时会在arguments中保存arguments.length 可以获取实参的长度我们即使不定义形参,也可以传递实参,可以通过arguments使用(就是麻烦)arguments的属性callee => 就是指向当前函数的对象原创 2022-04-14 17:25:32 · 431 阅读 · 0 评论 -
[JS]this的多种嘴脸以及call和apply的相同点差异点
this的多种嘴脸第一定律：(1) 以方法方式调用时,this是绑定宿主对象 var obj = { method:() =>{ console.log(this) } } obj.method(); // obj(2) 以函数方式调用时,this是window对象 (调用全局函数)function fun(){ console.log(this) }fun() // window全局变量或函数都相当于window..原创 2022-04-14 16:22:15 · 326 阅读 · 0 评论 -
[JS]原型链的解释和梳理
链关系:自身 => 原型 => Object当我们使用一个属性或方法时,会先在自身查找自身如果有,则直接使用自身没有则去原型查找,原型上有则使用原型上没有,则去原型(Object)查找,有则使用,无则返回undefined举个栗子...原创 2022-04-13 16:17:32 · 130 阅读 · 0 评论 -
[vue3 + TS] 父组件调用子组件的多种方法
主要用 ref<InstanceType<typeof 组件>>() 来获取各个子组件实例父组件<Footer ref="footerRef" />setup() { const footerRef = ref<InstanceType<typeof Footer>>() const parentClick = () => { footerRef.value?.handleFn('111') }原创 2022-04-02 17:46:41 · 5669 阅读 · 2 评论 -
[vue3] 子组件调用父组件的多种方法
子组件调用父组件的方法方法1 - 异步方式父组件定义供子组件调用的xx方法 @updata:xx=xx子组件中在setup的emit方法调用 context.emit(‘update:xx’)注意: .sync 在这里不好用父组件组件<my-childe ref="RefChilde" @update:xx="xx[被子组件调用的自身方法]"></my-childe>子组件组件setup(props, context) { function fn原创 2022-04-02 14:19:16 · 35635 阅读 · 3 评论 -
【vue3】使用Hook函数来实现功能代码整合 从而模块化
Options API 存在的问题使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。 sition API 的优势我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。 ...原创 2022-02-21 14:55:00 · 395 阅读 · 0 评论 -
[vue3] 响应式数据的判断
响应式数据的判断isRef: 检查一个值是否为一个 ref 对象isReactive: 检查一个对象是否是由 reactive 创建的响应式代理isReadonly: 检查一个对象是否是由 readonly 创建的只读代理isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理...原创 2022-02-21 14:48:13 · 284 阅读 · 0 评论 -
[vue3] provide 与 inject
作用：实现祖与后代组件间通信套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据具体写法：//祖组件setup(){ ...... let car = reactive({name:'奔驰',price:'40万'}) provide('car',car) ...... }//后代组件setup(props,context){ ...... const car = inject('car'..原创 2022-02-21 14:46:42 · 298 阅读 · 0 评论 -
[vue3]创建一个自定义的 ref
作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果：<template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3></template><script> import {ref,customRef} from 'vue' export default { name:'Demo', setup..原创 2022-02-21 14:40:37 · 299 阅读 · 0 评论 -
vue3 定义响应式数据的多种方式及分析
ref定义基本类型的响应式数据,原理通过Object.defineProperty()的get与set完成的。（对象类型不要用它，要用reactive函数）reactive定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）shallowReactive只处理对象最外层属性的响应式（浅响应式）shallowRef只处理基本数据类型的响应式, 不进行对象的响应式处理readonly让一个响应式数据变为只读的（深只读）应用场景: 不希望数据被..原创 2022-02-21 14:38:27 · 1215 阅读 · 0 评论 -
vue2 和 vue3 生命周期对比详解
vue2.x的生命周期vue3.0的生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate===>setup()created=======>setup()beforeMount ===>onBeforeM原创 2022-02-21 14:24:01 · 417 阅读 · 0 评论 -
[vue3] ref函数和reactive函数的响应式原理
ref函数作用: 定义一个响应式的数据语法: const xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中操作数据： xxx.value模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>备注：接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据：内原创 2022-02-21 14:18:25 · 1152 阅读 · 0 评论 -
【vue3】拉开序幕的 Composition API（组合API）之 setup
理解：Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法等等，均要配置在setup中。有两个参数 props, context = {emit,slots,attrs,expose}setup函数的两种返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）若返回一个渲染函数：则可以自定义渲染内容。（了解）注意点：尽量不要与Vue2.x配置混用Vue.原创 2022-02-21 14:08:13 · 171 阅读 · 0 评论 -
vue3 watch 监控对象的坑 和 watchEffect 对比
watch 监听函数注意: 1.监听指定的属性{对象),被监听属性(对象)有变化后,会给出新旧两个参数 2.监听函数注重过程,不能return结果 3.可以同时监听多个属性(对象) 栗子: watch([firstname,lastname],([currvalue,currold],[perval,perold])=>{ console.log(`1`,currvalue,currold); console.log(`2`,perval,perold)原创 2022-02-21 11:36:37 · 1261 阅读 · 0 评论 -
[CSS]text-shadow,box-shadow
text-shadow格式 text-shadow:阴影1,阴影2…;阴影的格式:第一个:(X轴)横向偏移位置第二个:(Y轴)竖向偏移位置第三个:模糊度第四个:阴影的颜色box-shadow格式box-shadow:阴影1,阴影2…;阴影的格式第一个:(X轴)横向偏移位置第二个:(Y轴)竖向偏移位置第三个:模糊度第四个:外颜色值第五个:颜色第六个:(内置阴影)...原创 2021-11-10 16:54:19 · 365 阅读 · 0 评论 -
小程序路径参数太多导致缺失问题
针对小程序跳转时携带参数太多,导致接收参数时缺失问题encodeURIComponent(JSON.stringify(obj)) //为跳转url时的转换方法。JSON.parse(decodeURIComponent(options.obj)) //为接收参数页面的转换方法。原创 2021-10-27 14:27:08 · 370 阅读 · 0 评论 -
小程序 准确算出scroll-view需要的高度
/** * 获取(单)多个节点的信息 * param Array节点 */getViewSize(e){ return new Promise((resolve)=>{ let query = wx.createSelectorQuery() for(let item of e){ query.select(`#${item}`).boundingClientRect() } query.selectViewport().scro原创 2021-10-26 11:35:32 · 478 阅读 · 0 评论 -
小程序 scroll-view 撑满整个容器[纯CSS]
<view class="box"> <view class="box-head"></view> <scroll-view class="box-scroll flex-center"><view>scroll-view 撑满整个容器</view></scroll-view> <view class="box-foot"></view></view>.box { .原创 2021-10-15 10:22:46 · 700 阅读 · 0 评论 -
获取URL参数并转换成对象
function getQueryParams(){ const result = {}; const queryString = window.location.search; const reg = /[?&][^?&]+=[^?&]/g; const found = queryString .match(reg); if(found){ found.forEach(item => { let temp = item.subbstring(1).spli原创 2021-06-09 14:58:45 · 274 阅读 · 0 评论 -
js 获取两个数字之间的随机数(包括边界数字)
getRandomNumber(min,max){ return Math.floor(Math.random() * (max - min + 1) + min);}原创 2021-06-07 17:14:03 · 1219 阅读 · 0 评论 -
box-shadow几种参考案例
第一种box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.15);第二种box-shadow: 0 3px 8px 0 rgba(0,0,0,.08);原创 2020-11-18 10:27:15 · 519 阅读 · 0 评论 -
js 加密姓名和加密身份证号码
js 加密姓名和加密身份证号码加密姓名加密身份证例子加密姓名EncryptName(name) { let newStr; if(name.length === 2) { newStr = name.substr(0, 1) + '*'; } else if (name.length > 2) { let char = ''; for (let i = 0, len = name.length - 2; i < len; i++原创 2020-10-23 15:53:18 · 2550 阅读 · 0 评论 -
js sort 对数字数组的排序
原数据 3.,31,5,7,6,1,32,4,9,39,30.array.sort(); 出来的数据以第一个数字排序array.sort((a,b)=>a-b); 结果 1,4,5,6,7,9,29,30,31,32原创 2020-09-11 17:40:24 · 421 阅读 · 0 评论 -
vue element UI 动态表格增加快捷编辑 使用popover组件完美实现
需求在表格内点击可以快捷编辑项限时弹窗进行编辑修改首先放一张效果图遇到问题1.使用popover组件,自定义content(样式基本就出来)2.点击可以弹出来,提交后无法隐藏3.给每个可编辑项增加一个唯一ID(起名字真吐血了)解决问题周五了,周一继续写文章...原创 2020-08-28 18:00:27 · 733 阅读 · 0 评论 -
vue 解决 npm install 速度慢
通常我们在git clone 克隆项目下来后要进行安装项目所需的依赖,但是npm install 却很慢,因此聚集于此// 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://registry.npm.taobao.org...原创 2020-08-26 14:45:18 · 2593 阅读 · 1 评论 -
[vue]build打包后将静态文件放入指定文件夹
vue build打包后将静态文件放入指定文件夹最终效果解决方案在vue.config.js 添加 assetsDirmodule.exports = { assetsDir: 'index'}原创 2020-08-24 09:58:13 · 2524 阅读 · 0 评论 -
js ueditor(富文本)
js直接引用的富文本插件地址提取码：x4zn原创 2020-08-24 09:33:32 · 477 阅读 · 0 评论 -
js遍历对象内的所有元素
需求:在编辑完成后,把from{} 内的所有元素赋空值第一种//简单粗暴this.from = {}第二种//for循环方式(代码不太优雅)for(const key in this.from){ if(this.from.hasOwnProperty(key)){ this.from[key] = '' }}原创 2020-08-18 10:18:50 · 1112 阅读 · 0 评论 -
使用vs code 生成 VUE 自动生成初始化模板
第一步打开vscode, 文件-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json第二步复制以下代码,保存{ "Print to console": { "prefix": "vue", "body": [ "<!--", " 功能：${1:功能描述}", " 作者：兜兜里有糖", " 邮箱：麋鹿不迷路@糖.兜兜", " 时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $原创 2020-07-29 15:48:42 · 936 阅读 · 0 评论