- 博客(222)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue3.0七大亮点
Vue3.0七大亮点一，性能比2.x快1.2～2倍diff算法的优化render阶段的静态提升（render阶段指生成虚拟dom树的阶段）事件侦听缓存二，按需编译，体积比Vue2.x更小（Tree shaking）三，Compostion API: 组合API/注入API四，更好的TS支持五，自定义渲染API（Custom Renderer API）六，更先进的组件Fragment组件Suspense组件七，更快的开发体验（vite开发构建工具）总结：一，性能比2.x快1.2～2倍diff算法的优化
2021-05-31 09:24:42
451
6
原创 JS中的节流与防抖是什么？
JS中的节流与防抖例子防抖函数节流函数总结适用场景节流函数和防抖函数在日常的开发中还是有很多地方用到，两个函数的目的都是为了控制函数被调用的频率，今天我们就来说一说着两个函数。例子input触发键盘输入事件，将输入内容发送到后台：// 定义一个请求函数function request(val) { console.log("request: " + val);}let inputEl = document.getElementById("input");inputEl.add
2021-05-28 09:19:40
233
原创 如何实现页脚置底？？？
如何实现页脚置底？？？将 .content 的 margin-bottom 设为负数将 .footer 的 margin-top 设为负数使用 calc() 设置 .content 的高度使用 Flexbox 弹性布局使用 Grid 网格布局将 .content 的 margin-bottom 设为负数<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <
2021-05-27 09:59:08
245
原创 JS 类型化数组 到底是何物？？？
前言： 在 JavaScript 这门语言中，我们所有人都必须对数组足够熟悉，知晓数组本质上是动态的，并且可以容纳任何 JavaScript 对象。不过，如果你曾经使用过类似于 C 语言这样的其他语言，你应该知道其数组本质上不是动态的。而且你只能在该数组中存储特定的数据类型，毕竟从性能角度来看，这可以确保数组效率更高。但数组的动态化与存储信息类型的多样化其实并没有使 JavaScript 数组效率低下。在 JavaScript 引擎优化的帮助下，JavaScript 中数组的执行速度其实非常快。随着 W
2021-05-26 10:01:16
305
2
原创 今天就让我们来学习什么是Sass？？？
今天就让我们来学习Sass基础！！！为何有 Sass变量机制嵌套写法模块机制Mixin继承机制自定义函数小结为何有 Sass作为前端开发人员对于 CSS 应该不陌生吧，大多数前端开发对 CSS 都是既爱又恨，爱它可以通过简单的代码使页面美化，恨他是因为随着项目的复杂性越高，它的可维护性就越差。作为开发人员，CSS 更像是一门设计类语言而非开发类语言。比如：缺少模块化机制缺少变量机制，使得滋生很多重复的代码嵌套层级写法非常痛苦复用困难因此，有需求就会有市场，Sass 因此应运而生。Sas
2021-05-25 09:53:29
124
原创 vue中element-ui的内置过渡动画
vue中element-ui的内置过渡动画element-ui说明淡入淡出动画（fade）缩放（zoom）展开折叠（collapse）按需引入element-ui说明Element 内应用在部分组件的过渡动画，你也可以直接使用，其实简单来说就是复制粘贴，具体参考element-ui官网淡入淡出动画（fade）提供 el-fade-in-linear 和 el-fade-in 两种效果。<template> <div> <el-button @clic
2021-05-24 09:46:56
2789
1
原创 vue路由自动加载、按组件异步载入vuex以及dll优化
一、vue路由自动加载介绍：使用统一规则命名路由文件名，通过webpack方法require.context方法对文件进行读取，动态生成路由数据核心代码：//param(路径，是否遍历子文件夹内文件，匹配文件正则)let r = require.context('./pages',true,/.vue/)r.keys()//返回遍历的文件路径数组r(key).default//路由文件输出内容二、按组件异步载入vuex介绍：按module划分store，在组建中定义白能量标记是否
2021-05-10 14:49:28
284
原创 h5春节小游戏制作
h5春节小游戏制作话不多说，直接上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale
2021-04-13 17:45:17
302
原创 git的使用
目的借助 github 托管项目代码基本概念仓库(Repository)仓库同来存放项目代码，每个项目对应一个仓库，多个开源项目则有多个仓库收藏(star)收藏项目，方便下次查看复制克隆项目(fork)复制克隆项目 fork 的项目是独立存在的发起请求(Pull Request)关注(watch)如果 watch 了一个项目，以后只要这个项目有任何更新，都会第一时间收到关于这个项目的通知提醒事务卡片发现代码有 bug，但是目前没有成型代码，需要讨论使用：如果开源了一个项目，项
2020-12-09 09:32:48
7
原创 webpack介绍及简单安装
webpack代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布安装安装本地的 webpackwebpack webpack-cli -D本地安装：npm install [email protected] --save-dev打包：webpack ./src/main.js ./dist/bundle.jswebpack 模块化打包 为了可以正常运行，必须依靠 node 环境webpack 可以进行 0 配置打包工具-> 输出后的结构(js 模块)webpack
2020-12-08 08:20:49
122
原创 vue脚手架搭建
1.下载node.JS并安装 node-v npm-v 安装淘宝镜像==>cnpm 2.cnpm install webpack -g cnpm install webpack webpack-cli -g 3.cnpm install vue-cli -g [vue-cli 2.0版] cnpm install @vue/cli -global [vue-cli 3.0+版] cnpm install -g @vue..
2020-11-20 10:37:59
63
原创 vue过滤器
理解过滤器功能：对要显示的数据进行特定格式化后在显示注意：并没有改变原本的数据，可是产生新的对应的数据编码2.1 定义过滤器vue.filter(filterName,function(value,[arg1,arg2]){进行一定的数据处理return newValue})2.2 使用过滤器{{myDate | filterName}}{{myDate | filterName(arg))}}<!DOCTYPE html><html lang="en">.
2020-11-18 08:49:03
79
原创 vue基础
Vue文章目录Vue方法修饰符组件方法created 调用 created 生命周期钩子beforeCreate 调用 beforeCreate 生命周期钩子methods 放置方法(处理复杂的逻辑)computed 计算属性watch 监听器filters 过滤器修饰符.stop 阻止单击事件继续传播（写入内部） 阻止冒泡.prevent
2020-11-17 20:26:52
56
原创 vue 列表渲染实例
<!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> <body> <
2020-11-04 08:06:29
382
原创 vue组件
ES6 模块化1. 没有模块化的世界：全局变量污染、难以管理的依赖2. 常见的模块化标准：CommonJS、ES6 Module、AMD、CMD、UMD…导出js: 使用模块化在script标签上写 type=“module”在js函数开头 写入 export default(默认导出：{ default：fn })在js函数开头 写入 export (真名导出(普通导出)：{ double：fn })1. 从js中写入 import xxx form “路径.js” (导入模块化js)2.
2020-11-03 15:29:25
119
原创 Vue中 computed、methods和watch的区别
一、computed 和 methodscomputed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变，多次访问 reversedMessage（对message 进行加工的处理函数） 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲
2020-11-02 10:03:26
167
原创 基础面试题总结1
介绍sass：定义变量css嵌套，允许在代码中使用算式，支持if判断以及for循环link和@import的区别：link属于html标签，而@import是css提供的页面被加载时，link会同时被加载，而@import被引用的css会等到引用它的CSS文件被加载完再加载import只在IE5以上才能识别，而link是HTML标签，无兼容问题;link方式的样式的权重 高于@import的权重.求以下的输出内容是？var fun = function(){ this.name
2020-10-30 09:16:39
86
原创 Promise 库 lie.js 源码解读
var REJECTED = [‘REJECTED’];var FULFILLED = [‘FULFILLED’];var PENDING = [‘PENDING’];var handlers = {}function Promise (resolver) {if (typeof resolver !== ‘function’) {throw new TypeError(‘resolver must be a function’);}this.state = PENDING;this.qu
2020-10-29 13:59:22
212
原创 class 的基本语法
1、简介类的由来JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) {this.x = x;this.y = y;}Point.prototype.toString = function () {return ‘(’ + this.x + ', ’ + this.y + ‘)’;};var p = new Point(1, 2);上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学
2020-10-26 08:06:39
1047
原创 bs和cs的区别
一、现状说明：就在这金三银四的求职黄金时期，我有幸作为公司的独立技术面试官，拥有最终决定录用权，在倍受上级领导的充分信任下，我也向上级保证，一定要为公司找到合适的人才，就在我满怀信心的情况下面试了一个又一个的求职者，发现了大多数求职者共同的问题，一是：眼高手低，即工作年限虽长，但受工作内容及个人原因，基础知识薄弱，很多技术使用了N年，却不明白其原理，可以说是：只知道这样用，但为什么要这样用，能否有别的解决方案从来都没有去考虑过或总结过，知识的广度就更不用说了，薪资期望却都很高。二是：B/S与C/S分不清，
2020-10-22 19:15:39
313
原创 ES6 proxy 代理
proxy：代理扩展(增强)对象一些功能 比如： Vue Vue.config.keyCodes.enter = 65 Proxy作用：比如vue中拦截 预警、上报、扩展功能、统计、增强对象等等 proxy是设计模式的一种，代理模式 语法： new Proxy(target,handler) let obj = new Proxy(被代理
2020-10-20 08:23:38
85
原创 ES6 运算符
扩展运算符、rest运算符(…)展开数组：[1,2,3,4] -> …[1,2,3,4] ->1,2,3,4,51,2,3,4,5 -> …1,2,3,4,5 ->[1,2,3,4,5]注意：剩余参数，必须放到最后函数变化1. 函数默认参数function show({ x = 0, y = 0 } = {}) {console.log(x, y);}show();2. 函数参数默认已经定义了，不能在使用let，const声明function show(a =
2020-10-19 08:50:45
90
原创 If-Else的5种方法从入门到高级示例
1、 完全不必要的Else块这也许是那些初级开发人员最负罪的之一。下面的示例很好地说明了当您被认为If-Else很棒时会发生什么。Simple if-else只需删除else`块即可简化此过程。Removed else看起来更专业吧？您会经常发现，实际上根本不需要其他块。像在这种情况下一样，您想要在满足特定条件的情况下执行某些操作并立即返回。2、价值分配如果你要根据提供的某些输入为变量分配新值，请停止使用If-Else，而应采用一种更具可读性的方法。Value assignmen
2020-10-16 08:31:39
891
原创 ES6 中的类
程序中类： 面向对象，类 属性： 方法： 函数模拟： 人：Person 属性：name 展示名字：showNameEs5: function Person(){ this.name = "aaa", } Person.prototype.showName=function(){} Object.assign( Person.prototype,{
2020-10-15 10:33:51
79
原创 CSS制作一个波浪形文本动画效果
在今天的文章里，我们采用HTML和CSS来实现一个波浪形的动画文本。它是最简单的CSS动画效果之一。对于初学者来讲，这是学习CSS伪元素概念的最佳示例之一。实现方法，通过结合使用一些CSS属性来执行获取波浪文本的基本思想。主要的“主体”部分是通过使用标记内的标记创建的。CSS代码用于创建HTML结构的“主体”部分的波浪形文本。HTML代码如下： W E B 前 端 开 发
2020-10-14 09:22:35
343
原创 5种JavaScript和CSS交互的方法
1、用JavaScript获取伪元素(pseudo-element)属性大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？可以的，使用JavaScript也可以访问页面中的伪元素。// Get the color value of .element:beforevar color = window.getComputedStyle(document.querySelector(’.element’), ‘:before’).g
2020-10-04 19:37:23
193
原创 JavaScript设计模式之构造函数模式
介绍构造函数大家都很熟悉了，不过如果你是新手，还是有必要来了解一下什么叫构造函数的。构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。基本用法在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用定义的否早函数，你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都
2020-09-30 08:45:26
65
原创 4种在JavaScript中交换变量的方法
1、解构赋值解构赋值语法（ES2015的功能）使您可以将数组的项提取到变量中。例如，以下代码对数组进行解构：let a;let b;[a, b] = [1, 2, 3];a; // => 1b; // => 2[a，b] = [1,2,3] 是对 [1,2,3] 数组进行解构的解构赋值。[1，2，3] 的第一项1 分配了一个变量 a，第二项 2 对应地分配了 b。知道如何解构数组，可以很容易地使用它交换变量。让我们使用解构分配交换变量 a和 b：let a = 1;let b
2020-09-21 08:09:07
188
原创 JavaScript深入理解之Bom对象详解
写在前面当我们在 Web 中使用 JavaScript 的时候，BOM 对象——浏览器对象模型起着至关重要的作用。BOM 提供了很多对象，用于访问浏览器的功能。熟悉了解 BOM 对象对我们 WEB 开发有着重要的帮助，下面是我的一些理解和总结。BOM 对象定义BOM是指浏览器对象模型，它是对一系列在浏览器环境中使用对象的统称，这些对象提供了访问浏览器的功能。在BOM对象中，window对象是最顶层对象，在浏览器环境中它是一个Global全局对象，其它对象（如：DOM对象）对是这个对象的属性（子对象）
2020-09-16 08:08:29
155
原创 es6 拖拽
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box {
2020-09-12 12:43:54
108
原创 es6 Symbol
数据类型：number、string、boolean、object、function、undefined 用typeof检测出来数据类型 Symbol symbol 使用情况一般 定义：let syml = Symbol("aaa") 注意： 1. Symbol 不能new 2. Symbol() 返回的是一个唯一的值 做一个key 属性，定义一些唯一的或者私有
2020-09-10 08:59:48
117
原创 es6 Promise:承诺
Promise: 承诺，许诺作用：解决异步回调问题传统方式，大部分用回调函数，事件 ajax(url,{ // 获取token ajax(url,()=>{ // 获取用户信息 ajax(url,()=>{ // 获取用户相关新闻 }) }) }) 语法： let promise = new Promise(function(resolv
2020-09-09 07:56:07
85
原创 css实现文字竖向排版
1、一个句子的竖向排列<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { width: 20px; margin: 0 auto; line-height: 24px; font-s
2020-09-08 08:27:42
2243
原创 jQuery ajax get方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../jquery-3.5.1.mi
2020-09-07 13:37:40
139
原创 前端面试题
浅拷贝和深拷贝jQuery.extend第一个参数可以是布尔值，用来设置是否深度拷贝的jQuery.extend(true, { a : { a : “a” } }, { a : { b : “b” } } ); jQuery.extend( { a : { a : “a” } }, { a : { b : “b” } } );最简单的深拷贝aa = JSON.parse( JSON.stringify(a) )浅复制—>就是将一个对象的内存地址的“”编号“”复制给另一个对象。深复制—>
2020-09-06 14:53:58
77
原创 Less 中的嵌套规则与 & 符号的使用
.xkd{ font-size: 14px;}.xkd p{ line-height: 25px;}.xkd p span{ color: #ccc;}这样写虽然也好理解，但是没有那么直观，维护起来也不方便。而 Less 中的嵌套规则正好可以解决这样问题，嵌套规则允许在一个选择器中嵌套另一个选择器，这样可以使得代码看起来一目了然，后期维护也方便。嵌套的使用例如上面的 css 代码使用 Less 语言来写：.xkd{ font-size: 14px; p{
2020-09-05 12:01:14
330
原创 组件的生命周期
组件的整个生命有三个阶段：1. 加载期(初创期)：做一些事情(执行了一些函数)2. 更新期3. 销毁期生命周期函数加载阶段1. constructor() 加载的时候调用一次，可以初始化state2. getDefaultProps() 设置默认的props，也可以dufaultProps设置组件的默认属性3. getInitialState() 初始化state，也可以直接constructor中定义this.state4. componentWillMount() 组件加载时只调用，以
2020-09-04 08:17:20
244
原创 es6 对象与类
对象：显示生活中，万物皆对象，对象是一个具体的食物，看得见摸得着的实物。在javascript中。对象是一组无序的相关属性和方法的集合，所有的实物都是对象对象是由属性和方法组成的属性：实物的特征，在对象中用属性来表示(属性名一般用名词)方法：实物的行为，在对象中用方法来表示(方法名一般用动词)2. 类在 ES6 中新增了类的概念，可以使用 class 关键字，之后用这个类来实例化对象类抽象了对象的公共部分，它泛指某一个大类。对象特指某一个。通过实例化可以创建一个对象。面向对象的思维特点.
2020-09-03 08:23:23
72
原创 jQuery trigger 用法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../jquery-3.5.1.mi
2020-09-02 08:26:14
134
转载 ES6特性
1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：let firstHalf = [ one , two ]; let secondHalf = [ three , four , …firstHalf];这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：let firstHalf = [ one , two ];let secondHalf = [ three , four ];for(var i=0, i <firstHalf
2020-09-01 13:32:43
75
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人