qq_45279574的博客

原创 Get和Post请求

params 是用于拼接 url 的，get 请求传参就是拼到 url 中，而 data 是放在 request body 中的，用于 post

原创 可编辑表格

<template> <div class="edit-table-container"> <el-row> <el-row type="flex" justify="space-between"> <el-row type="flex" align="bottom"> <slot /> </el-row> <el-row

原创 问题十七：table中使用checkBox状态不改变

问题是我在table列表里面使用checkBox，当我点击要修改状态的时候，值发生了改变，但是视图没有更新根据打印值是发生了改变的，视图不更新解决办法：在checkBox上面绑定一个change方法，给Table绑定的值给一个splice方法Change (event) { this.tableList.splice() },...

原创 问题十六：el-row 的宽度溢出修复

当我们在使用饿了么UI的时候利用el-row布局时，偶尔会出现下方滚动条，这是el-row宽度溢出导致的解决方法 修复多余滚动条 //这个样式添加到el-row的父级中 overflow-x: hidden; padding: 0 30px; box-sizing: border-box;原因是容器没有设置足够的padding，所以会造成el-row宽度变长从而出现滚动条...

原创 问题十五：element table 错位

element table 错位<style scoped>::v-deep{ .el-table th.gutter { display: table-cell !important; }}</style>

原创 vue里面v-model的语法糖

v-model语法糖 <date-time v-model='data'></date-time>等同于：<date-time :value="something" @input="value => { data= value }"></date-time>如何实现双向绑定watch:{ newValue(){ this.$emit('input', this.newValue) }}...

原创 问题十三：x-www-form-urlencoded发送请求的问题

x-www-form-urlencoded发送请求的要求解决办法//前端在传参时需要新建一个URLSearchParams对象，然后将参数append到这个对象中const params = new URLSearchParams();params.append(‘username’, this.username);params.append(‘password’, this.userpwd);//然后就可以将此参数传递到接口参数中...

原创 vue当背景图需要切换的时候

当一个页面的背景图需要根据，你的变化而变化的时候，需要吧背景图片设置为一个变量，那么该怎么做呢?

原创 问题十二：el-row 和el-col导致排版问题

el-row 和el-col导致排版问题解决办法.el-row { display: flex; flex-wrap: wrap;}

原创 vue props传递对象参数时可以实现双向绑定

vue props传递对象参数时可以实现双向绑定使用props向子组件传递对象属性的时候，是可以实现子组件数据修改父组件也能随之改变的原因其实是props接收的是对象的地址，所以父子组件共同指向的是一个堆里面的对象，所以一个改变都改变了注意：只有引用类型可以这样做，基本数据类型是不行的，毕竟props是单向数据流...

原创 Vue中Prop默认值为什么要为工厂函数的形式返回？

Vue中Prop默认值为什么要为工厂函数的形式返回？看过一篇文章：原文说Object与数组类型default需要用一个函数返回，但是Type可以为Function,Function不也是Object吗？Function类型得default直接default:()=>{}就行了，为啥不需要default:()=>()=>{}有人说是为了不影响父组件，可是你用不用默认值修改引用类型得prop都会改变父组件得啊，文档中得Object不知道到底包不包括Function，关于子组件修改P

原创 Promise并发做异步请求

并发做异步请求，限制频率举个例子，有 8 张图片 url，你需要并发去获取它，并且任何时刻同时请求的数量不超过 3 个。也就是说第 4 张图片一定是等前面那一批有一个请求完毕了才能开始，以此类推。var urls = [ 'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kk

原创 Promise 面试题整理

基础输出题题目1const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2)})promise.then(() => { console.log(3)})console.log(4)// 1 2 4 3记住 new Promise 里的参数函数，是同步被执行的，故而先输出 1，2.resolve 后还需要等待进入下一

原创 问题九：两个v-for中，内for无法调用外for对象

两个v-for中，内for无法调用外for对象解决办法：把v-if 写在template 标签上原因：首先 vue官方都不推荐 v-if 和 v-for写在一个标签上 (原因:就算写了v-if v-for还是会循环 只是v-for返回的是一个空的值 这样就造成了性能浪费)...

原创 问题八：element下拉框＜transition-group＞ children must be keyed: ＜ElTag＞

children must be keyed: 我在添加行的时候完select里面添加了一个数组里面包空对象

原创 问题七：vue+ts The left-hand side of an assignment expression may not be an optional property?

用ts定义了一个变量，并且用接口做类型定义的，但是赋值的时候就报错？？？解决办法：解决的办法是 赋值之前先判断是否存在

转载 Ios和安卓的兼容性（一）

1.iOS手机将数字自动识别为电话，变成蓝色，有下划线 <meta name="format-detection" content="telephone=no"> 安卓识别邮箱，禁止跳转 <meta name="format-detection" content="email=no" />2.iOS延迟聚焦setimeout失效 暂时未有好的解决方法3.ios 页面滑动卡顿 body{-webkit-overflow-scrolling:touch}4.iO

原创 问题六：vue使用scoped引入外部样式还是造成样式污染

1.使用@import引入外部样式就算加scoped，如果还是有一样的类名还是会造成样式污染原因@import引入文件并不是直接将文件中的代码引入到使用的文件中来，而是发起一个请求，获得相应的资源，这个时候是没有scoped的解决办法<style src="./style.css" scoped></style>...

原创 问题五：一个对象push到数组中此时改变原对象数组中的数据也会被修改是为什么

直接上domo<template> <div class=""> <form action=""> <p>姓名：<input type="text" v-model="user.name" /></p> <p>年龄：<input type="text" v-model="user.age" /></p> <p>爱好：<input ty

原创 问题四：JavaScript跳出（终止）forEach循环

错误方法一：使用break结束循环let arr = [12,13,15,16,17]// 直接报错arr.forEach((v)=>{ if(v===13){ break; } console.log(v)}) 错误方法二：使用return false结束循环let arr = [12,13,15,16,17]arr.forEach((v)=>{ if(v===13){ return false }

原创 问题三：修改传给后端的键名

问题：页面的数据是后端返回的，并用后端数据渲染的表格，但是当前表格选中之后 要把数据传给后端，但是其中的数据的中的一个字段必须要修改掉方法：正则表达式替换掉这个是我想要得到的数据格式options: [ {code: '123', value: '奥特曼'}, {code: '456', value: '泰罗'}, {code: '789', value: '迪迦'}]然而后台给的数据格式是这样的options: [ {code: '123', name: '奥特曼'}, {

原创 forEach能修改原数组吗？

forEach能修改原数组吗？主要的区别在于引用类型和基本数据类型的区别操作基本数据类型 => 修改不了const arr = [1, 2, 3, 4];arr.forEach(res => {res= res* 3})console.log(arr ); // [1,2,3,4]操作引用类型 =>能够被修改const obj = [{name:'ww',age:20},{name:'zs',age:18}]obj.forEach((res)=>{

原创 问题二：请求在network里的response有数据，但是then的回调里面取不到

请求在network里的response有数据，但是then的回调里面取不到network页面打印原因导致出现这种情况的原因是，我在axios的请求拦截器里面做了一些处理，导致最终返回的数据是undefined，第一时间应该往这方面考虑的，失策啊…...

原创 问题一：element的checked复选框 在页面刷新之后仍然处于选中的状态

我的业务要求是element的checked复选框 在页面刷新之后仍然处于选中的状态v-model不能使用表达式，如果要绑定不同的参数的话，建议使用计算属性

原创 JavaScript：宏任务 与 微任务 执行优先级

宏任务macrotask有哪些script setTimeout setInterval MessageChannel postMessage setImmediate requestAnimationFrame微任务microtask有哪些process.nextTick MutationObserver Promise.then执行优先级js是单线程所有主线程的同步任务先执行，然后执行微任务队列的程序，最后执行宏任务队列，秉承先进先出的原则。代码案例setTimeout(f

原创 javascript调用方法形式

JavaScript调用方法的形式这里我有一个test方法function test(){ console.log(11111)}// 我的第一种调用方法test()// 第二种调用方式window['test']()// 等同于window.test()// 也可以写为 以变量的方式进行调用 const TEST = 'test'window[TEST]()...

原创 JavaScript for of 与 for in的区别

for of一个数据结构只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以用 for…of 循环遍历它的成员。也就是说，for…of 循环内部调用的是数据结构的 Symbol.iterator 方法。for…of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。区别for-of 拿到的就是 value 本身，而 for

原创 （三）：Vue3的v-for和v-if一起用的变化

1.作用：v-if指令 作为一个条件渲染，当他为true的时候才会渲染出当前的节点v-for指令 是基于一个数组来渲染列表 ，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值，而且每一个Key值都是独一无二的。2.优先级Vue2中v-for和v-if是可以一起用的因为v-for的优先级比v-if的高<div v-for="item in

原创 （二）：vue3用elementPlus表单的坑

vue3引入表单验证我遇到的问题<template> <el-form :model="ruleForm" :rules="rules" ref="rForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"&g

转载 （一）：vue3.x初探之v-model的详细使用

1.用于自定义组件时，v-model的prop和默认事件名更改了，并且移除了model选项//父组件<template> <div> <Child v-model="message" /> <div>绑定的值：{{message}}</div> </div></template>//子组件<template> <div> <input

原创 vue2数据响应式的缺陷

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <div> <p v-for="(item, index) in list" :key="index">

原创 JavaScript的数组方法forEach的使用需注意

forEach 是 ES5 中操作数组的一种方法，主要功能是遍历数组，其实说穿了，就是 for 循环的加强版，该语句需要一个回调函数，作为参数。回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。// 分别对应：数组元素，元素的索引，数组本身 var arr = [1,2,3]; arr.forEach((value,index,array){ console.log(value); console.log(index); console

原创 &&的判断从前往后，只要有不符合，就会出来

&&的判断从前往后，只要有不符合，就会出来

原创 ES6 Promise执行机制分析

1.Peomise对象的创建以及执行顺序直接创建：new Promise（（resolve,reject）=>{//…}）这种方式在阮一峰老师的书中指出该函数一旦创建，其内部的匿名函数就会自动执行，在这里我们可以认为这种方式是相当于同步任务会直接执行。由代码可见： new Promise(function(resolve,reject){ console.log('1'); }); console.log('2');结果：12结论：从顺序来看，的确new Promi

原创 vue的router-view

different router the same component vue。真实的业务场景中，这种情况很多。比如我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。<router-view :key.

原创 Vue无限滚动加载组件封装

vue组件的封装<template> <div class="infinite-list-wrapper" ref="scrollView" style=""> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" > <!-- <li v-for="i in count" class="l

原创 Vue数组去重并反转排序

原创 Element的popconfirm组件无法暴露事件的问题

因为我用的是别人封装好的组件，也没有想那么多 ，但是用着这个组件就是无法暴露事件，父组件监听不到最后去看Element 的源码源码里面暴露的方法是 如图：所有最后吧onConfirm改为confirm就行了...

原创 vue watch

watch监听对象要进行深度监听 deep：true

原创 你真的了解Vue2.0的生命周期执行顺序吗？

探索1：生命周期在平级子组件和父组件中的执行顺序我首先创建了两个子组件：CompOne 和 CompTwo，分别在两个组件中写入了mounted方法和created方法。<template> <div> <h2>子组件1</h2> </div></template><script> export default { mounted