![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 53
浅浅呐
这个作者很懒,什么都没留下…
展开
-
flex:1代表什么?
flex:1的含义开始一直知道flex:1是平均分配,但是并不知道它的具体含义flex接受三个参数:第一个参数表示: flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大第二个参数表示: flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小想说flex: 1; === flex: 1 1 auto??来尝原创 2021-07-07 11:01:00 · 2102 阅读 · 0 评论 -
ts学习总结
ts学习总结ts最重要的特性:类型系统、适用于任何规模数值let num: number = 1但是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字字符串let name: string = 'wujuan'布尔值let isDone: boolean = false使用构造函数 Boolean 创造的对象不是布尔值let createdByNewBoolean: boolean = new Boolean(1) 则会报错, 事实上 new Boolean() 返回的是一原创 2021-07-06 20:30:07 · 433 阅读 · 0 评论 -
当div的宽度为百分比时,如何设置成为一个正方形?
正常情况下,要想设置一个正方形我们只需要设置特定的宽高即可div { width: 100px; height: 100px;}若未知宽高,只知道div的宽度是百分比,怎么设置成为一个正方形呢?此时将padding-top/padding-bottom也设置为百分比,正好和width相等,就成了一个正方形。div { width: 20%; padding-top: 20%; background: red;}...原创 2021-03-27 14:45:43 · 2021 阅读 · 0 评论 -
vue的单页面和多页面优缺点总结
单页面应用是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中,内容较多时首页加载速度比较慢多页面是指一个应用中有多个页面,页面跳转时是整页刷新参考文章:https://www.jianshu.com/p/c83de3a57920...原创 2021-03-22 15:27:11 · 1039 阅读 · 0 评论 -
js的数组方法总结
push()在数组的末尾添加一个或者多个元素,返回新的数组长度,原数组改变let arr = ['A', 'B', 'C', 'D', 'E']let count = arr.push('F')console.log(count); // 6console.log(arr); // ["A", "B", "C", "D", "E", "F"]pop()删除并返回数组的最后一个元素,原数组改变let arr = ['A', 'B', 'C', 'D', 'E']let count = ar原创 2021-03-19 17:08:21 · 158 阅读 · 0 评论 -
vue的diff算法
1.当数据发生变化时,vue是怎么更新节点的?渲染真实dom的开销很大,比如我们修改了某个数据,如果直接渲染到真实dom会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不更新整个dom呢?diff算法可以帮助我们。我们根据真实dom生成一个虚拟dom,当虚拟dom某个节点的数据改变后会生成一个新的Vnode,然后Vnode和oldVnode做对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode的值为Vnode。diff的过程就是调用名为patch的函转载 2020-11-19 23:37:57 · 115 阅读 · 0 评论 -
props传值强校验validator
父组件给子组件通常通过props传值,如果需要做一些强校验则可以使用validator如父组件传入一个propType参数,规定只能传入’text’, 'number’或者’letter’其中一种就可以这么写:props: { propType: { type: String, default: 'text', validator() { return ['text', 'number','letter'].indexOf(propType) > -1 } }}原创 2020-10-08 20:58:21 · 2688 阅读 · 0 评论 -
在vscode中打开.md文件
在vscode拓展中下载安装Markdown Preview Enhanced插件,安装完成后打开.md文件,点击图片右上方的小图标即可查看.md文件原创 2020-10-08 20:24:56 · 18062 阅读 · 0 评论 -
使用window.location.href跳转页面不刷新的问题
window.location.href = 'http://xxx’通常这样写都是可以跳转到目的url的,但是若当前的url和跳转的url是一个的话,页面可能就不会跳转,不会刷新举个例子,a页面和b页面是通过动态组件展示的,那么a和b的链接其实对应的就是一个,比如都是https://www.baidu.com,此时有个需求就是你想从b页面跳转到a页面,你用了window.location.href,这个时候页面其实是不会被刷新的解决方式:用完window.location.href 后再用window原创 2020-09-11 16:31:16 · 6705 阅读 · 0 评论 -
字段分割展示,将一句话通过一个符号分割展示成多行
比如服务端返回的数据是str = “这是一句话,需要两行展示”let str = "这是一句话,需要两行展示"let arr = str. split(',')然后遍历得到的arr中的item即可原创 2020-08-29 13:49:11 · 437 阅读 · 0 评论 -
js截取路径后挂载的参数
function getQueryString(name) { var queryObj = {}; var search = location.search.slice(1).split('&'); console.log(search); search.forEach((value, index, array) => { var t = value.split('='); queryObj[t[0]]原创 2020-07-29 17:30:09 · 209 阅读 · 0 评论 -
正则格式化金额
let money = 200000000let newMoney = money.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,")console.log(newMoney); //200,000,000原创 2020-07-23 09:54:54 · 378 阅读 · 0 评论 -
js中在一个字符串中查找另一个字符串或字符
1.indexOf方法let str ='问题跟进username,我们都有一个家名字叫中国,哈哈哈哈哈哈哈'let user='username'console.log(str.indexOf(user)) // 42.search方法let str ='问题跟进username,我们都有一个家名字叫中国,哈哈哈哈哈哈哈'let user='username'console.log(str.search(user)) // 43.正则test方法let str = '问题原创 2020-06-01 10:24:30 · 1577 阅读 · 0 评论 -
v-once的使用
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。写几行代码对比下:<!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-U原创 2020-05-11 21:02:19 · 4844 阅读 · 1 评论 -
这些git命令也太好用了叭~
总结一波很少人知道但是很好用的git命令情形一: 你已经执行了git add .和git commit -m ‘xxx’,但是你突然发现你改的一些东西有点问题,但是你又不想放弃修改,这时候可以使用git reset HEAD^情形二: 你在一个分支改东西改到一半,突然另一个分支的版本出现了特别紧急的问题,只能先放下手中一半的工作,去另一个分支,但是因为你本地有修改,切换分支就会报错, 你不想放...原创 2020-04-30 16:05:24 · 163 阅读 · 0 评论 -
v-if和v-else踩坑日记
v-if和v-else感觉已经非常非常… 熟悉了,但是最近做项目的时候还是踩坑了,半天没反应过来产生bug的原因,真的是越简单的东西越容易被忽视啊让我来描述一下我这低级的bug协议有两种方式展示,一种是服务端将pdf的链接下发到前端,由前端进行展示,一种是服务端下发html字符串,前端进行解析渲染,然后在服务端返回的是pdf的链接的时候,我这边先展示了一大串html字符串,后来才展示pdf,我...原创 2020-04-29 15:34:51 · 691 阅读 · 0 评论 -
js中数组和字符串的相互转化
1.字符串转化为数组(split) <script> let str = 'aeroengiea' console.log(str.split(""))// ["a", "e", "r", "o", "e", "n", "g", "i", "e", "a"] console.log(str.split("a")) // ["", ...原创 2020-03-16 19:47:33 · 115 阅读 · 0 评论 -
关于Object.defineProperty()的用法
Object.defineProperty(obj, prop, descriptor)参数说明obj:必需。目标对象prop:必需。需定义或修改的属性的名字descriptor:必需。目标属性所拥有的特性1.只对对象属性的value起作用,value有值则为vulue的值,否则则为undefinedvar obj = {}// 第一种情况:不设置value属性Object.def...原创 2020-02-21 16:30:08 · 180 阅读 · 0 评论 -
js中date日期
日期对象的创建当前日期为2020/02/11//日期对象的创建//当前日期var oDate = new Date(); //2020/2/11console.log(oDate); //Tue Feb 11 2020 16:56:08 GMT+0800 //指定日期var oDate1 = new Date("2019-10-3");console.log(oDate1); /...原创 2020-02-11 23:08:59 · 161 阅读 · 0 评论 -
this指向
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="button" name="" id="btn" value="...原创 2020-01-07 01:19:53 · 85 阅读 · 0 评论 -
深拷贝浅拷贝
https://www.cnblogs.com/dabingqi/p/8502932.html转载 2019-11-01 09:27:19 · 81 阅读 · 0 评论 -
解构赋值
https://juejin.im/post/5cda7458e51d453b6d4d144c转载 2019-10-31 10:17:07 · 125 阅读 · 0 评论 -
一些字段为空则不返回,不为空则放到对象中
function getReqData(){ let obj = {} let objList = ['a','b','c','d','e'] objList.forEach(function(item){ let result = getQueryString(item) if( result ){ obj[item] = result } }) return ob...原创 2019-10-31 09:50:23 · 1209 阅读 · 0 评论 -
filter()过滤
filter()过滤:创建一个新数组,其包含通过提供函数实现的测试的所有元素var arr = [ {name:'Jane', age: 22, sex:'female'}, {name:'Linda', age: 31, sex:'female'}, {name:'Linda', age: 24, sex:'male'}, {name:'kangkang', a...原创 2019-10-24 09:56:08 · 768 阅读 · 0 评论 -
三种方法实现角标
原文地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实战 - 角标</title> <style type="text/css"> body { background-...转载 2019-10-17 16:33:05 · 1671 阅读 · 0 评论 -
nrm的使用
什么是nrm?开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry, 顾名思义,就是说nrm是一个管理npm的工具。安装在windows系统下安装nrmnpm install -g nrm在mac系统下安装nrmsudo npm install -g nrm常用命令$ nrm ls // 查看所有的支持源(有*号的表示当前所使用的源,...原创 2019-10-14 19:43:14 · 207 阅读 · 0 评论 -
javascript中数组去重的方法总结
上次总结了关于字符串去重的五种方法,今天来总结一下关于数组去重的一些方法,希望能帮助到你们~方法一:indexOf方法主要思路:跟上面字符串去重类似。新建一个空的数组,然后遍历传入的数组,如果新的数组里没有遍历的元素,那么就加入到新建的数组内;如果有,则跳过。最后返回新建的数组,这个数组就是不含重复元素的数组。function removeRepeatArr(arr){ var ne...原创 2019-09-28 10:02:32 · 141 阅读 · 0 评论 -
gulp的使用以及AssertionError: Task function must be specified报错问题解决方法
今天项目用到了gulp,但是对于gulp又不是很熟,打包的时候运行gulp一直报错,然后就想总结一下遇到的问题。首先gulp必须全局安装和局部安装,安装命令:全局安装:npm install -g gulp局部安装:npm install --save-dev gulp可以先查看下安装全局gulp和本地项目的版本是否相同,如果不同的话会报错,因为安装的可能是最新版本4版本,所以就必...原创 2019-09-28 09:56:09 · 1492 阅读 · 0 评论 -
mac系统安装手机安装包
最近换了mac系统的电脑,没用过,很多都和windows系统不一样,然后开发软件时不知道怎么在手机上安装手机安装包,各种百度,最后总结了如何安装的步骤,希望帮助到你们吧~Mac系统安装手机安装包步骤:1.打开终端,输入如下命令行,安装homebrewruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install...原创 2019-09-26 19:39:22 · 1052 阅读 · 0 评论 -
vue用 key 管理可复用的元素
今天在看vue官网时对于用 key 管理可复用的元素部分效果实现时给的不是很完全,点击切换时应该怎么切换的问题,后来想到利用三目运算符来实现效果,下面给出详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...原创 2019-09-20 15:53:12 · 241 阅读 · 0 评论 -
利用js代码实现倒计时
在做购物网站时我们时常会用到倒计时来计算活动结束的时间,今天就和大家分享一下倒计时的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-07-06 14:27:36 · 479 阅读 · 0 评论 -
Vue动态组件实现tab切换
<!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-U...原创 2019-09-30 16:50:56 · 430 阅读 · 0 评论 -
点击不同的按钮弹框显示不同的状态
假如你已经封装了一个弹窗,在引用的时候直接以标签的形式引入<Dialog :text="text" :subText="subText" :showDialog="showDialog" @close="closeDialog" />两个按钮,分别给他们加上点击事件<button @click="showtan1"&g...原创 2019-10-08 16:59:03 · 1484 阅读 · 1 评论 -
利用foreach遍历获取数组中的某个属性返回数组
例:let list=[ { id:1, name:'zhangsan' }, { id:2, name:'zhangsan' }, { id:3, name:'zhangsan' }, { id:4, name:'zhangsan' }]getNames(list) { let arr = []; list.forEach( (item,...原创 2019-10-08 19:51:09 · 5490 阅读 · 0 评论 -
props最简单的运用
<!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-U...原创 2019-10-09 16:20:59 · 134 阅读 · 0 评论 -
vue使用.sync实现父子组件数据同步更新
实现下图中的效果:点击子组件中的按钮实现父子组件中数据同步更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-10-09 19:24:35 · 1659 阅读 · 0 评论 -
在动态组件上使用 keep-alive
可参考vue官网在动态组件上使用keep-alive完整代码原创 2019-10-11 10:49:12 · 101 阅读 · 0 评论 -
input框聚焦和失去焦点以及vue的自定义指令(以input框聚焦为例)
<input type="text" id="username">聚焦:document.getElementById('username').focus()失去焦点:document.getElementById('username').blur(); vue自定义事件:指令名称不需要加 v- 前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀情形1:全局自...原创 2019-10-11 17:33:43 · 2679 阅读 · 2 评论 -
vue计算属性(computed)和方法(methods)的区别
分别利用computed和methods实现翻转字符串的效果计算属性computed方法: <div id="example"> <p>Reversed message: "{{ reversedMessage() }}"</p> </div> <script> var vm = new ...原创 2019-09-20 11:22:26 · 626 阅读 · 0 评论 -
object.keys方法
在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组Object.keys的基本用法传入对象,返回属性名var obj = {'a':'123','b':'345'};console.log(Object.keys(obj)); //['a','b']var obj1 = { 100: "a", 2: "b"...转载 2019-09-19 15:38:38 · 392 阅读 · 0 评论