![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
LeviAckerman_Js
立志成为一名高级前端工程师
展开
-
Get和Post请求
params 是用于拼接 url 的,get 请求传参就是拼到 url 中,而 data 是放在 request body 中的,用于 post原创 2021-11-19 13:53:55 · 240 阅读 · 0 评论 -
可编辑表格
<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原创 2021-10-29 13:47:37 · 291 阅读 · 0 评论 -
问题十七:table中使用checkBox状态不改变
问题是我在table列表里面使用checkBox,当我点击要修改状态的时候,值发生了改变,但是视图没有更新根据打印值是发生了改变的,视图不更新解决办法:在checkBox上面绑定一个change方法,给Table绑定的值给一个splice方法Change (event) { this.tableList.splice() },...原创 2021-09-29 11:29:09 · 577 阅读 · 0 评论 -
问题十六:el-row 的宽度溢出修复
当我们在使用饿了么UI的时候利用el-row布局时,偶尔会出现下方滚动条,这是el-row宽度溢出导致的解决方法 修复多余滚动条 //这个样式添加到el-row的父级中 overflow-x: hidden; padding: 0 30px; box-sizing: border-box;原因是容器没有设置足够的padding,所以会造成el-row宽度变长从而出现滚动条...原创 2021-09-18 09:55:10 · 1323 阅读 · 0 评论 -
问题十五:element table 错位
element table 错位<style scoped>::v-deep{ .el-table th.gutter { display: table-cell !important; }}</style>原创 2021-09-16 18:33:52 · 51 阅读 · 0 评论 -
问题十三:x-www-form-urlencoded发送请求的问题
x-www-form-urlencoded发送请求的要求解决办法//前端在传参时需要新建一个URLSearchParams对象,然后将参数append到这个对象中const params = new URLSearchParams();params.append(‘username’, this.username);params.append(‘password’, this.userpwd);//然后就可以将此参数传递到接口参数中...原创 2021-09-07 15:56:13 · 1977 阅读 · 0 评论 -
问题五:一个对象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原创 2021-06-08 14:58:06 · 3187 阅读 · 6 评论 -
问题四: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 }原创 2021-05-28 10:20:37 · 318 阅读 · 1 评论 -
问题三:修改传给后端的键名
问题:页面的数据是后端返回的,并用后端数据渲染的表格,但是当前表格选中之后 要把数据传给后端,但是其中的数据的中的一个字段必须要修改掉方法:正则表达式替换掉这个是我想要得到的数据格式options: [ {code: '123', value: '奥特曼'}, {code: '456', value: '泰罗'}, {code: '789', value: '迪迦'}]然而后台给的数据格式是这样的options: [ {code: '123', name: '奥特曼'}, {原创 2021-05-27 17:03:17 · 119 阅读 · 0 评论 -
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)=>{原创 2021-05-24 18:33:09 · 610 阅读 · 0 评论 -
问题二:请求在network里的response有数据,但是then的回调里面取不到
请求在network里的response有数据,但是then的回调里面取不到network页面打印原因导致出现这种情况的原因是,我在axios的请求拦截器里面做了一些处理,导致最终返回的数据是undefined,第一时间应该往这方面考虑的,失策啊…...原创 2021-05-24 14:33:56 · 2314 阅读 · 2 评论 -
问题一:element的checked复选框 在页面刷新之后仍然处于选中的状态
我的业务要求是element的checked复选框 在页面刷新之后仍然处于选中的状态v-model不能使用表达式,如果要绑定不同的参数的话,建议使用计算属性原创 2021-05-21 14:55:09 · 908 阅读 · 0 评论 -
JavaScript:宏任务 与 微任务 执行优先级
宏任务macrotask有哪些script setTimeout setInterval MessageChannel postMessage setImmediate requestAnimationFrame微任务microtask有哪些process.nextTick MutationObserver Promise.then执行优先级js是单线程所有主线程的同步任务先执行,然后执行微任务队列的程序,最后执行宏任务队列,秉承先进先出的原则。代码案例setTimeout(f原创 2021-05-19 16:12:09 · 1836 阅读 · 1 评论 -
javascript调用方法形式
JavaScript调用方法的形式这里我有一个test方法function test(){ console.log(11111)}// 我的第一种调用方法test()// 第二种调用方式window['test']()// 等同于window.test()// 也可以写为 以变量的方式进行调用 const TEST = 'test'window[TEST]()...原创 2021-05-17 14:36:37 · 151 阅读 · 0 评论 -
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原创 2021-05-15 13:05:31 · 68 阅读 · 0 评论 -
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原创 2021-05-06 17:51:36 · 147 阅读 · 0 评论 -
&&的判断从前往后,只要有不符合,就会出来
&&的判断从前往后,只要有不符合,就会出来原创 2021-05-06 17:28:19 · 225 阅读 · 0 评论 -
ES6 Promise执行机制分析
1.Peomise对象的创建以及执行顺序直接创建:new Promise((resolve,reject)=>{//…})这种方式在阮一峰老师的书中指出该函数一旦创建,其内部的匿名函数就会自动执行,在这里我们可以认为这种方式是相当于同步任务会直接执行。由代码可见: new Promise(function(resolve,reject){ console.log('1'); }); console.log('2');结果:12结论:从顺序来看,的确new Promi原创 2021-04-30 17:27:32 · 444 阅读 · 2 评论 -
vue的router-view
different router the same component vue。真实的业务场景中,这种情况很多。比如我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,官方说你可以通过watch $route的变化来做处理,但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。<router-view :key.原创 2021-04-23 14:22:31 · 258 阅读 · 0 评论 -
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原创 2021-04-21 15:40:24 · 567 阅读 · 0 评论 -
Vue数组去重并反转排序
原创 2021-04-21 15:14:26 · 589 阅读 · 0 评论 -
你真的了解Vue2.0的生命周期执行顺序吗?
探索1:生命周期在平级子组件和父组件中的执行顺序我首先创建了两个子组件:CompOne 和 CompTwo,分别在两个组件中写入了mounted方法和created方法。<template> <div> <h2>子组件1</h2> </div></template><script> export default { mounted原创 2021-04-08 14:58:37 · 559 阅读 · 0 评论 -
说说函数节流和防抖?有什么区别?如何实现?
一、是什么本质上是优化高频率执行代码的一种手段如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(防抖)和debounce(节流)的方式来减少调用频率定义节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时一个经典的比喻:想原创 2021-04-07 16:02:34 · 164 阅读 · 0 评论 -
总结Vue性能优化方式及原理
一:使用计算属性 计算属性最大的一个特点就是它是可以被缓存的,这个缓存指的是只要它的依赖的不发生改变,它就不会被重新求值,再次访问时会直接拿到缓存的值,在做一些复杂的计算时,可以极大提升性能<template> <div>{{superCount}}</div></template><script> export default { data() { return { count: 1原创 2021-04-07 15:07:15 · 202 阅读 · 0 评论 -
vue slot 插槽里面传递事件 调用外层的函数
vue开发过程中会有很多相似的页面开发,所以我们就想着用插槽的办法 写一个模版组件在组件文件夹下新建文件 我命名为vSlot组件里面定义一个具名插槽 名字为head 这里捆绑了2个属性 data 跟done 其中done 是个方法<template> <div class="hello"> <slot name="head" :data="testData" :done="done"></slot> </div><原创 2021-04-06 18:16:59 · 2478 阅读 · 0 评论 -
element表单提交跳转到未输入的input框
element表单提交跳转到未输入的input框这里我直接引用element表单提供的源码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inp原创 2021-03-18 11:57:50 · 845 阅读 · 0 评论 -
Vue动态组件渲染
子组件封装动态切换的子组件一<template> <div> 我是多行文本框{{ config.name }} <div> <input type="text" /> </div> </div></template><script>export default { name: 'rx-textarea-config', props: { con原创 2021-03-16 16:59:26 · 907 阅读 · 0 评论 -
vue的a标签不跳转
问题:在Vue当中使用a标签, 点击跳转后,本应该跳转到www.baidu.com,但是url实际地址是:http://localhost:8080/www.baidu.com。修改如下: 就可以避免以上问题。算是遇到一个小坑,记录一下。原创 2021-03-02 14:54:52 · 2573 阅读 · 0 评论 -
Vue模板引擎框架不被关注到的机制讲解和Vue生命周期
先看一下VUE模版的最佳实践<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"><原创 2020-11-16 13:58:47 · 140 阅读 · 0 评论 -
JavaScript原型与原型链
原型任何一个对象都有原型1.创建一个对象function Preson () { this.name = 'zs'; this.age = 18;}2.在Proson的原型上创建一个方法Preson.prototype.say = function say () { console.log('Hello ');};3.验证:创建两个Preson对象的实例,这两个对象都能共享访问到原型上的方法say//创建一个两个实例 证明原型对象上的方法可以共享//其所有属性和方法,都原创 2020-11-08 13:58:55 · 173 阅读 · 1 评论 -
JavaScript面试题(一:幽灵白条,!important不是最大 )
幽灵白条一个div里面包一个span没有任何内容,会被自动撑开。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-11-03 20:41:18 · 286 阅读 · 0 评论 -
购物车的实现(三)
实现的方法和逻辑代码注释都有class Goods { constructor() { Goods.list(); } // 获取商品信息的 // static 静态方法 // 静态方法只属于某个类 static list () { //发送ajax请求 axios.get('http://localhost/day1012-27/cart2/server/server.php?fn=lst') .then(res => { //res是后原创 2020-10-18 13:28:42 · 1211 阅读 · 3 评论 -
JavaScript中get和post的区别
get 一般用于信息的获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符。 get方式需要使用Request.QueryString来取变量的值。post一般用于修改服务器上的资源,对所发送的信息没有限制。post方式是通过Request.Form来获取值。也就是说get是通过地址栏传值,而post是通过提交表单来传值以下情况请使用post1.无法使用缓存文件(更新服务器上的文件数据库)。2.向服务器发送大量数据(POST没有数据量的限制)。3.发送包含未知字原创 2020-11-01 15:06:54 · 354 阅读 · 0 评论 -
JavaScript的同源策略
概念同源策略是客户端脚本的重要的安全度量标准,其目的是防止某个文档或脚本从多个不同源下载。这里的同源策略是指协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性为什么要同源限制比如一个黑客,他利用iframe把真正的银行登录页面嵌套在他的页面上,当你使用真正的用户名和密码登录的时候,它的页面就会通过Javascript读取到你的表单中input中的内容,这样就窃取了你的用户名和密码了。...原创 2020-11-01 14:56:23 · 320 阅读 · 0 评论 -
商城图片放大镜
直接上主菜, 代码注解详细,小白也能懂(一看就会)<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="css/index.css">--> <style> img { display: bloc原创 2020-11-01 13:16:25 · 784 阅读 · 0 评论 -
CSS模拟下拉菜单
啥也不说了直接上菜(怎么实现的注解里有)<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #cont { w原创 2020-11-01 13:11:12 · 255 阅读 · 0 评论 -
如何垂直居中一个浮动元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 已知宽高进行居中 */ #known {原创 2020-10-15 15:12:35 · 137 阅读 · 0 评论 -
对象的深拷贝和浅拷贝
简单的认识一下深拷贝和浅拷贝 var obj = { name: '逆风狂小狗', age: 24, say() { console.log('见过你的美,还会爱上谁!'); } };浅拷贝将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用 //浅拷贝,仅仅是指针给了另一个对象 var obj1 = obj; console.log(obj1); //输出的是对象 //如果修改obj1中的内原创 2020-10-16 15:06:52 · 224 阅读 · 0 评论 -
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
CSS 选择符:1.id选择器(# myid)2.类选择器(.myclassname)3.标签选择器(div, h1, p)4.相邻选择器(h1 + p)5.子选择器(ul > li)6.后代选择器(li a)7.通配符选择器( * )8.属性选择器(a[rel = “external”])9.伪类选择器(a: hover, li:nth-child)可继承的样式:1.font-size2.font-family3.color4.text-indent不可继承的样式:1原创 2020-10-20 14:06:06 · 279 阅读 · 0 评论 -
CSS元素的水平垂直居中(超级全)面试必背
一.已知宽高1. 子元素+vertical-align,display: inline-block 父元素+line-height,text-align .a1 { width: 800px; height: 800px; background: orange; text-align: center; line-height: 800px; } .a2 { width: 300px; height: 300px原创 2020-10-18 15:20:03 · 197 阅读 · 0 评论