
前端核心技术总结
文章平均质量分 94
各种笔记
北极光之夜。
生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命!
展开
-
微信小程序用canvasToTempFilePath压缩图片,开发工具压缩正常而真机上比例失调
上传图片时有些图片太大了,需要压缩质量大小再上传。下面展示压缩质量大小上传,也是我踩过得坑:开发工具上压缩正常而在真机上比例失调。主要是用 wx.canvasToTempFilePath 方法。原创 2022-08-23 14:57:02 · 4008 阅读 · 3 评论 -
5分钟实现微信小程序绘制二维码
hello呀,大家,真是好久不见。在我们日常生活中,经常使用微信小程序亮健康码,那么就好奇前端怎么实现的,其实也并不难,下面5分钟带你快速实现~原创 2022-07-06 16:27:19 · 12405 阅读 · 5 评论 -
浅谈typescript及语法
标题强类型不允许随意的隐式类型转换,而弱类型是允许的标题1.声明原始数据类型:在变量后面指定一个关键字表示其只能为什么类型。string类型:const a: string = 'auroras'number类型:const b: number = 666 // 包括 NAN Infinityboolean类型:const c: boolean = truenull类型:const d: null = nullundefined类型:const e: undefined原创 2022-02-14 14:16:21 · 419 阅读 · 1 评论 -
Es6新特性Proxy代理用法解析
一.什么是Proxy:Proxy 对象是ES6新出的一个特性,用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。需要知道的是,在Vue2中双向数据绑定原理(数据劫持)采用Object.defineProperty,而在Vue3中数据劫持原理采用的是Proxy代理。为什么Proxy会取代Object.defineProperty:Object.defineProperty只能劫持对象的属性,不能监听数组。也不能对 es6 新产生的 Map,Set 这些原创 2022-02-14 14:15:26 · 9914 阅读 · 2 评论 -
前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】
大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我来啦~很久以前我写过一篇vue上传图片并显示的文章。 但是上次只是写了前端的,并没有把图片存储在服务器~所以这次出了2.0版本,哈哈,通过node简单写了接口,实现前后端结合!下面是详细代码实现!原创 2022-01-23 15:39:13 · 7746 阅读 · 4 评论 -
vue封装echarts并实现大小动态自适应变化---超有用哇
大家好呀~echarts不就是去官网复制然后粘贴吗,为什么要封装?1.减少代码量,每次只要传宽度,高度与option配置项便能快速生成图表。2.原先的echarts并不能自适应屏幕大小变化。3.原先的echarts并不能自适应父盒子大小变化。原创 2022-01-14 16:03:55 · 5875 阅读 · 12 评论 -
初学福音,手把手带你vue封装弹框组件并全局注册使用~
大家好呀,好久不见,最近还好吗?今天分享个vue封装弹框组件的内容,并全局注册它,虽然内容比较简单,但是刚入门vue的小伙伴可以友好的了解组件封装思想~ (最后有完整源码)原创 2022-01-07 10:54:08 · 2636 阅读 · 4 评论 -
webpack5快速入门,船新版本,建议收藏 (ฅ´ω`ฅ)
目录一. 快速上手:1.1 Webpack功能:1.2 安装webpack:1.3 快速模拟搭建一个项目目录:1.4 webpack打包:二.基本使用:2.1.配置文件:2.2.loader:2.2.1 css-loader:2.2.2 style-loader:2.2.2 less-loader:2.3 browserslist:2.4 postcss-loader:2.5 importLoaders:2.6 file-loader处理图片:2.6.1 在js里通过src导入的:2.6.2 在css里通过原创 2021-10-16 16:21:30 · 522 阅读 · 5 评论 -
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示。比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一些相对应的功能。但是,在实际的开发过程中,可能这些内置指令并不能满足所有的需求,这时候,就需要用到 Vue 给我们提供的一个强大又灵活的功能「 自定义指令 」。 同样,vue自定义指令可以分为全局注册指令和局部注册指令。下面我将以最简单的例子带你认识vue自定义指令。二.全局注册指令: 比如,我们想要原创 2021-09-30 14:59:29 · 3058 阅读 · 4 评论 -
你了解Vue组件间传值五大场景吗?
一.前言:。。。 一.前言:二.父组件向子组件传值:三.子组件向父组件传值:四.兄弟组件间传值:五. 使用Vuex状态机传值:六. 给后代组件传值,provide和inject:二.父组件向子组件传值:比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件,完成共需四步:父组件 Father.vue 内容,注意里面的操作步骤:<template> <div> <h2>父组件区域</h2> <原创 2021-09-26 10:59:17 · 564 阅读 · 2 评论 -
ES6模块化用法全解析
以前浏览器常用的模块化规范有 AMD(代表Require.js)和 CMD(代表Sea.js),但是都落伍了。服务端有 CommonJS规范。不过也不是标准的。最终ES6官方提出了大一统的模块化规范,这也是目前浏览器与服务端的通用规范。原创 2021-09-21 15:57:06 · 2045 阅读 · 3 评论 -
三分钟掌握Vue过滤器filters及时间戳转换
大家好呀,vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法~原创 2021-09-20 17:05:54 · 1635 阅读 · 3 评论 -
人类高质量JS函数柯里化
一. 速识概念????: ????????????你好呀,最近还好吗?JS函数柯里化是比较常见也是比较重要的内容。基础并不难理解,下面带你快速了解并使用js函数柯里化~ 芜湖,起飞 ???? 百度百科对柯里化的定义为:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。概念枯燥难懂,直接看下面的例子。比如有个add函数,计算两个参数相加的值,一般我们这样写:function add原创 2021-09-14 20:48:39 · 677 阅读 · 1 评论 -
人类高质量JS函数继承
一. 函数继承是在JS里比较基础也是比较重要的一部分,而且也是面试中常常要问到的。下面带你快速了解JS中有哪几种是经常出现且必须掌握的继承方式。掌握下面的内容面试也差不多没问题啦~ 当然,这需要一定的原型链基础,对原型链不熟悉的可以看我这篇文章:速识js原型链。二.原型链继承: 原型链继承的要点在于父类的实例作为子类的原型。直接看下面这个例子: // 父函数 Person function Person(name, age) { // 定义一些属性 this.name原创 2021-09-05 12:01:31 · 849 阅读 · 9 评论 -
人类高质量JS防抖与节流机制
一.速识防抖: Hello呀,大家好????????????。防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~在这之前,比如我们先定义一个按钮,并绑定一个点击事件,执行要触发的事件:<!-- 定义一个按钮 --><input type="button" id="btn" value="按钮" /><script>// 获取标签 var btn = document.getElementById("btn");//原创 2021-08-29 17:30:59 · 2883 阅读 · 19 评论 -
极简之vue插槽的快速了解与应用
一.速度上手: ????你好呀(*´▽`)ノノ。vue插槽是比较常见的一个知识点,所以下面快速的介绍下它的用法。简单来说,vue插槽的作用就是父组件可以向子组件传递内容,同时,他还可以扩展、复用和定制组件。 什么意思?比如我定义了一个父组件和一个子组件,当我在父组件里引用的子组件标签里写的内容是显示不出来的。如下: 比如,有一个 Father.vue的组件,它引入了子组件Children.vue,同时在子组件标签里定义了一个h1标题。<template> <div>原创 2021-08-22 21:58:49 · 405 阅读 · 3 评论 -
前端必会的图片懒加载,你造吗?
一.何为懒加载: 在我们访问一个图片展示比较多的网页时,加载速度慢很多时候正是因为图片多导致,大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面,若用户只查看了网页的前面部分便离开,许多已经加载却因为处于网页底部而未呈现在视口区的图片,它们极大加重服务器压力了但是用户看都没看,白白浪费了性能。 为了解决上面的问题需要引入图片懒加载,懒加载其实很好理解,重点就是一个‘懒’字。当用户滚动相应可视区域,若可视区域有图片便加载,而在可视区域外未加载过的图片它原创 2021-08-19 23:01:45 · 2148 阅读 · 9 评论 -
js对象深浅拷贝,来,试试看!
一.速识概念????: 对象拷贝,简而言之就是将对象再复制一份,但是,复制的方法不同将会得到不同的结果。比如直接给新变量赋值为一个对象: // 1.建一个对象 var obj = { name: "北极光之夜。", like: "aurora", }; // 2. 直接将对象赋值给变量 clone var clone = obj; // 3.修改obj的like属性 obj.like = "wind"; // 4.输出 clone 对象 console.原创 2021-08-15 14:30:18 · 482 阅读 · 5 评论 -
你这篇速识 js闭包 保熟吗?我一写博客的能写生瓜蛋子?
一.速识闭包:直接说概念枯燥难懂,直接通过下面两个小例子迅速了解闭包:????1.首先思考下面这个简单的小例子,执行quote()函数,它 console.log(a) 打印的 a 到底是我们在局部函数里定义的 a=666 还是在全局里面定义的 a=888 呢? // 1.定义一个test函数 function test() { // 2.函数内部声明一个变量 a 为 666 const a = 666; // 3.retu原创 2021-08-11 21:40:40 · 922 阅读 · 3 评论 -
面试官:谈一谈js原型链机制? 我:告辞!
一.速识概念: 原型链可谓是面试频考,所以今天带大家快速了解下JavaScript的原型链机制????。说之前,先明确下面基本的概念(名称与从属关系),这是很重要的:名称从属关系prototype通常我们称之为原型,它是函数的一个属性,它是一个对象。_ _ proto_ _相当于一个连接点,它是对象的一个属性,它也是一个对象。二. 原型链机制(建议跟着步骤敲代码): 其次,我们要知道的第一个点是,对象的 __ proto __ 保存着该对象构造函数的prototy原创 2021-08-07 22:37:52 · 5673 阅读 · 30 评论 -
vue事件修饰符,六次实操带你快速了解与应用~
一.速识概念: 你好呀,最近过的怎么样?今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~???? 先引用vue官网的话说----在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。原创 2021-08-07 14:27:12 · 604 阅读 · 1 评论 -
Vue Router 导航守卫快速了解与上手应用
一.简介与小案例: 在我们通过 vue-router 路由发生跳转时的,也可以用导航这一词概括。导航就是表示路由正在发生改变。而导航守卫就可以说成是监听这一改变。当路由跳转时不能直接跳转,会先经过导航守卫设定的条件,通过条件判断接下来该执行什么操作,给不给跳转,或者应该跳到哪里,或者其它操作。 先不谈 vue 提供的导航守卫,假如我们要自己实现 ‘守卫’ 该怎么实现呢?下面有一个小案例,快速了解 ‘守卫’ 概念。 1.首先新建了一个vue脚手架项目,并新建一个login.vue与user.vue原创 2021-07-26 11:53:31 · 662 阅读 · 16 评论 -
前端响应式布局与Bootstrap栅格系统快速了解与应用
一.响应式开发快速了解:你好呀~(♥◠‿◠)ノ ,不知道你看到这篇文章的时候是几点了,不过我现在是深夜00:15分。每次到这个时间我反倒有了种安心的感觉,没有消息没有通知没有什么会打扰我。我喜欢夜晚这种静谧的感觉,特别是夏天的夜。出去抬头还能看到一闪一闪星星,我也喜欢星星。今天倒是没有什么特别的要分享的,那就分享一些前端基础的响应式布局的知识把。响应式开发可以使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。媒体查询就是使用 @media 查询,它可以针对不同的屏幕尺寸定义不同原创 2021-07-09 00:41:43 · 840 阅读 · 14 评论 -
极简Vue基础指令与方法
一.vue脚手架安装:二.页面基渲染 {{x}}:三.属性渲染 v-bind:四.快速渲染 v-for:五.条件渲染 v-if,v-else,v-show:六.监听DOM事件 v-on:七.双向数据绑定 v-model:八.变量识别标签v-html:九.八大生命周期钩子函数:十.watch监听器:十一.watch深度监听:十二.持续更新,建议收藏原创 2021-06-22 21:43:16 · 985 阅读 · 26 评论 -
flex布局练习题,面试必备,持续更新建议收藏~
现在网页布局大多都是flex布局,像浮动这些用得比较少,在面试中flex也是被经常问到的。而有些同学学完flex后,又不懂怎么练习巩固,所以,所以,所以,我汇聚了一些常见的flex的练习题案例,写完再次加强掌握flex~原创 2021-06-15 18:12:18 · 5835 阅读 · 53 评论 -
一文带你弄懂Vue八大生命周期钩子函数
一.我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期。而生命周期函数,就是在某个时刻会自动执行的函数。原创 2021-06-12 22:17:59 · 2899 阅读 · 49 评论 -
一文快速了解与应用Vue-Router路由
一.速识概念:1. 后端路由:1.根据不同的用户URL请求,返回不同的内容,本质上是URL请求地址与服务器资源之间的对应关系。 2.但是呢,后端渲染存在性能问题。 2. 前端路由: 3.所以出现了Ajax前编渲染*,前端渲染能提高性能,但是不支持浏览器的前进后退操作。原创 2021-06-09 12:59:33 · 494 阅读 · 12 评论 -
Vuex状态机快速了解与应用
一. 速识概念:1. 组件之间共享数据的方式:通常有以下几种方式:父向子传值:v-bind 属性绑定;子向父传值:v-on 事件绑定;兄弟组件之间共享数据:EventBus; $emit 发送数据的那个组件; $on 接收数据的那个组件;2. vuex是什么:按照官方的话来说,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 V原创 2021-06-05 17:23:45 · 1599 阅读 · 24 评论 -
ES6➜ES11新特性汇总(图文详解可温故与快速查找~)
文章目录:一.ES6新特性:1. let 声明变量:2.const 声明常量:3.变量解构赋值:3.模板字符串:4.对象简化写法:5. 箭头函数:6.函数参数的默认值设置:7. rest参数:8.扩展运算符:9. Symbol:10. 迭代器:11.生成器:12.promise:13. Set(集合):14.Map:15.class类:一.ES6新特性:1. let 声明变量:书写格式:let a;let b,c;let d=10,f='asd',e=[];注意事项:1.变量不能重复声明:原创 2021-05-26 15:16:07 · 1423 阅读 · 19 评论 -
axios入门使用笔记
Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。原创 2021-05-20 15:02:01 · 1774 阅读 · 8 评论 -
JS数据结构与算法学习笔记大全 (温故而知新,可以为师矣。)
一.数据结构简介(序):1.1 概念程序设计 = 数据结构 + 算法。1.2 概念数据 = 符号(1). 其可以输入到计算机中。(2). 能够被计算机识别和处理。1.3 分类数据分为:(1).数据元素:数据的基本单位,也称为结点或者记录。(2).数据对象: 相同特性的数据元素的集合,是数据的一个子集。(3).数据项: 独立含义的数据的最小单位。数据的目的是存储,存储的目的是后期的再利用。1.4 作用数据结构的主要作用是:阐述关系。如何存储具有复杂关系的数据更有助于后期对数据的再原创 2021-05-17 16:21:59 · 5545 阅读 · 47 评论 -
Node.js简单总结笔记
一.Node.js简介与安装:1.1 简介: 1.Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。 2.Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好,V8引擎执行Javascript的速原创 2021-05-05 00:01:52 · 2174 阅读 · 6 评论 -
Ajax简单总结笔记
一.Ajax简介:AJAX技术能够实现无需重新加载整个网页,就可以更新部分网页内容。在WEB应用中AJAX使用十分广泛,百度,淘宝,京东等常见的PC端网页以及各种WEB APP, 随处可见它的身影,AJAX已经成为前端工程师的常备技能之一。当然,AJAX并不是一门编程语言,是一种将现有标准组合在一起的方式。二.JSON简介:现在应用Ajax一般用JSON格式。JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScr原创 2021-04-16 16:57:46 · 411 阅读 · 1 评论 -
前端Promise总结笔记
一.什么是Promise:Promise 是在 js 中进行异步编程的新解决方案。(以前旧的方案是单纯使用回调函数)从语法来说,promise是一个构造函数。从功能来说,promise对象用来封装一个异步操作,并且可以获得成功或失败的返回值。二.为啥使用Promise:promise使用回调函数更灵活。旧的回调函数必须在启动异步任务前指定。promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至能在异步任务结束后指定多个)pr原创 2021-04-16 16:44:59 · 9856 阅读 · 28 评论 -
SVG绘制文字特效 html+css
效果(源码在最后):实现:定义基本标签,main是底层盒子,text是文本,SVG标签用法看这里:<main> <svg width="500" height="200"> <text x="30" y="120" class="txt">北极光之夜。</text> </svg> <main> 定义文本标签text基本样式:原创 2021-03-09 13:38:17 · 2117 阅读 · 3 评论 -
前端SVG笔记与简单应用实例
一. 初识SVG1. 作用能够绘制一些CSS难以做到的复杂图像和动画。2. 基础语法(1)SVG代码全都放在顶层标签< svg > …< / svg >之中。(2)SVG也有宽高属性,< svg width=“100%” height=“50” > ,如果不指定宽与高,则默认大小 宽300px,高150px 。(3)如果只展示SVG图像的一部分。则要指定 viewBox 属性。...原创 2021-03-07 15:42:02 · 1540 阅读 · 9 评论 -
记一些CSS属性总结(二)
前言:I come back.记一些CSS属性总结(一)简单的总结的过程也是巩固基础的过程~内容:1.color: transparent;含义:可以让字体的颜色为透明。2.letter-spacing 属性:含义:增加或减少字符间的间距。语法:如letter-spacing:2px;letter-spacing:-2px3.background-attachment 属性:含义:设置背景图像是否固定或者随着页面的其余部分滚动。语法:scroll 默认值。背景图像会随着页面其余原创 2021-01-20 19:59:03 · 1492 阅读 · 9 评论 -
记一些css属性总结(一)
前言:今天刷短视频刷着刷着看了一个讲阿姆斯特朗登月可能看到外星人的视频,越看越上头,接着去又去搜看了他登月的场面~接着天马星空的感觉美国是不是隐藏外星人信息的事实,最终不由感叹宇宙真的是太大了,以至于自己身边的琐事都感觉没了意义,,,这可不行,还是发篇文章缓解缓解心情。至于文章,就如题,就是记录一些常见的css属性罢了。(以上为为我自言自语可跳过~)内容:1.transition属性:含义:过渡属性,通常用于鼠标经过元素时样式的改变。语法:transition: property durati原创 2020-12-17 19:02:29 · 4239 阅读 · 5 评论 -
Sass总结笔记 基础入门(超级直观细节)
一.什么是sass:Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简原创 2021-01-27 17:01:38 · 8255 阅读 · 19 评论