- 博客(86)
- 收藏
- 关注
RSS订阅
原创 关于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
211
原创 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
2210
原创 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
520
原创 当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
2205
原创 vue的单页面和多页面优缺点总结
单页面应用是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中，内容较多时首页加载速度比较慢多页面是指一个应用中有多个页面，页面跳转时是整页刷新参考文章：https://www.jianshu.com/p/c83de3a57920...
2021-03-22 15:27:11
1113
原创 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
196
转载 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
150
原创 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
2790
原创 在vscode中打开.md文件
在vscode拓展中下载安装Markdown Preview Enhanced插件，安装完成后打开.md文件，点击图片右上方的小图标即可查看.md文件
2020-10-08 20:24:56
21015
原创 使用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
7342
原创 字段分割展示，将一句话通过一个符号分割展示成多行
比如服务端返回的数据是str = “这是一句话,需要两行展示”let str = "这是一句话,需要两行展示"let arr = str. split(',')然后遍历得到的arr中的item即可
2020-08-29 13:49:11
501
原创 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
237
原创 正则格式化金额
let money = 200000000let newMoney = money.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,")console.log(newMoney); //200,000,000
2020-07-23 09:54:54
418
原创 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
1691
原创 vue中动态控制class
1.直接绑定对象（一）<div id="app"> <p class="static" :class="{red: isRed, blue:isBlue}">昨天再好也回不去，明天再难也要抬脚继续～</p></div><script> var watchExampleVM = new Vue({ el: '#app', data: { isRed: true,
2020-05-12 14:52:21
2013
原创 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
4945
1
原创 这些git命令也太好用了叭～
总结一波很少人知道但是很好用的git命令情形一： 你已经执行了git add .和git commit -m ‘xxx’,但是你突然发现你改的一些东西有点问题，但是你又不想放弃修改，这时候可以使用git reset HEAD^情形二： 你在一个分支改东西改到一半，突然另一个分支的版本出现了特别紧急的问题，只能先放下手中一半的工作，去另一个分支，但是因为你本地有修改，切换分支就会报错， 你不想放...
2020-04-30 16:05:24
200
原创 v-if和v-else踩坑日记
v-if和v-else感觉已经非常非常… 熟悉了，但是最近做项目的时候还是踩坑了，半天没反应过来产生bug的原因，真的是越简单的东西越容易被忽视啊让我来描述一下我这低级的bug协议有两种方式展示，一种是服务端将pdf的链接下发到前端，由前端进行展示，一种是服务端下发html字符串，前端进行解析渲染，然后在服务端返回的是pdf的链接的时候，我这边先展示了一大串html字符串，后来才展示pdf，我...
2020-04-29 15:34:51
750
原创 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
149
原创 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
190
原创 js中的传值和传址
基本数据类型是传值，存放在栈中引用数据类型（数组，对象和函数）是传址，值存放在堆中，栈中存放的是地址var a = 10;var b = a;a = 20;console.log(a, b); //20 10var c = [10];var d = c;c.push(20);console.log(c, d); //[10, 20][(10, 20)];var a = ...
2020-02-07 22:02:49
1222
原创 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
109
原创 一些字段为空则不返回，不为空则放到对象中
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
1241
原创 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
878
转载 三种方法实现角标
原文地址<!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
1774
原创 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
241
原创 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
2901
2
原创 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
1728
原创 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
168
原创 利用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
5589
原创 点击不同的按钮弹框显示不同的状态
假如你已经封装了一个弹窗，在引用的时候直接以标签的形式引入<Dialog :text="text" :subText="subText" :showDialog="showDialog" @close="closeDialog" />两个按钮，分别给他们加上点击事件<button @click="showtan1"&g...
2019-10-08 16:59:03
1584
1
原创 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
485
原创 javascript中数组去重的方法总结
上次总结了关于字符串去重的五种方法，今天来总结一下关于数组去重的一些方法，希望能帮助到你们～方法一：indexOf方法主要思路：跟上面字符串去重类似。新建一个空的数组，然后遍历传入的数组，如果新的数组里没有遍历的元素，那么就加入到新建的数组内；如果有，则跳过。最后返回新建的数组，这个数组就是不含重复元素的数组。function removeRepeatArr(arr){ var ne...
2019-09-28 10:02:32
164
原创 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
1557
原创 mac系统安装手机安装包
最近换了mac系统的电脑，没用过，很多都和windows系统不一样，然后开发软件时不知道怎么在手机上安装手机安装包，各种百度，最后总结了如何安装的步骤，希望帮助到你们吧～Mac系统安装手机安装包步骤：1.打开终端，输入如下命令行，安装homebrewruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install...
2019-09-26 19:39:22
1159
原创 vue用 key 管理可复用的元素
今天在看vue官网时对于用 key 管理可复用的元素部分效果实现时给的不是很完全，点击切换时应该怎么切换的问题，后来想到利用三目运算符来实现效果，下面给出详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...
2019-09-20 15:53:12
283
原创 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
673
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人