- 博客(86)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 Vue中Mixin&extends的详细使用教程
认识Mixin目前我们使用组件化开发方式来开发应用程序，但是在不同组件之间存在一些相同的代码逻辑，此时我们希望对相同的代码逻辑进行抽取。在vue2和vue3中都支持使用Mixin来解决，Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个Mixin对象可以包含任何组件选项，当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中。官方定义MixinMixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin
2022-05-31 16:05:09
544
转载 帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
提示：不要排斥，静下心来，认真读完，你就搞懂了！(可以先看一下最后的总结部分再回过头来完整看完)1. 前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _，读作“dunder proto”，“doubl
2022-05-05 16:50:40
628
转载 Object.create()、new Object()和{}的区别
平时代码中必定会使用对象，通常是用最直接的字面量方法创建var obj = {}，最近在整理JS继承方式时遇到Object.create()也可以创建对象，另外，也可以用new Object()关键字创建。 那这三种方式有差别吗？直接字面量创建var objA = {};objA.name = 'a';objA.sayName = function() { console.log(`My name is ${this.name} !`);}// var objA = {// ..
2022-05-05 16:30:20
626
转载 js小技巧
数组先来看使用数组中常用的一些小技巧。数组去重ES6提供了几种简洁的数组去重的方法，但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重，可以使用... new Set()来过滤掉数组中重复的值，创建一个只有唯一值的新数组。const array = [1, 1, 2, 3, 5, 5, 1]const uniqueArray = [...new Set(array)];console.log(uniqueArray); > Result:(4) [1, 2, 3,
2022-04-27 10:36:45
77
转载 requestAnimationFrame用法
在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。一、相关概念为了理解 requestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：1. 页面可见..
2022-04-26 14:55:33
2045
转载 详解 JavaScript 中的模块、Import和Export
在互联网的洪荒时代，网站主要用 HTML和 CSS 开发的。若是将 JavaScript 加载到页面中，一般是以小片断的形式提供效果和交互，通常会把全部的 JavaScript 代码全都写在一个文件中，并加载到一个script标签中。尽管能够把 JavaScript 拆分为多个文件，可是全部的变量和函数仍然会被添加到全局做用域中。前端可是后来 JavaScript 在浏览器中发挥着重要的做用，迫切须要使用第三方代码来完成常见任务，而且须要把代码分解为模块化的文件，避免污染全局命名空间。javaE..
2022-04-18 11:07:10
4106
转载 es5 转es6代码
一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}复制代码吐槽：const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;复制代码或者const f = obj.a + obj.d;const g = obj.c + obj.e;
2022-04-15 15:44:12
368
转载 NodeJs实现邮箱验证
要想实现发送邮件功能，主要是运用nodemailer这个依赖包，官网地址：https://nodemailer.com/about/utils.js 代码：module.exports = { mail}/** * 发送邮件 * @param {string} to 收件方邮箱 * @param {string} title 内容标题 * @param {string} content 邮件内容 * @param {Function} callback 回调函数（内置参
2022-04-15 15:39:33
741
转载 three.js 粒子系统
粒子系统一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。粒子系统： 本文列举一些常见的场景如：雪天、雨天、萤火虫、星空、烟雾、爆炸、火焰、多云、雾霾实现思路: - 点粒子 - 自定义着色器 - 贴图 - 运动动画与粒子存活时间通过点粒子携带贴图配合自定义着色器材质，控制粒子运动轨迹以及存活时间，在存活时间内控制粒子的透明度以及位置及颜色、大小等~复制代码粒子效果这里将粒子做了统一的封装，简单介..
2022-04-12 16:26:35
2475
2
转载 手机充电效果css
画个电池当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。方法很多，代码也很简单，直接看效果：有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。<div class="container"> <div class="battery"></div>
2022-04-12 14:46:19
555
转载 防抖和节流
简介节流和防抖是前端面试中老生常谈的话题，能大大提升程序的性能。但是节流防抖具体是什么？什么情况下使用呢？以及在Vue中应该怎么使用呢？下面请跟随笔者的脚步给大家逐步介绍。防抖（debounce）所谓防抖，就是指单位时间内函数只执行一次，如果在单位时间内重复触发该事件，则会重新计算函数执行时间。防抖又分为两种，分为立即执行版本和非立即执行版本。立即执行版本立即执行版本我们一般可以用在按钮点击上（比如提交表单），点击立即触发，单位时间内一直点击不会触发。当超过单位时间再次点击会再次触发
2022-03-21 14:35:06
145
转载 字体滚动适配背景颜色
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <!-- <scrip.
2022-03-21 11:33:52
358
转载 2022年必会Vue3.0学习 （强烈建议）
Vue3.0学习建议针对学会vue2.0的同学Vue3.0新特性中文文档Composition Api (最核心) v-model更改 v-for的key节点上的使用情况更改 v-if和v-for对同一元素的优先级更高 ref内部v-for不再注册引用数组 功能组件只能使用普通函数创建 异步组件需要使用defineAsyncComponent创建方法 所有插槽都通过$slots 在destroyed生命周期的选项已更名为unmounted 在beforeDestroy生命周
2022-03-18 14:25:27
4451
转载 uniapp如何修改全局变量
uniapp修改全局变量的方法：1、在普通页面获取全局变量，重新赋值；2、通过vue的状态管理工具vuex管理全局变量，代码为【let str = contObj.str;】。本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。推荐（免费）：uni-app开发教程uniapp修改全局变量的方法：一、引用公共common.js(1、可在页面中直接引入common.js 2、在main.js中引用并挂载（这里是第二种）)export default {.
2022-02-24 10:08:56
4300
转载 关于setInterval和setTImeout中的this指向问题
问题描述前些天在练习写一个小例子的时候用到了定时器，发现在setInterval和setTimeout中传入函数时，函数中的this会指向window对象，如下例：var num = 0;function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){ setTimeo
2022-02-21 10:10:24
694
转载 对象是否为空
1.将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) {return false;}return true;}alert(b());//true3.jquery的isEmptyObject方法此方法是j
2022-01-28 10:40:10
35
转载 Git-最简单的本地项目变成版本仓库，然后把内容推送到GitHub仓库
（注：本文的前提是本地Git仓库和github仓库之间已经存在SSH key了，所以如果没有建立联系的小伙伴们请先建立联系）具体操作：一：把本地项目变成版本仓库1、把本地的一个项目目录编程版本库repository，例如下图，我把我E盘>A课件>大三2>VUE.JS 变成一个版本库。通过命令 git init 可以吧一个目录变成git管理仓库2、通过命令git add -A把VUE.JS目录下的所有文件添加到暂存区里面去，git add 可以都很多用法，git ad
2021-12-13 16:38:59
234
转载 修改对象键名
1.项目需求：需要给一个对象的所有属性名后面都加一个s,例如：person = { name:'芳华'，age:12, sex:'女'}变成person = { names:'芳华'，ages:12, sexs:'女'}注意要用[]把动态属性括起来2. var aaa = [ { "Id":"3972679ef2c04151972b376dd88e6413", "T_CourseId":"7a4494aae1804d3e940945
2021-12-13 11:05:48
1587
转载 Number.EPSILON
ES6 在Number对象上面，新增一个极小的常量Number.EPSILON。根据规格，它表示 1 与大于 1 的最小浮点数之间的差。对于 64 位浮点数来说，大于 1 的最小浮点数相当于二进制的1.00..001，小数点后面有连续 51 个零。这个值减去 1 之后，就等于 2 的 -52 次方。Number.EPSILON === Math.pow(2, -52)// trueNumber.EPSILON// 2.220446049250313e-16Number.EPSILON.
2021-12-08 11:33:00
610
转载 Object.assign()
基本用法Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
2021-12-08 11:30:19
107
转载 ES6之Array.from()方法
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 1、将类数组对象转换为真正数组： 1 2 3 4 5 6 7 8 9 letarrayLike = { 0:'tom', 1:'65', 2:'男', 3...
2021-12-03 10:33:17
190
转载 vue-cli项目中出现“unexpected token import ”时的解决办法
开启eslint语法校验的时候，运行项目会出现“unexpected token import”这个问题，经过查找后发现是es6语法问题，导致不可以使用import，下面来具体分析一下这个错误；ES6语法的模块导入导出(import/export)功能,我们在使用它的时候，可能会报错：可以通过以下方式解决1.安装@babel/plugin-syntax-dynamic-import --save-dev1 yarn add eslint-plugin-vue --save...
2021-11-29 14:18:57
2518
转载 axios 学习
一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>二、例子1、 发送一个GET请求//通过给定的ID来发送请求axios.get('/user?ID=12345') .then(function(re
2021-11-09 11:59:13
117
转载 详解js数组的完全随机排列算法
Array.prototype.sort 方法被许多 JavaScript 程序员误用来随机排列数组。最近做的前端星计划挑战项目中，一道实现 blackjack 游戏的问题，就发现很多同学使用了 Array.prototype.sort 来洗牌。洗牌以下就是常见的完全错误的随机排列算法： 1 2 3 4 5 function shuffle(arr){ return arr.sort(function(){ re..
2021-08-24 09:36:19
561
转载 浏览器保存密码后自动填充问题
问题描述在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码，当我们点击了记住密码后，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。加了HTML5 中的新属性autocomplete="off" ，但是并没有产生效果。浏览器自动填充机制反复测试后发现浏览器自动填充机制是满足：页面里有一个type=password的input且这个input前面有一个type=text的input的时候就会进行自动填充。firefox和360浏览器的处理方式是：只要检测到页面里有满足...
2021-01-28 08:57:26
788
原创 aliplayer 多个视频连续播放
var player; var num = 0; var newUrl = "/VideoRes/01.mp4"; function endedHandle() { ++num; console.log(num); switch (num) { case 1: newUrl = "/VideoRes/02.mp4"; break; ...
2020-11-27 10:22:41
872
转载 JS 根据数组对象属性值分类，把一个数组拆分为多个数组
在工作中有时前台展示需求的不同要把后台的数组对象进行再分类。举个栗子：let arr = [ { date: '2018-01-06',SW: '90.95', LL: '136', XXSW: '80.22',CKLL: '500' }, { date: '2018-01-06', SW: '164.95', LL: '137', XXSW: '99.22', CKLL: '93' }, { date: '2018-01-07', SW: '176.95', L.
2020-10-29 11:18:56
7186
3
转载 layui iframe传值
1.父界面向子界面传值 [1].父界面打开子界面：function show_layer(){layer.open({ type: 2, area: [w+'px', h +'px'], fix: false, //不固定 maxmin: true, shadeClose: true, shade:0.4, title: title, content: url,
2020-10-28 15:27:05
2320
原创 layui laydate 从当天开始选择时间段
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <li..
2020-10-23 09:07:17
714
原创 高德地图标记
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <ti..
2020-10-21 13:58:46
309
转载 Js获取屏幕宽度、高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.bo...
2020-09-21 17:25:24
143
原创 多张图片轮播滚动
<!DOCTYPE html><html><head> <title>无缝滚动</title> <style type="text/css"> *{margin:0;padding: 0;} .roll .wrap{width:1500px;overflow: hidden; height: 344px;margin: 0 auto;position: relative;} .
2020-09-10 16:09:36
661
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人