fifthThirteen-CSDN博客

原创 textarea 高度随内容增加而自动增加（不能减少）

const textWrap = document.querySelector('.cube-textarea-wrapper') const text = document.querySelector('textarea') const sH = text.scrollHeight + 'px' textWrap.style.heigh...

2019-09-18 10:07:22 2298

转载【转】变态的静态资源缓存与更新

这是一个非常有趣的非主流前端领域，这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题，入行到现在一直在学习和实践中。在我的印象中，facebook是这个领域的鼻祖，有兴趣、有梯子的同学可以去看看facebook的页面源代码，体会一下什么叫工程化。接下来，我想从原理展开讲述，多图，较长，希望能有耐心看完。让我们返璞归真，从原始的前端开发讲起。上图是一个“可爱”的...

2019-06-28 23:59:30 1902

原创 js定义输入框数字的格式

clearNoNum(val){ val = val.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符 val = val.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的 val = val.replace(".","$#$").replace(/\./g,"").replace...

2019-06-26 09:28:20 2283

由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主不才还望轻喷方法一将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文...

2019-06-18 12:16:31 2685 1

转载 electron-vue打包发布升级过程错误集合

electron-builder打包报错参考：https://blog.csdn.net/bailong1/article/details/78657605github release发布手动发布参考：https://blog.csdn.net/Eggy2015/article/details/52138751 ci发布参考：https://blog.sigoden.com/bui...

2019-02-22 11:02:26 373

转载 Math.random()实际应用

Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。Math.random() // 0.7151307314634323任意范围的随机数生成函数如下。function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min;}getRandomArb...

2019-02-18 13:26:04 299

转载 http请求之options请求

问题背景：vue axios 向后端发送post请求，从network中看到并无post请求，只有一个options的请求，状态码200首先，看一下为什么会有options请求在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Options请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Crede...

2018-12-18 21:09:34 533

原创 vue 图片压缩使用exif调整ios上旋转90度方向并上传

github地址安装方式：npm install exif-js --save或游览器本地引入：<script src="exif.js"></script>读取图像的元数据：在最近的活动中，遇到了用户上传图片时图片方向偏转的问题。针对这个问题，通过google得到exif.js可以获取照片的元数据，例如：拍照方向、相机设备型号、拍摄时间、ISO...

2018-12-13 14:22:29 3523 1

转载 vscode 插件推荐 - 献给所有前端工程师

VScode现在已经越来越完善。性能远超Atom和webstorm,你有什么理由不用它?在这里，我会给你们推荐很多实用的插件，让你对 vscode 有更深刻的体会，渐渐地你就会知道它有多好用。走马观花前，请先将你的 vscode 更新到最新版本。通用插件HTML Snippets超级实用且初级的 H5代码片段以及提示HTML CSS Support让 html 标签上写c...

2018-11-26 10:35:17 4675

转载【vue+axios】实现登录拦截

转载来源地址该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。准备你需要先生成自己的 Github Personal Token（生成Token）。Token 生成后访问 Demo，即...

2018-11-20 18:04:29 490

转载详解vue中router-link传参以及参数的使用

1.路径：http://localhost:8081/#/test?name=1 1 <router-link :to="{path:'/test',query: {name: id}}"> 跳转</router-link>(id是参数)使用：this.$route.query.id2.路径：http://localhos...

2018-11-09 17:48:08 369

转载 vue-router 基本使用

　路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。　　点击之后，怎么做到正确的对应，比如，我点击ho...

2018-11-09 17:30:37 2307

转载 vue-cli3的eslint配置问题

vue-cli3按照官网教程配置搭建后，发现每次编译，eslint都抛出错误error: Expected indentation of 4 spaces but found 0 (indent) at src\views\User.vue:26:1:1 error found.1 error potentially fixable with the `--fix` option.Y...

2018-11-07 12:10:27 8149

转载移动端项目中 @2x 图和 @3x 图的使用（需要支持css3）

移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) { background-image: url($ur...

2018-11-07 00:03:14 9505 1

转载 translate(-50%,-50%)实现居中

转载链接：http://www.imooc.com/qadetail/129282<body><div>这是用来测试的</div></body>/*CSS*/div{position:absolute;top:50%;left:50%; /*如果把这几行删掉，不可以居中 */border...

2018-11-06 11:01:36 1473

原创 Webpack 4+ 学习之模块热替换

模块热替换（Hot Module Replacement 或 HMR）是webpack提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。HMR 不适用生产环境，这意味着它应当只在开发环境使用。启用HMR根据前面的配置，只需要更新 webpack-dev-server的配置，然后使用webpack内置的HMR插件。之后删掉print.js的入口起点，因为它现在...

2018-10-31 16:11:18 774

原创 webpack4+ 学习之开发辅助

source map当webpack打包时，堆栈跟踪跟踪不到错误和警告在源码中的原始位置，只能简单的指向bundle.js。为了更容易的追踪错误和警告，javascript提供了source map 功能，将编译后的代码映射回原始源代码。在webpack.config.js中使用inline-source-map选项： const path = require('path');...

2018-10-31 14:39:36 131

原创 js获取游览器和屏幕的各种宽度高度

1.游览器窗口可视区域大小，网页可见区域宽高，不包括工具栏和滚动条// IE9+,chrome,firefox,opera,safariwindow.innerHeight // 游览器矿口的内部高度window.innerWidth // 游览器窗口的内部宽度// ie8 ie7 ie6 ie5document.documentElement.clientHeight // 表示...

2018-10-30 17:03:29 295

原创 webpack 4+ 学习之管理输出

准备新增/src/print.jsexport default function printMe() { console.log('I get called from print.js!');}在src/index.js中使用这个函数src/index.jsimport _ from 'lodash';import printMe from './print.j...

2018-10-30 15:26:58 248

原创 webpack4+学习之管理资源

0.准备<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

2018-10-30 11:13:48 125

原创 webpack4.+ 学习

在游览器中，同一个html文件下的一个或多个js文件需要依赖上一个js文件时，需要暴露的变量必须要用到window.msg = 'msg'，带来的问题是全局变量可能会被覆盖，比如引入的各种库。但是在node环境下，（在操作系统里运行）不需要定义全局变量，只需要暴露出去就可以。在node中，所有的文件都是一个个的模块，任何一个模块都只有一个入口，一个出口，在node下执行。（用写后端语言的方式写...

2018-10-29 16:50:17 142

原创 vue 插槽

1.匿名插槽 <div id="app"> <my-slot> <h2 style="background-color: seagreen">你好</h2> </my-slot> </div> <templ

2018-10-25 13:18:55 101

原创 vue 的data选项

验证data选项必须是函数函数时，数据没有共享，互相独立 <div id="app"> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my

2018-10-25 11:27:48 175

原创 vue 组件学习

1.通过选项-创建全局组件流程：创建组件构造器->注册组件->使用 <div id="app"> <my-date></my-date> </div> <script src="js/vue.js"></script>

2018-10-25 11:19:01 107

原创 ES6 学习之函数扩展

// 形参设置默认值 // function sum(num1, num2) { // num1 = num1 || 10; // num2 = num2 || 10; // console.log(num1 + num2); // } // sum(); ...

2018-10-24 14:50:13 82

原创 ES6 学习之内置对象扩展-模板字符串，数组、对象的扩展，延展操作符

// 模板字符串 let str = '适合敲代码'; let className = 'test'; let html = `<html> <head></head> <body> ...

2018-10-24 11:36:44 171

原创 ES6 学习之 class 及demo 绘制小球

// 构造函数 // function Person(name, age) { // this.name = name; // this.age = age; // } // Person.prototype = { // constructor: Person...

2018-10-24 10:58:25 220

原创 ES6 学习之 symbol

ES5的对象属性名都是字符串，容易造成属性名冲突ES6引入新的原始数据类型Symbol,表示独一无二的值对象的属性名可以有两种类型，一是字符串，二是Symbol类型 // 定义 let str1 = Symbol(); let str2 = Symbol(); console.log(str1 === str2); ...

2018-10-24 10:04:31 80

原创 ES6 学习之数据集合

1. set 使用 let set = new Set(['zhangsan', 'lisi', 'wangwu', 'wangwu']); console.log(set); // Set(3) {"zhangsan", "lisi", "wangwu"} 去重 console.log(set.size); // 相当于length ...

2018-10-24 09:55:51 235

原创 ES6 学习之解构赋值

ES6允许按照一定模式从数据和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)1.基本用法// let name = '张三', // age = 18, // sex = '男'; let [name, age, sex] = ['李四', 20, '女']; name = 'aaa'; ...

2018-10-22 18:01:31 95

原创 ES6 学习 let & const

1.let1.1 作用于只局限于当前代码块，var作用于当前函数的作用域 { let str = '张三'; var str1 = '李四'; console.log(str); console.log(str1); } console.log(s...

2018-10-19 11:37:05 138

原创 CSS3属性 box-sizing

规定两个并排的带边框的框：div{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left;}box-sizing: content-b...

2018-10-18 16:04:19 275

原创 vue-cli 3.0版本学习

github地址 docs文件夹文档地址安装vue-cli 3.0 方式 npm install -g @vue/clivue-cli 3.0创建工程的方式和2.0不一样create 代表可以创建一个新的项目 vue create vue3-demoadd 在已创建的项目中添加新的插件invoke 在已创建的项目调用插件inspect 检查webpack的配...

2018-10-12 16:47:57 1646

原创 javaScript 基础学习篇之 Array对象

1.静态方法1.1 Array.isArray()Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。var arr = [1, 2, 3];typeof arr // "object"Array.isArray(arr) // true上面代码中，typeof运算符只能显示数组的类型是Object，而Array.isAr...

2018-10-12 10:05:27 90

原创 javaScript 基础学习篇之属性描述对象存取器及对象的拷贝

1.Object.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor()方法可以获取属性描述对象。它的第一个参数是目标对象，第二个参数是一个字符串，对应目标对象的某个属性名。var obj = { p: 'a' };Object.getOwnPropertyDescriptor(obj, 'p')// Object ...

2018-10-11 17:58:35 207

原创 javaScript 基础学习篇之 Object对象静态方法与实例方法

静态方法1.Object.keys(),Object.getOwnPropertyNames()Object.keys方法和Object.getOwnPropertyNames方法都用来遍历对象的属性。Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名。var obj = { p1: 123, p2: 456...

2018-10-11 17:24:28 173

转载 javaScript 基础学习篇之包装对象

目录1.定义2.实例方法2.1 valueOf()2.2 toString() 3.原始类型与实例对象的自动转换 4.自定义方法 1.定义对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”。所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Numb...

2018-10-11 15:46:40 101

原创 javaScript 基础学习篇之 console对象

console.log(),console.info(),console.debug() console.log方法用于在控制台输出信息。可以接受一个或多个参数，将它们连接起来输出。console.log("Hello World");// Hello Worldconsole.log("a","b","c");// a b c ...

2018-10-11 15:18:11 127

原创 vue 跨域请求(fetch/axios/proxytable)

#### 跨域接口地址: http://www/thenewstep.cn/test/testToken.php#### 参数： username,password#### token: f4c902c9ae5a2a9d8f84868ad064e706#### 请求类型: post#### 请求头: Content-type:application/json在app.vue中写个钩...

2018-08-03 11:02:59 482

原创 vue中使用http vue-resource

1.安装vue-resource模块npm install vue-resource --save-dev2.重启vuenpm run dev3.在main.js中引入vue-resource模块import VueResource from 'vue-resource'5.在main.js中使用VueResourceVue.use(VueResource)...

2018-08-03 10:17:47 192

空空如也

空空如也