weixin_57396733的博客

原创 Vue中this.$set()

1654

原创 Vue $Bus $on兄弟组件间传值

131

原创 Vuex和map辅助函数

111

原创 Vue整体注册组件

111

原创 uni-app配置网路请求

111

原创 action中取state中的引用类型的值，得到的是{__ob__: Observer}

原创 Property or method “val“ is not defined on the instance but referenced during render. Make sure that

原创 label标签 的使用与作用

label标签一般用来提升用户体验性，常和input标签联用。主要实现的是，点击label标签包裹的内容，相当于点击了input表单。1.需求我希望达到点击右侧的span标签，也能达到勾选的目的2.实现用label标签把 <span>点我也行</span> 包裹起来给input设置一个id设置label的for属性3.注意点input表单的id和labeld的for属性的值一定要保持一致...

原创 v-for=“(item, index) in arr“ :key=“index“

在下面的函数中，想要得到v-for="(item, index) in arr" :key="index"中的index,通过传参得到，不能直接在函数内部访问到

原创 什么是margin塌陷以及如何解决

1.场景展示初始状态注意：我们遇到了问题，我们原本是想让子盒子往右下移动，所以设置了margin-left、margin-top,margin-left如我们期待达到效果，但margin-top却出现了奇怪的现象，如图所见，子盒子并没有在父盒子中向下跑，而是让父盒子向下跑了。情况总结：两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。2.解决方案(1).给父盒子设置border，添加border后，父子盒子就不是真正意义上

原创 对find()、findindex()、indexOf()、includes()的比较

方法一、find() 方法返回数组中第一个符合条件的元素，如果没有找到就返回undefine方法二、findIndex() 方法返回数组中第一个符合条件的元素的索引值，如果没有找到就返回-1方法三、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。没有则返回-1方法四、includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，没有则返回 false。...

原创 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

1.场景展示2.分析原本以为只是简单的子传父，子把输入的内容，传给父亲，新增到list数组中实际却出现了奇怪的问题功能确实是正常实现了，但却出现了如下报错信息[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.大致意思为：避免使用非原语值作为键，而使用字符串/数字值3.出错地方我们仔细揣摩这几处我将item.id作为key值，由于..

原创 你不得不知道的使一个盒子水平垂直居中的五种方法

1.需求初始代码及盒子效果2.方法一：利用定位 子绝父相子盒子定位(距父盒子宽度、高度一半的位置)，然后再移动自身宽度、高度的一半3.方法二 利用transform相当于是简化了方法一的margin-top:-50px;margin-left:-50px4.方法三 手动计算父盒子与子盒子的空间距离5.方法四 利用disply:flex注意：在父盒子中设置，对子盒子生效，不要错给子盒子设置6.方法五 利用margin:auto7.方法六 利用d.

原创 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c

vue单向数据流在vue中需要遵循单向数据流原则在父传子的前提下，父组件的数据发生会通知子组件自动更新 子组件内部，不能直接修改父组件传递过来的props => props是只读的代码效果这是我们点击按钮，修改txt的值看看会发生什么我们发现值确实改了，但会报错，vuej规范我们不要在子组件中直接修改props我们再看看点击修改数组会发生什么答案是，数据更新了，浏览器并没有报错总结props的值不能重新赋值, 但是引用类型可以子改父...

原创 误将vue中的计算属性完全等同于函数

1.场景2.期待效果3.实际却报错sum2 is not a function4.分析计算属性并不能完全等价于函数，不能错误地去调用，加小括号。此外一定不要忘记return

原创 如何运用js生成1-100的随机整数

1.首先我们要知道如何生成随机数Math.random()Math.random() 返回 0(包括) 至 1(不包括) 之间的随机数注意：是包括0，但不包括1稍稍列举2.如何将小数转化为整数Math.floor()Math.floor()将小数转化为整数并不是四舍五入，而是向下取整，举个例子3.思考如何得到1-100Math.random() 可以得到0-0.9999999999.....Math.random()*10 可以得到0-9.999999...

原创 js如何将数组中的第一个元素移至末尾

1.需求分析2思路分析（1）先删除第一个元素（2）再将删除的第一个元素添加到末尾3.方法回顾在此之前我们需要回顾数组增删改查的一些方法 （1）删：arr.shift() 删除数组中第一个元素 （2）增：arr.push(元素) 将该元素添加到数组末尾（3）关于shif方法的返回值,不知你是否会误以为是删除第一个元素后的新数组，其实不然，返回值其实就是你删除的这第一个元素，一下我们用代码验证一下 （4）另外关于push方法的返回值，其实...

原创 Invalid project name: “vue_Test“Warning: name can no longer contain capital letters

这个报错信息是在Windows的cmd中创建Vue脚手架项目时出现的，在命令行输入创建命令后就出现了如下报错：解决方法：项目名文件夹名不能含有大写字母，需要将项目名称中的大写字母改为小写...

原创 使用webpack实时打包时所犯错误

一、使用流程回顾1.安装包npm i webpack-dev-server -D2.在webpack.config.js中做如下配置3.在package.json中补充一个script二、作用实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。三、所遇问题，修改代码保存，页面虽然会自动刷新，但不会显示最新效果，依旧是之前的效果四、错误原因 没有npm run 之前我们在package.json中新补充的那个script..

原创 ES6模块导入与导出

前言：ES6模块化导入与导出有三种方式，1默认导入导出，2按需导入导出，3默认导出和整体导出一起使用。接下来我们分别使用下这三种方式1.默认导入导出默认导出的语法： export default 默认导出的成员默认导入的语法： import 接收名称 from '模块路径2.按需导入导出按需导出的语法： export const s1 = 10按需导入的语法： import { 按需导入的名称 } from '模块路径'例如，我现在只想导入name 和 age

原创 node环境下SyntaxError: Cannot use import statement outside a module的问题

1.场景执行ES6模块化默认导入导出2.解决方案在package.json文件中设置"type": "module"导入成功

原创 浅析Promise的then方法

1.关于thenthen方法的作用是为Promise对象添加状态改变时的回调函数。2.then的返回值then()方法的返回值也是一个promise对象，所以它支持链式写法。但是要注意的是它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象。那么既然 p2也是一个promise对象，那么，p2的状态（promiseStatus）和值(promiseValue)又由什么决定呢？我们先上结论，随后分别逐一验证。3.p2的状态和值的确定规则（1）当p1的状态是p

原创 js中函数 this的三种指向

1.关于this：this关键字是函数运行时自动生成的一个内部对象，也被称作为环境对象，只能在函数内部使用。谁调用this，this就指向谁。谁调用我,我就指向谁2.this的三种指向普通函数； 函数名() this指向window对象方法: 对象名.方法名() this指向对象构造函数； new 函数名() this指向new创建实例对象3.通过代码分析、验证（1）普通函数我们声明一个函数，函数体...

原创 CORS错误，跨域问题的解决

当我们遇到CORS错误时，往往是跨域造成的首先，我们需要了解下两个概念跨域：不同源的ajax请求同源：发出请求所在的页面 与 所请求的资源的url，协议相同，域名相同，端口相同 都相同。同源情况不同源情况 报CORS错误解决方案，从npm下cors包，然后在我们的代码中添加这样一段代码...

原创 nodemon报错

nodemon

原创 通过nodemon解决频繁修改代码重启服务器问题

nodemon

原创 push方法的返回值是新数组的长度

bug bug

原创 用path.join( )拼接绝对路径时出错

bug bug bug

原创 导出模块两种方式的区别

1.两种方式module.exports , exports2.初始module.exports和exports指向的是同一块区域，其内容都是一个空对象3.给对象赋值（module.exports 赋 引用类型数据）3.1 module.exports3.2 exports3.3 同时赋值此时，我们会发现导出的结果是{a:100}，并不是{a:100,b:100}4.给对象赋值（module.exports 赋 基本类型数据）再同时赋值..

原创 nodejs读取文件，相对路径隐患

1.场景文件路径如下；需求：读取rs.txt的内容 2.当我们在code处运行小黑盒时，可以正常执行3.当我们向上一级，从pageA处运行小黑盒时报错，原因：rs.txt找不到4.原因分析读取文件时，使用相对路径，此时nodejs是如此解析路径的：！！！ 运行命令的小黑窗的所在路径 + 代码中的相对路径即：显然，路径错误...

原创 用nodejs写入JSON数据

nodejs期间