大吕十六不见长安-CSDN博客

原创从浅入深学习TypeScript，通俗易懂——基础类型

从浅入深学习TypeScript，通俗易懂一、TypeScript是什么？二、使用步骤1.引入库2.编译ts文件2.运行ts文件3.原始数据类型4.任意值总结一、TypeScript是什么？TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。TypeScript 增加了代码的可读性和可维护性类型系统

2020-09-09 14:51:40 211

原创前端必须掌握知识点——Javascript数据类型

Javascript数据类型总结JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。对象数据类型包括： object1、Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。2、Null

2020-09-09 14:41:27 176

原创 WEB安全防护三大漏洞场景和原理

WEB安全防护三大漏洞场景和原理一、WEB漏洞是什么？二、详解1.XSS跨站脚本攻击2.CSRF跨站请求伪造3.SQL注入（高危）总结一、WEB漏洞是什么？WEB漏洞通常是指网站程序上的漏洞，可能是由于代码编写者在编写代码时考虑不周全等原因而造成的漏洞，常见的WEB漏洞有Sql注入、Xss漏洞、上传漏洞等。二、详解1.XSS跨站脚本攻击处理方案：客户提交数据进行校验，转移处理原理：添加了代码嵌入到web中，盗取用户信息2.CSRF跨站请求伪造场景：钓鱼网站，创建的是用户想要进入的一样

2020-09-09 11:06:17 581

原创 webpack深入配置详解

webpack深入配置详解一、webpack是什么？二、使用步骤1.创建文件vue.config.js2.配置webpack总结一、webpack是什么？WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。a:模块化，让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能

2020-09-08 20:57:59 148

原创 vue项目中使用数据可视化工具ECharts

vue项目中使用数据可视化工具ECharts一、ECharts是什么？二、使用步骤1.引入库2.使用总结一、ECharts是什么？ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。二、使用步骤1.引入库代码如下（示例）：npm install echart

2020-09-08 16:51:43 955

原创 vue项目webpack配置代理，报错代理失败，Proxy error: Could not proxy request xxx from xxx

vue项目webpack配置代理，报错代理失败，Proxy error: Could not proxy request xxx from xxx解决思路1.原因总结解决思路1.原因1.是因为代理对象没有开启服务，不能访问到对象服务器2.代理规则写错总结good morning...

2020-09-07 10:37:42 42563 15

原创电脑连接了wifi但是不能访问Intel，window诊断网络为：远程计算机或设备将不接受连接

电脑连接了wifi但是不能访问Intel，window诊断网络为：远程计算机或设备将不接受连接解决步骤1.原因是使用了VPN后代理服务没有关闭2.首先打开谷歌浏览器3.找到谷歌的设置功能4.找到计算机的代理设置5.划到最下面总结解决步骤1.原因是使用了VPN后代理服务没有关闭2.首先打开谷歌浏览器3.找到谷歌的设置功能4.找到计算机的代理设置5.划到最下面总结good night...

2020-09-07 10:06:25 3539

原创 VUE框架深入——自定义指令directive

VUE框架深入——自定义指令directive一、自定义指令directive总结一、自定义指令directive注册一个全局自定义指令 v-focusVue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令，组件中也接受一个 directives 的选项directives: { focus: { /

2020-09-06 19:43:18 267

原创 ES6系列——Map 和 WeakMap 数据结构

ES6系列——Map 和 WeakMap 数据结构一、Map二、WeakMap总结一、MapObject 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现const m = new Map();const o = {p: 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // false

2020-09-06 18:59:08 116

原创 VUE框架深入——计算属性computed和侦听器watch(深度监听对象属性的变化)

VUE框架深入——计算属性和侦听器一、计算属性computed二、侦听属性watch总结一、计算属性computed对于任何复杂逻辑，你都应当使用计算属性computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }计算属性默认只有 getter，不过

2020-09-05 20:55:42 1875

原创 ES6系列——Set 和 WeakSet 数据结构

ES6系列——Set 和 WeakSet 数据结构一、SetSet是什么Set 实例的属性和方法遍历Set二、WeakSetWeakSet 实例的属性和方法总结一、SetSet是什么ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) {

2020-09-05 19:26:04 106

原创深入理解js原型链和作用域链，了解作用域链和原型链的区别

深入理解js原型链和作用域链，了解作用域链和原型链的区别一、原型链二、作用域链三、原型链和作用域链的区别：总结一、原型链每一个构造函数都有一个prototype属性，这个属性就叫原型对象。每一个构造函数new出来的对象都有一个–proto–属性，这个属性指向原型对象。<script> function Car(){ //实例属性： //this.produce = ‘chevrolet‘, this.price = 8

2020-09-05 19:15:10 1123

原创闭包，堆栈，深浅克隆

闭包，堆栈，深浅克隆一、闭包二、使用步骤1.引入库2.读入数据总结一、闭包立即执行函数，函数后面的括号带的是实参var test = (function (i) { return function () { alert(i *= 2) }})(2);test(5) //字符串4二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seabo

2020-09-05 19:01:38 116

原创 http/https请求响应状态码大全

http/https请求响应状态码大全一、http和https协议是什么？二、状态码大全总结一、http和https协议是什么？HTTP协议：全称是HyperText Transfer Protocol，中文意思是超文本传输协议，是一种发布和接收HTML页面的方法。服务器端口号是80端口。HTTPS协议：是HTTP协议的加密版本，在HTTP下加入了SSL层。服务器端口号是443端口。二、状态码大全http请求1xx100是服务器接收到请求，但是没有响应2xx200是请求成功3xx是重定

2020-09-05 18:23:25 2441

原创 VUE框架深入——掌握keep-alive缓存加载慢，请求多的页面

VUE框架深入——掌握keep-alive缓存加载慢，请求多的页面一、keep-alive是什么？二、使用步骤1.在动态组件中的应用2.在vue-router中的应用3.刷新keep-alive缓存的页面总结一、keep-alive是什么？keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,简单一点来说就是从页面链接到其他页面后回退到页面不用在重新执行页面的代码,只会从缓存中加载之前已经缓存的页面,这样可以减少加载时间及性能消耗,提高用户体验性。二、使用步骤1.在动态组件中的应

2020-09-02 19:42:17 1454

原创纯js前端通过url地址，下载文件保存到本地

文章目录一、下载含有url的文件二、保存到本地并自动点击总结一、下载含有url的文件代码如下（示例）：// 下载含有url的文件function downloadUrlFile(url, fileName) { const url2 = url.replace(/\\/g, '/'); const xhr = new XMLHttpRequest(); xhr.open('GET', url2, true); xhr.responseType = 'blob';

2020-09-02 17:33:03 27773 4

原创前端post请求方式传参参数各种格式详解，form-data，application/x-www-form-urlencoded，application/json，text/xml

前端传参参数各种格式详解一、form-data二、application/x-www-form-urlencoded总结一、form-dataform-data格式一般是用来进行文件上传调用接口的时候参数data等于formDataconst formData = new FormData();formData.append('modelName', code);二、application/x-www-form-urlencoded表单的传参格式，常见的post传参格式data等于一个对象

2020-09-02 15:22:27 16960 1

原创 VUE框架深入——掌握mixins混入

VUE框架深入——掌握mixins混入一、mixins是什么？二、使用步骤1.创建mixins模板2.在需要的页面引用3.调用mixins中的方法4.使用注意事项总结一、mixins是什么？mixins（混入）是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、使用步骤1.创建mixins模板创建一个js文件，命名为initCos.js代码如下（示例）：export default init

2020-09-02 14:42:47 354

原创前端使用js控制腾讯云cos存储对象，优化静态文件存储读取的功能，获取预签名，上传下载，腾讯云大文件分块上传失败，报错跨域失败

前端使用js控制腾讯云存储对象，优化静态文件存储读取的功能，报错跨域失败一、对象存储是什么？二、使用步骤1.引入库2.引入作为模块3.前端使用固定密钥计算签名，该格式适用于前端调试4.下载对象5.上传对象6.调用cos上传下载跨域总结一、对象存储是什么？对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据

2020-09-02 14:15:30 2574

原创构建网站的前端思路分析

构建网站的前端思路分析重点1.性能优化2.UI设计3.向后兼容4.人性化总结重点重中之重肯定是用户的体验1.性能优化点击操作的流畅性、滚动事件的流畅性、加载页面的速度2.UI设计页面的美观页面的文字减少给人清爽的感觉3.向后兼容给以后需求的添加，优化留有空间4.人性化让用户可以发言，提意见列表、查询页面的输入框自动获取焦点总结good night...

2020-09-01 20:55:56 224

原创 ES6系列——深入浅出的讲解class语法，java类创建

ES6系列——深入浅出的讲解class语法，java类创建一、class语法是什么？二、使用步骤1.将E5语法转换成ES6语法总结一、class语法是什么？ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已二、使用步骤1.将E5语法转换成ES6语法本人亲测遇到过

2020-09-01 20:45:38 144

原创关于js堆栈内存问题

关于堆栈内存的闭包作用域问题情况解析1.第一种情况2.第二种情况3.第三种情况总结情况解析1.第一种情况let a = {}, b = Symbol('1'), c = Symbol('1');a[b] = 'abc';a[c] = 'cba';console.log(a[b])// abc// 因为b和c是symbol值，不会重复，除非使用Symbol的for创建// 所以啊a[b]即a[Symbol('1')]为'abc'2.第二种情况let a = {}, b = '0', c

2020-09-01 20:40:07 139

原创移动端响应式布局开发的三大方案

移动端响应式布局开发的三大方案一、media二、rem二、flex二、vh/vw总结一、media@media根据视口大小调整不同尺寸二、rem根据字体大小二、flex弹性盒子布局二、vh/vw把视口高度/宽度分成一百分，百分比布局总结good night...

2020-09-01 20:12:11 436

原创掌握盒子水平垂直居中的五大方案

掌握盒子水平垂直居中的五大方案一、第一种？二、第二种？三、第三种？四、第四种？五、第五种？总结一、第一种？使用绝对定位，这种方法需要知道box的高宽html,body { height: 100%; overflow: hidden;}.box { box-sizing: border-box; width: 100px; height: 50px; line-height: 48px; text-align: center; f

2020-09-01 19:40:33 137

原创四种浏览器盒子模型详解

四种盒子模型详解一、盒子模型是什么？二、使用步骤1.W3C盒子模型2.怪异盒模型3.弹性盒子(Flex Box)3.colomn布局盒子总结一、盒子模型是什么？网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。二、使用步骤1.W3C盒子模型标准

2020-09-01 11:16:22 2083

原创 Js FileReader图片加载，预处理本地缓存图片

Js FileReader图片加载一、FileReader是什么？二、使用步骤总结FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。一、FileReader是什么？ FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。二、使用步骤//获取文件名字的后缀名const prefix = img.name.split('.')[1]if (prefix !== 'jpg' && prefix !

2020-08-31 15:58:33 821

原创 js正则表达式大全，修饰符描述，表达式描述，元字符描述，量词描述，方法描述，属性描述

js正则表达式大全总结正则表达式修饰符修饰符用于执行区分大小写和全局匹配:修饰符描述i 执行对大小写不敏感的匹配。g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。m 执行多行匹配。方括号方括号用于查找某个范围内的字符：表达式描述[abc] 查找方括号之间的任何字符。[^abc] 查找任何不在方括号之间的字符。[0-9] 查找任何从 0 至 9 的数字。[a-z] 查找任何从小写 a 到小写 z 的字符。[A-Z] 查找任何从大写 A 到大写 Z 的字符。[A-z]

2020-08-31 11:55:18 175

原创 js字符串方法大全，concat()，indexOf()，replace()，slice()，split()，substr()，trim()，toString()使用方法

js字符串方法大全总结字符串方法charAt() 返回在指定位置的字符。charCodeAt() 返回在指定的位置的字符的 Unicode 编码。concat() 连接两个或更多字符串，并返回新的字符串。fromCharCode() 将 Unicode 编码转为字符。indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。includes() 查找字符串中是否包含指定的子字符串。lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

2020-08-31 11:54:26 652

原创 js数组方法大全，遍历数组方法every()，filter()，forEach()，map()，some()使用方法

数组方法大全总结数组方法concat() 连接两个或更多的数组，并返回结果。copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。entries() 返回数组的可迭代对象。every() 检测数值元素的每个元素是否都符合条件。fill() 使用一个固定值来填充数组。filter() 检测数值元素，并返回符合条件所有元素的数组。find() 返回符合传入测试（函数）条件的数组元素。findIndex() 返回符合传入测试（函数）条件的数组元素索引。forEach()

2020-08-31 11:53:28 592

原创在form表单元素上添加keyup键盘操作，点击回车触发事件，element组件上keyup失效，使用keyup

在form表单元素上添加keyup键盘操作，点击回车触发事件，element组件上keyup失效总结keyup用在input上用了element组件keyup事件加nativev-on:keyup.enter.native总结good morning

2020-08-31 11:45:35 557

原创对数组和对象进行操作，没有被vue监听到没有实时更新，如何操作让vue监听动态变化

对数组和对象进行操作，没有被vue监听到没有实时更新，如何操作让vue监听动态变化一、什么操作会导致vue监听不到1、对象的变化1、数组的变化总结一、什么操作会导致vue监听不到1、对象的变化受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的使用Object.assign()

2020-08-31 11:36:16 618

原创 vue-router的路由守卫，router.foreEach()，router.beforeResolve()，router.afterEach()使用方法

@TOC一、vue-router是什么？Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为二、router.foreEach()1.写在main.js文

2020-08-29 14:54:51 10104 2

原创 vue项目路由vue-router传参技巧，四种传参加接收的方式，this.$route.push

vue项目路由传参技巧，四种传参加接收的方式，this.$route.push一、vue-router是什么？二、使用步骤1.使用push进行页面跳转路由配置父组件配置子组件调用形参2.使用router-link跳转路由配置父组件配置子组件配置3.使用route的params传参路由配置父组件调用push方法，写入参数params子组件调用4.使用query接收参数路由配置父组件调用push方法子组件调用总结一、vue-router是什么？Vue Router 是 Vue.js 官方的路由管理器。它和

2020-08-29 14:00:41 1850

原创 web storage存储方式，localstorage和sessionstorage

web storage存储方式，localstorage和sessionstorage一、web storage是什么？二、使用步骤1.localstorage2.sessionStorage总结一、web storage是什么？提供一种在cookie之外存储会话数据的途径。提供一种存储大量可以跨会话存在的数据的机制。二、使用步骤1.localstoragelocalStorage的生命周期是永久性的。使用过后一定要记住清楚点，本地缓存过多会影响浏览器性能setItem的值时字符串，存入的是

2020-08-28 21:58:01 446

原创获取上传文件的后缀，.jpg,.png,.word,.xsl...使用方法split，lastindexOf，subtr

获取上传文件的后缀，.jpg,.png,.word,.xsl...使用方法split，lastindexOf，subtr一、使用详情使用场景使用效果总结一、使用详情使用场景有个需求，是上传的文件为2.2.jpg的图片使用代码如下（示例）：html现有字符串：{{message}}<br />使用split方法将字符串分割成数组{{splitMessage}}<br />找到数组中最后一个. 符号{{lastIndex}}<br />最后一个

2020-08-28 12:30:13 263

原创微信小程序在app.json文件中使用了tarbar之后，使用wx.navigatTo无法跳转页面，使用wx.switchTab

微信小程序在app.json文件中使用了tarbar之后，使用wx.navigatTo无法跳转页面，使用wx.switchTab一、微信小程序是什么？二、使用步骤1.创建tarbar2.使用wx.switchTab总结一、微信小程序是什么？2020年前端的趋势，小程序化二、使用步骤1.创建tarbar在app.json文件中代码如下（示例）： "tabBar": { "color": "#a9b7b7", "selectedColor": "#3498db", "bo

2020-08-27 18:19:11 343

原创 companyManagement项目home主页开发，使用热门gsap库开发炫酷2d动画

companyManagement项目home主页开发总结代码如下（示例）：<template> <div id="home"> <div class="container"> <div class="welcome"> <p> <a href="https://en.wikipedia.org/wiki/Red">Welcome</a> &lt

2020-08-27 18:11:23 247

原创 companyManagement项目nav导航栏公共组件

companyManagement项目nav导航栏公共组件一、nav是什么？二、代码1.引入库总结一、nav是什么？是一个用来帮助浏览web的工具二、代码1.引入库代码如下（示例）：<template> <div id="headerNav"> <div class="frame"> <div class="frame_img-div"> <img src="../assets/svg/wohensh

2020-08-27 18:06:28 365

原创在vue项目中使用gsap，实现极佳的2d动画效果

GSAP全称是GreenSock Animation Platform，是一个js动画框架，在vue项目中使用gsap，实现极佳的2d动画效果一、GSAP是什么？二、使用步骤1.引入库2.在vue中使用3.vue组件使用gsap完整代码总结一、GSAP是什么？GSAP全称是GreenSock Animation Platform，是一个js动画框架1、速度快。GSAP专门优化了动画性能，使之实现和css一样的高性能动画效果。2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLit

2020-08-27 17:41:19 6663

原创 [sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引

[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引一、报错信息？总结一、报错信息？代码如下（示例）：[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引解决方案总结good night...

2020-08-26 22:35:03 25288 8

最新热门、好看前端vue模板大全

threejs案例源码.rar

空空如也