- 博客(37)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 svg学习
svg和canvas区别svg支持事件处理器svg矢量的,canvas依赖分辨率,能够以 .png 和 .jpg格式保存存储图像svg每个图形都是单独的,可单独操作. canvas每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示(适合需要密集型重绘的)svg 描边动画路径可用svg编辑器画 Inkscape采用stroke-dasharray与stroke-dashoffset配合,结合animation改变stroke-dashoffset实现str
2021-05-18 18:24:04
263
原创 Rxjs学习
学多少就记录多少Rxjs学习可以理解为处理非异步的loadsh,ng中处理异步常用创造类createimport { Observable } from 'rxjs';const observable = new Observable((observer)=>{ observer.next(123)})of类似于一个迭代器，将参数迭代然后发出import { of } from 'rxjs';var source = of('Jerry', 'Anna.
2021-04-21 17:09:12
160
原创 angular基础
前言为什么不会angular的我会跳槽到一个用angular的公司？不得不学系列Path Intellisense路径提示color highlight #颜色显示vscode-icon文件图标Auto Import 自动导入二、代码1.Component装饰器本质就是一个函数，能接收一个类或者类属性作为参数，算是一种语法糖代码如下（示例）：...
2021-04-18 01:31:28
454
7
原创 github下载慢问题
有时候从gitHub上clone代码很慢,这里介绍一个git clone的提速方案，加快GitHub仓库的下载。执行以下配置命令：git config --global url."https://github.com.cnpmjs.org/".insteadOf "https://github.com/"或者直接在clone地址.com后面加上.cnpmjs.org也可加速下载...
2021-01-25 09:52:48
157
原创 vue3在自定义hooks中使用useRouter报错问题
随着vue3的更新,vue-router也更新到了4.xuseRouter相当于vue2的this.$router全局的路由实例，是router构造方法的实例useRoute相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录但是在一次使用中发现import { useRoute, useRouter } from "vue-router"useRoute,useRouter必须写到.
2021-01-18 18:03:03
8677
1
原创 vueRouter不切换url只修改query报错问题解决
使用push的话 会导致返回历史有记录this.$router.push({ query: { id: this.processId }})所以需要使用this.$router.replace({ query: { id: this.processId }})虽然不影响使用,但是会报如下错误解决方案 在router.js加上这段import VueRouter from 'vue-router'const originalRe..
2020-12-08 10:02:47
1510
原创 git submodule使用记录
首先创建一个子模块仓库(当做公共模块son).然后在现有的项目(p1,p2)中使用$ git submodule add git地址当更新p1中son的东西时候,需要在p1中son目录里提交,p1直接提交会报在p2中更新p1提交的son内容可以用git submodule foreach git pull...
2020-11-16 17:39:07
1535
原创 vue全部引入ant-design-vue报错Antd is not defined
module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ // 按需加载 [ "import", // style 为 true 加载 less文件 { libraryName: "Antd", libraryDirectory: "es", style: "css" } // { libraryName: "ant-design-vue", li.
2020-09-15 15:33:33
3091
2
原创 sass学习
sass简介Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。sass和scssSCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之
2020-06-29 17:29:17
274
原创 elementUI自定义滚动条组件el-scrollbar
最近做项目适合发现的一个文档没有但是挺好用的滚动条组件使用// 使用<el-scrollbar wrap-class="scrollbar-wrapper"></el-scrollbar>// 传入的属性props: { native: Boolean, // 是否使用原生滚动条，即不附加自定义滚动条 wrapStyle: {}, // wrap的内联样式 wrapClass: {}, // wrap的样式名 vie.
2020-06-29 10:55:42
2131
原创 addRoutes动态添加路由导致Duplicate named routes definition报错和刷新后空白问题
原因addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由解决方案使用router.addRoutes(routes)之前调用resetRouter()清空路由export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router}...
2020-06-23 10:30:05
7948
2
原创 VSCode 的 ESLint+Prettier 配置
怎样保证一个公司的代码规范一样?把你的配置的规范复制给他vscode 的配置//settings.json{ "workbench.colorTheme": "Monokai", "editor.fontSize": 20, "editor.tabSize": 2, // 值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": true, "editor.defaultForm.
2020-06-09 16:00:39
673
原创 react知识点
react中event事件react中event事件是syntheticEvent 是一个合成事件event.nativeEvent是原生事件对象所有事件都挂载在document上和dom事件不一样，和vue事件也不一样受控组件例如<input><select><textearea>等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件受控组件更新state的流程
2020-06-01 11:00:23
335
原创 es6模块与 commonJS规范
es6export : ‘可以输出多个，输出方式为 {}’ ，export default : ’ 只能输出一个 ，可以与export 同时输出，但是不建议这么做’，解析阶段确定对外输出的接口，解析阶段生成接口，模块不是对象，加载的不是对象，可以单独加载其中的某个接口（方法），静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变，this 指向undefined这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模
2020-05-27 10:12:16
124
原创 vue-cli3中scss公共函数使用配置，rem+vw解决大屏自适应
解决大屏自适应创建scss函数1920为设计稿宽度//func.scss@function r($px) { @if $px==0 { @return 0; } @return $px / 1920 * 100vw;}然后在vue.config.js中插入如下，使这个函数能够全局使用module.exports = { css: { loaderOptions: { sass: { data: ` @impor
2020-05-15 10:36:05
1032
原创 ant design pro使用 Error: Cannot find module './locale'问题
问题原因似乎是moment版本与antd兼容问题解决方案1.安装moment@2.18.1npm install moment@2.18.12.配置webpack的alias alias:{ "moment$": "moment/moment.js", }即可!!...
2020-05-04 20:36:08
2064
原创 react hook快速学习笔记
useState用来声明状态变量，括号里面参数为初始值。const [ count , setCount ] = useState(0);useEffect注意点：异步执行//首次渲染，和count更新都会再次执行 useEffect(()=>{ console.log(count+'次') })可代替componentDidMountuseEffe......
2020-05-03 21:01:39
2916
1
原创 js中的字符串比较和隐式转换
起因:见到一个题目,发现竟然用字符串比较的方式确定相同得公共前缀//题目 编写一个函数来查找字符串数组中的最长公共前缀//输入: ["flower","flow","flight"]//输出: "fl"var longestCommonPrefix = function(strs) { if (strs === null || strs.length === 0) return...
2020-04-26 15:52:52
698
1
原创 vue面向面试总结
vue基础1.computed和watchcomputed有缓存,data不变则不会重新计算watch监听引用类型拿不到oldVal,如何进行深度监听 watch: { handler(oldVal, val){ // 其中oldVal和val是同一个引用地址 }, deep:true }2.v-if和v-show的区别和使用场景...
2020-04-23 22:59:30
238
原创 浏览器缓存简单分类
关于memory cache和disk cache ,,浏览器缓存存在磁盘还是内存主要决定因素是内存空闲情况，如果内存使用率很低就优先放入内存，反之则放入磁盘。大多数大点的静态文件.js等都在disk 一些base64的图片会在memoryservice worker 可以引申到 渐进式Web App...
2020-04-21 15:20:10
147
原创 webpack简单优化的配置
webpack性能优化1.开发环境新能优化1.1优化打包构建速度1.1.1 HMR: hot module replacement / 热模板替换作用: 一个模板发生变化,只会重新打包这一个模块(默认是打包所有)1.2优化代码调试1.1.2 source-map作用: 一种提供源代码到构建后代码映射技术 (如果 构建后代码出错了 可以通过映射追踪源代码错误)2. 生产环境性能优化...
2020-04-19 13:02:02
228
原创 webpack基础部分
webpack静态资源打包器1 webpack五个核心概念1.1 Entry入口,指示webpack以哪个文件为起点开始打包，分析构建内部依赖图1.string --> ‘./src/index.js’单入口,宝宝形成一个chunk,输出一个bundle文件,chunk名称默认为mian2.array --> [’./src/index.js’, ‘./src/inde...
2020-04-19 13:01:16
229
原创 什么是函数式编程
什么是函数式编程把复杂的函数功能，拆分成一个一个的纯函数，再组合这些函数，去实现这个功能。函数式编程的核心概念数据不可变： 要求你所有的数据都是不可变的，这意味着如果你想修改一个对象，那你应该创建一个新的对象用来修改，而不是修改已有的对象。无状态 主要是强调对于一个函数，不管你何时运行，它都应该像第一次运行一样，给定相同的输入，给出相同的输出，完全不依赖外部状态的变化。纯函数无...
2020-04-19 12:59:09
218
原创 Web Worker
Web WorkerWeb Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。值得注意的是， Web Worker 规范中定义了两类工作线程，分别是专用线程Dedicated Worker和共享线程 Shared Worker，其中，Dedicated Worker只能为一个页面所使用，而Shared Wor...
2020-04-19 12:58:06
168
原创 搞清Object.create和new
new的实现原理：new 运算符是创建一个自定义对象或者具有构造函数的内置对象的实例function new(func) { // 创建一个新对象 lat target = {}; // 新对象继承了func原型上的属性 target.__proto__ = func.prototype; // 将构造函数的作用域赋值给新对象 let res =...
2020-04-19 12:52:04
200
原创 vuex 模块化使用
1.在src下创建 store 文件夹内容有:2.index.js为总的引用文件 , 引入 modules文件下各个模块 并暴露出去在main.js中引入import store from './store'new Vue({el: '#app',store,render: h => h(App),mounted() {this.$stor...
2019-03-14 11:29:27
2272
转载 触发动画插件scrollreveal.js
简介http://www.dowebok.com/134.html。只需要给元素增加 data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scro
2017-11-14 18:09:24
985
转载 动画插件wow.js的使用方法
动画插件wow.js的使用方法1,下载文件animate.css 下载地址: http://daneden.github.io/animate.css/wow.min.js 下载地址: http://www.downyi.com/downinfo/37040.html#address2,引入文件 new WOW().init();3,观察你需要的
2017-10-17 15:38:38
452
转载 particles.js 使用
particles.jsA lightweight JavaScript library for creating particles. 一个轻量级的创建粒子背景的 JavaScript 库我们先来看一下效果图： 标准版： 星空版： 泡泡版： 下雪版： 利用这个我们可以做些什么呢？ 我觉得这个比较适合用在无背景的页面，或
2017-10-17 15:30:45
2733
转载 Flex 布局教程：实例篇
Flex 布局教程：实例篇 作者： 阮一峰日期： 2015年7月14日上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schrop
2017-10-08 23:52:29
198
转载 Flex 布局教程：语法篇
Flex 布局教程：语法篇 作者： 阮一峰日期： 2015年7月10日网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W
2017-10-08 23:50:32
160
原创 css 中 Sticky footers (让页脚紧贴页面底部的方法)
需要三个层 一个层包内容 一个内容 一个层底部div class="detail-wrapper clearfix" > 注意要清除浮动 div class="detail-main">div>div>div class="detail-close"> i class="icon-close">i>div>.detail .deta
2017-10-08 14:06:21
448
原创 vue 中用less 解决背景图片根据屏幕选择问题
.bg-image(@url) { background-image: url('@{url}@2x.png'); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image: url('@{url}@3x.png'); }}不能用+连接
2017-10-07 20:42:30
2831
原创 vue中使用less
第一步：安装less依赖，npm install less less-loader --save第二步：修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加{test: /\.less$/,loader: "style-loader!css-loader!less-loader",},
2017-10-07 18:26:43
696
转载 javascript的Array.prototype.slice.call
发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。写字前面在js中我们经常会看到Array.prototype.slice.call(argu
2017-08-21 22:20:17
217
空空如也
vite报错Error: Parse Error: Expected HTTP/
2024-08-08
jsplumb箭头变成只显示一半问题
2020-07-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人