JavaScript
关注
分享
扫一扫
文章平均质量分 75
wuyxinu
持续更新前端知识点合集以及各种前端知识。关注一下⑧
展开
-
vue3 watch监听props内属性的值的变化 无响应情况分析
前言在学习Vue3的时候，在项目实战中，需要用到watch监听props内属性的值的变化但是却出现了无响应的现象虽然让他可以响应只需要对watch的监听对象做一点小小的修改，但是我们还是需要研究一下具体为什么某些做法无法传值...props: { testData: { type: Object, default: () => {} }}......setup(props) { // 这种写法属于会有响应的情况 watch( () => props.t原创 2022-04-28 17:53:28 · 40147 阅读 · 7 评论 -
Vue3 + TypeScript处理ESLint和Prettier冲突时，Failed to load config “@vue/prettier/@typescript-eslint“
前言在 Vue+TypeScript 项目中，配置 ESLint 和 Prettier，在一开始会有冲突。于是我们需要在 项目内 .eslintrc.js配置一些额外的东西module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'原创 2022-04-11 17:20:49 · 14188 阅读 · 13 评论 -
JavaScript中使用RequestAnimationFrame优化动画效果和性能学习
一、概述1、介绍进入web2.0时代，在网页中实现动画已经不再局限于一种方法你可以用CSS3的animattion+keyframes;你也可以用css3的transition;你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。reque原创 2022-03-05 14:11:14 · 3439 阅读 · 0 评论 -
Webpack从入门到进阶（三）---附沿路学习案例代码
文章目录Webpack从入门到进阶（三）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点七、DLL1、DLL认识、打包和使用2、Terser3、Tree Shaking4、HTTP压缩八、打包分析和webpack原创 2022-03-02 09:43:54 · 1031 阅读 · 0 评论 -
Webpack从入门到进阶（二）---附沿路学习案例代码
文章目录Webpack从入门到进阶（一）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点四、Babel的深入解析1、认识Babel2、polyfill3、React和Typescript的支持4、ESLint5、原创 2022-03-01 09:29:26 · 743 阅读 · 0 评论 -
Webpack从入门到进阶（一）---附沿路学习案例代码
Webpack从入门到进阶（一）—附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段无论是作为专业的开发者还是接触互联网的普通人，其实都能深刻的感知到Web前端的发展是非常快速的对于开发者来说我们会更加深有体会；从后端渲染的JSP、PHP，到前端原生JavaScript，再到jQuery开发，再到目前的三大框架Vue、React、Angular；开发方式也从原来的JavaScript的ES5语法，到ES6、7、8、9、10，到TypeScript，包括编写CSS的预处理器原创 2022-02-28 11:34:45 · 1660 阅读 · 0 评论 -
Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载
最近在学习webpack5Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。但是页面引入的却是这个无法加载的图片就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。问题原因：css-loader版本不同。css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由c原创 2022-02-16 12:04:28 · 2128 阅读 · 5 评论 -
npx postcss 执行报unexpected identifier错误
最近在学习webpack的postcss的内容时，在命令行窗口执行下述语句时出现一些错误npx postcss --use autoprefixer -o result.css ./src/css/test.css这是一条利用postcss的autoprefixer插件输出一个给css加上各式浏览器前缀的语句。属于一条简单到再简单不过的命令行操作了，但是居然报错了！一开始，我以为是因为淘宝镜像引起的问题，因为一开始我通过npm安装依赖报错了，就直接用cnpm 安装依赖了结果npm安装依赖之后的原创 2022-02-15 15:30:42 · 798 阅读 · 0 评论 -
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
数据可视化-echarts入门、常见图表案例及项目案例一、简介一、数据可视化简介什么是数据可视化？数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。二、echarts简介ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备原创 2022-02-13 01:29:29 · 5653 阅读 · 3 评论 -
Vue 用createElement 自定义列表头
文章目录Vue 用createElement 自定义列表头一、前言二、需求实现效果三、知识点1、createElement 参数深入 data 对象2、createElement 创建元素过程四、具体实现及代码1、第一步：创建需要自定义列表头的table二、第二步：创建自定义组件封装el-popover三、局部注册组件并手写createElement五、扩展知识点1、Vue源码9个基础方法Vue 用createElement 自定义列表头一、前言最近产品有需求，想要把一个搜索框放入到列表头中，一般的属原创 2021-07-01 12:29:35 · 2257 阅读 · 1 评论 -
JavaScript 几种数组去重的性能测试及高性能方法推荐
前言之前在写一个需求的时候，需要大量调用数组去重的方法。我一开始的简单想法过于粗略，然后自然而然的就不太OK了。于是乎，我在网上寻找到了大量的数组去重方法。一、测试模版数组去重是基本上每个人都会遇到的问题。网上的方法也是特别的多为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{ return index})let arr2原创 2021-06-02 19:34:48 · 750 阅读 · 2 评论 -
分享一个看起来挺酷眩的canvas做的粒子漩涡
如题。上班摸鱼途中逛B站看到的（笑）直接上效果和代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>首页</title> <style> html, body { margin: 0px; width: 100%; hei原创 2021-05-06 17:23:13 · 831 阅读 · 1 评论 -
emmet语法简介及在Vscode中使用Emmet快速编辑代码
文章目录Emmet语法一、Emmet语法简介1、什么是Emmet？二、基础用法1、元素(Elements)2、文本操作符(Text)3、属性操作符(Attribute operators)4、嵌套操作符(Nesting operators)5、分组操作符(Grouping)6、乘法(Multiplication)7、自动计数(numbering)三、常见用法及举例1.生成后代元素：>2.生成兄弟元素：+3.生成上级元素：^4.生成多个元素：*5.生成类名和id：. 和#6.生成文本内容：{}7.生成属原创 2021-04-25 23:47:08 · 1757 阅读 · 1 评论 -
JavaScript设计模式浅析
JavaScript设计模式浅析JavaScript设计模式浅析一、工厂模式1、简单的工程模式2、工程模式实例二、建造者模式1、建造者模式例子三、单体模式1、普通创建对象方式2、单体模式创建对象四、装饰器模式1、装饰器模式例子五、组合模式1、组合模式例子JavaScript设计模式浅析一、工厂模式工程模式是一种比较简单的设计模式，主要用来创建对象用的1、简单的工程模式//1.简单的工程模式.html<!DOCTYPE html><html lang="en"><原创 2021-04-25 16:48:06 · 2108 阅读 · 8 评论 -
el-tree 解决横向滚动条和纵向滚动条问题
如题，在el-tree所处的代码块中，加入滚动条，使其能够滚动使用overflow:scroll 即可overflow定义:设定如果内容溢出元素设定范围后该怎么做.overflow:visible;默认属性,就是毫不作为,让内容跑到元素外面去.overflow:hidden;常用属性,超出的部分给他隐藏了.overflow:auto;常用属性,父元素中内置滚动条来处理,根据内容的具体宽高生成上下或左右滚动条.overflow:scroll;在父元素中强制内置滚动条,即使内容并没有超出元素给定宽高原创 2021-04-22 10:23:53 · 4930 阅读 · 0 评论 -
JavaScript面向对象编程浅析
JavaScript面向对象编程及设计模式JavaScript面向对象编程及设计模式一、面向对象编程1、简述2、面向对象编程特点3、封装4、this5、call和apply6、new7、继承8、多态JavaScript面向对象编程及设计模式一、面向对象编程1、简述面向对象是一种程序的设计思想，与之对应的编程思想叫做面向过程**例如：**比如我想要用代码描述一个场景，有一只叫做xiaoA的猫，吃了一个苹果，又吃了一条鱼，然后有一只叫做xiaoB的猫，吃了一根香蕉// 面向过程function x原创 2021-04-16 16:38:12 · 1579 阅读 · 2 评论 -
JavaScript杂问（1）-JavaScript 中 call()、apply()、bind() 的用法
JavaScript 中 call()、apply()、bind() 的用法先看明白下面：例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2shows() // 盲僧 比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 wi...转载 2019-12-09 21:44:32 · 288 阅读 · 0 评论