- 博客(50)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue项目 cdn资源链接失效
解决方法两种1: 更改cdn资源路径2: 去掉之前webpack配置的external打包配置：如下同时把之前的 cdn引入的script标签全部删掉，不然会造成类似如下错误（资源重复）：//Cannot redefine property: $router此外之前cdn引入所以你可能设置了开发环境的Vue.use()插件，记得要放开生产环境也可用，不然会造成类似如下错误：//这个是vuex未被vue.use()注册Uncaught ReferenceError: u is not def
2022-01-27 11:37:34
2099
原创 vue2.x webpack3安装sass的坑
类似于这样的报错：通常解决办法（可查看官网）：npm install -D sass-loader sass如果不是用的vuecli，还要配置如下（webpack.base.cnofig.js）:module: { rules: [ //..., { test: /\.scss$/, loaders: [ 'vue-style-loader', 'css-loader',
2021-05-17 14:02:19
1370
原创 create-react-app搭建没有src文件等
如果运行一下命令：npx create-react-app my-app没有出现scr、public等文件，可能是create-react-app的版本太低，可以运行以下卸载create-react-app，之后重新运行上面命令行：creact-react-app -V //查看版本 or creact-react-app --versionnpm uninstall create-react-app -g//先尝试： 文件路径 rm -rf create-react-app//rm
2021-02-08 14:55:19
272
原创 对象属性排序
en…就突然注意到浏览器控制台response和review返回的数据是有区别的，当时这个项目场景是我看的review数据明明是按年龄顺序走的，但页面charts图表咋个是个乱序，，结果打开response一看。。。。。嗷~数据返回类似这样：var obj = {"30-34岁":{'number': 33, 'ratio': 33%},"25-29岁":{'number': 20, 'ratio': 20%},"40-44岁":{'number': 15, 'ratio': 15%},"35-39岁"
2020-10-13 15:18:57
1431
原创 有趣的css background属性运用
原文链接可以直接复制demo查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><styl
2020-09-28 15:47:10
109
原创 去除数组中某一属性值相同的对象元素
let filter_arrObj = [];let arrObj = [ { name: 'xiaoqing', age: 15, sex: 0 }, { name: 'xiaoming', age: 12, sex: 0 }, { name: 'xiaobai', age: 21, sex: 0 }, {
2020-09-24 16:58:59
1218
原创 原型链分析
ps：这一part我们主要对new Array→Array→Function→Object这条链展开首先各个对象展开结构如下：new Array对象属性只有_proto_Array对象属性结构：Function对象属性结构：Object对象属性结构：分析上面各个对象结构可以总结如下：每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）实例化对象没有prototypevar arr = new Array()arr.prototype === und
2020-05-15 15:27:09
145
原创 img白边问题
像这样img多余的’border‘不知道大家有没有开发中遇到过：<img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.文档<img>元素没有基线，因此当图像在具有vertical align:b
2020-05-13 16:49:42
736
原创 Http简析
HTTP概述HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。基于HTTP的组件系统HTTP是一个client-server协议：请求通过一个实体被发出，实体也就是用户代理。每一个发送到服务器的请求，都会被服务器处理并返回一个消息，也就是r
2020-05-11 15:38:46
200
原创 http状态码总结
HTTP状态码当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。HTTP状态码分类HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：分类分类描述...
2020-05-04 19:46:37
107
原创 前端性能优化
ps：面试的时候常常会问道前端性能优化有哪些方面？作为前端，我们最直观的接触用户，即用户第一眼看到的是前端的网站界面，所以作为前端我们一定要站在用户角度去优化网站，让用户有个完美的初体验，做好第一棒交接。Content1. 减少http页面请求80%的用户最终响应时间花费在前端上，大部分时间花在下载页面组件上包括图片、样式、js、flash等等，所以基于以上减少页面组件数量是减少http请...
2020-04-29 10:12:20
128
原创 webpack4.0代码分离
抽离类库代码分离css文件打包（mini-css-extract-plugin）缓存chunkhash、hash图片压缩mode: development
2020-04-27 22:23:31
426
原创 webpack4.0 + vue2.0 (一)
npm init -ypackage.json配置main：es5编译入口文件npm i 各种dev如果遇到babel-loader和babel-present-esxx，npm un babel-present-esxx ,参照https://segmentfault.com/p/1210000008466178vue 启动时，如果出现以下错误把node_modules 删...
2020-04-24 12:23:41
230
原创 webpack server.js本机模拟数据
文件路径data.json{ "seller": { "name": "粥品香坊（回龙观）", "description": "蜂鸟专送", "deliveryTime": 38, "score": 4.2, "serviceScore": 4.1, "foodScore": 4.3, "rankRate": 69.2, "...
2020-04-18 10:12:47
229
1
原创 vue源码随记（一）
// Browser environment sniffing // 浏览器嗅探 利用浏览器嗅探可执行适应不同操作 var inBrowser = typeof window !== 'undefined'; var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform; v...
2020-04-14 21:06:45
123
原创 vue的replace方法解析
vue.js源码replace方法/** * Camelize a hyphen-delimited string. */ var camelizeRE = /-(\w)/g; var camelize = cached(function (str) { return str.replace(camelizeRE, function (_, c) { return c...
2020-04-14 13:09:09
21244
原创 vue函数缓存
vue.js源码函数缓存/** * Create a cached version of a pure function. */ function cached (fn) { var cache = Object.create(null); return (function cachedFn (str) { var hit = cache[str];...
2020-04-14 10:32:09
319
原创 谈谈对vue的理解
谈谈对vue的理解（基于vue2.0）Vue.js 的组件化机制Vue.js 的响应式系统原理Vue.js 中的 Virtual DOM 及 Diff 原理Vue.js概述Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一...
2020-03-28 20:09:14
3810
1
原创 跨域设置proxy
如webpack项目中存在跨域问题，开发时解决方案如下：可查看webpack文档http-proxy-middleware是用于服务器代理请求，例如本地开发http://localhost:9090的服务器A需要请求端口号为8080的B服务器，可通过设置proxy的target属性请求目标服务器B第一步：安装http-proxy-middlewarenpm i http-proxy-m...
2020-03-27 20:53:09
429
原创 数组&字符串学习
创建数组var arr = new Array(8) //代表创建的数组长度var arr1 = new Array(5,4,3,3,'test') //调用两个或多个数组元素或者数组的一个非数值元素，参数将会成为新数组的元素数组方法arr.push()和arr.unshift()向数组追加元素，返回新数组长度，改变原有数组arr.pop()和arr.shift()删除...
2020-03-15 13:02:38
64
原创 浅析javascript执行机制
javascript是一门单线程语言，Event Loop是javascript的执行机制堆对象被分配在一个堆中，即用以表示一大块非结构化的内存区域。javascript变量存储可以配合上图理解，变量分为基础变量和引用变量，基础变量直接存在堆中且直接赋值，引用变量堆中仅存储变量名称和变量赋值地址，引用变量地址指向栈结构（变量结果值存在于栈中，这就涉及到深拷贝、浅拷贝问题喽）队列（Qu...
2019-12-31 18:35:22
128
原创 setInterval只执行一次？
遇到的问题：setInterval函数只调用了一次？// 实例化vue对象 new Vue({ el:"#vue-app", data:{ name:"hello vue" }, created() { setInterval(this.test(),1000) ...
2019-12-25 16:34:38
2115
原创 关于对象、数组的深拷贝总结
var arr = [“a”,“b”];var arrCopy = arr;arrCopy[1] = “c”;arr // =&gt; [“a”,“c”]对于对象和数字都存在这种问题浅拷贝，上述的可以遍历递归等方法赋值，数组还有contact内置方法我的终极方法。。。。（多层嵌套也适用）对象直接转成字符串然后赋值不存在栈的存储JSON.stringify()；然后用JSON.par...
2019-12-13 11:10:14
389
原创 小程序自定义组件
ps: 这是对之前小程序自定义键盘搞成组件形式组件json文件声明{ "components": true, "usingComponents": {}}Component({ behaviors: [], properties: { }, data: { }, lifetimes: { created: function () ...
2019-12-05 17:30:52
397
原创 用css画出无数个同心圆
/* background(repeating-radial-gradient)/border/box-shadow(可设置多个) *//* 添加伪元素 *//* css样式 */.gradient{ width:150px; height: 150px; border-radius: 50%; background: repeating-radial-gr...
2019-12-03 11:41:51
710
原创 网页性能优化
（这些事废话大家随意ha）之前一直不太注意这方面的需求，而且项目代码量也不是很多看起来好像没什么前端性能方面的问题，加之公司项目方面也没太要求，所以我就似偷懒了嘛，氮素最近面试还是总结下吧hhhhh首先造成前端性能方面的东西从最基本的页面渲染方面那就是重排和重绘“重绘"不一定需要"重排”，“重排"必然导致"重绘”。参考博客看这里原文链接例如：一般来说，样式的写操作会造成页面的重新渲染...
2019-11-19 18:23:02
299
原创 小程序自定义键盘车牌号输入
page { background: rgba(248, 248, 248, 1); display: flex; flex-direction: column; justify-content: flex-start; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC"...
2019-11-18 14:54:57
1270
原创 微信h5网页分享好友
最近公司做一个抽奖页面分享好友抽奖次数增加，需要调微信js-sdk步骤一<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>步骤二配置...
2019-09-26 12:56:25
1325
原创 mouseover、mouseout区别
共同点都是从元素外面移入里面的时候会触发mouse事件区别jquery/mouseout docThis event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this exa...
2019-09-10 16:24:56
132
原创 浅说跨域
一直以来都对跨域不太清楚，除了对协议、域名、端口其他就不甚了解跨域通常解决方法：因为script、link、img等的src不存在跨域问题，所以我们可以通过做这些跳过浏览器跨域，但是这些都是解决get请求的，可前端解决，如果存在post请求根本上还是后台解决，设置允许跨域除了以上的会造成跨域问题，还有一个是最近一个vue+axios项目需要在header里面设置token加密验证，因为这种需要...
2019-09-09 18:28:30
65
原创 vue系列之provide / inject
vue官方provide / inject：This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy ...
2019-09-09 16:31:19
90
原创 css实现选项卡
//html内容<div class="toggleDemo"> <input type="checkbox" id="tabCheck" style="display:none"> <div class="tabBox1"> tab1 </div> <div class="tabBox2">...
2019-07-26 17:41:20
254
原创 下载文件的处理
下载文件的处理直接a标签处理<a style="color:#fff" href="<下载链接>" >导出</a>js处理可添加token处理：let elink = document.createElement(‘a’);elink.download = “文件名字.xls”;elink.href = ${url}?token=${token}...
2019-07-25 14:10:44
217
原创 axios post请求get请求对传参的操作
axios post请求get请求对传参的操作特别说明axios get传参axios post传参特别说明//以下都是基于 headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" }axios get传参1.params传参： this.$http({ ...
2019-07-25 13:57:30
2737
原创 数组去重方法总结
数组去重第一种方法：es6的new Set()function dedupe(array) { return [...new Set(array)] //写法：Array.from(new Set(array)); new Set(arr)返回的是set结构对象，Array.from方法可以将 Set 结构转为数组。}var arr = [1,2,2,3,3,4,4,5,5...
2019-07-02 22:26:12
85
原创 action和mutation区别小记
action官方解释：可执行异步操作，而mutation只能执行同步操作不是突变直接操作state值，而是commit mutation之后由mutation操作state可以理解为如果业务中存在异步操作可用action，操作state唯一的途径时mutation；actions并不一定要, 但是mutation是必须要的, state的值, 只能通过mutation来编辑...
2019-06-30 21:29:46
3079
原创 v-if vs v-show
v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.v-if is also lazy: ...
2019-06-24 20:27:35
59
原创 vue的computed
<div id="example"> {{ message.split('').reverse().join('') }}</div>官方代码：这样复杂的逻辑会使vue页面变得累赘，使得你的代码more than once to parse，所以这时候引入了 computed property<div id="example"> <p v-...
2019-06-24 12:09:47
81
原创 vue生命周期
<!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-UA-Com...
2019-06-23 20:00:39
61
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人