- 博客(120)
- 收藏
- 关注
RSS订阅
原创 鱼缸2022年想要学习的事项清单
2022自我升华计划系统地学习下Vue学习插件的封装思想学习设计模式学习新语言系统地学习NodeJs简单了解下typescript整理一下工作中常用到的动画及实现方式及类型整理成一个博客学习熟悉工具前端工程化npm前端性能学习优秀项目代码系统地学习下Vue vue 书籍看完 弄清楚vue的render函数，在vue2和在vue3中的具体使用 弄清楚$attrs的用法 弄清楚 $listener的用法 吃透v-director 的用法，并封装一下数字滚动动画 vue的transition的原理
2021-12-22 00:08:59
449
原创 vue 常用代码块个人笔记
vue 工作中常用的代码块懒加载组件懒加载路由懒加载懒加载组件懒加载components: { try: () => import(/* webpackChunkName: 'try' */ './try.vue'),},路由懒加载{ path: '/try', name: 'try', component: () => import(/* webpackChunkName: 'try' */ '@/components/tr
2021-11-25 10:50:25
1473
1
原创 echart 图表编写笔记
echart 图表编写笔记x轴与y轴的间隙x轴的刻度值与x轴的间隙x轴y轴y轴的刻度值与x轴的间隙y轴的刻度值legend图例鼠标悬浮提示tooltiplinebarpiex轴与y轴的间隙x轴的刻度值与x轴的间隙x轴y轴y轴的刻度值与x轴的间隙y轴的刻度值yAxis: [ { name: this.lineChartOption.yAxisuint, // y轴的名称 min: 0, // y轴刻度值的最小值 // y轴的分割线，分割线
2021-07-16 15:32:13
529
原创 css常用样式总结
文字超出部分…代替，鼠标滑过悬浮显示<div class = "showOverFlow" :title="title">{{title}}</div>.showOverFlow { white-space: nowrap; overflow: hidden; text-overflow: elliphsis; cursor: pointer;}画圆圈<div class = "circle"></div><span c.
2020-12-14 15:35:46
568
1
原创 Jst知识点个人总结
个人理解下的总结，仅供参考判断是否是数组？Array.isArray(data)案例// 判断data是否是数组，如果不是数组，则从指定的分隔符','处将字符串分割开，返回字符串数组location: Array.isArray(data) ? data: data.split(','),将字符创分割并返回字符串数组// data: "12, 13"// 将字符串data，以','分割符分割，并返回字符串数组，为['12', '13']data.split(',')...
2020-07-22 11:17:01
802
原创 webpack的require.context在vue2中常见的应用场景
批量注册公共组件公共组件的使用批量导入带命名空间的vuex的不同模块可以在同级目录底下创建一个modules目录，里面放n个js文件js文件放上global.js访问 / 更改 vuex值的时候：
2022-06-24 14:56:58
802
原创 vue Extend实例小Demo
1、新建一个vue文件 或者一段Dom，作为被extend的模板下面是一个marker.vue的文件全内容开始extend使用vue构造器、创造一个子类
2022-06-10 16:51:09
219
原创 echarts-水波图踩坑记
首先安装"echarts-liquidfill"npm install echarts-liquidfill在页面中引入import 'echarts-liquidfill'报错：TypeError: wave.ensureState is not a functionTypeError: wave.ensureState is not a function降低echarts-liquidfill版本npm uninstall echarts-liquidfill安装与当前echar
2022-05-12 10:02:05
1014
原创 vue 2父组件向子组件方向的数据、方法单向$attrs/$listeners的用法-个人笔记
名称用法$attrs向子组件传递数据（传递的数据 - props中的数据）$listeners向子组件传递方法共同点只读父组件<template> <div> parent: <son :clearable="clearableValue" @clickEvent = clickEvent :sex = "sex" :name="name" @click="clickEvent"/&....
2022-04-26 14:42:44
234
原创 前端跨域 个人笔记
跨域：同源协议：协议、域名、端口三者有一不同时，都会造成跨域iframe 窗口通信postmessage我自己整理的一篇笔记https://blog.csdn.net/yh8899abc/article/details/115240267jsonP请求的接口拼接方法名<body> <!-- 写一个callback函数 来得到数据 --> <script> function callback(data){
2022-04-15 13:57:45
694
原创 css 个人笔记
布局grid布局等分布局：父元素display: grid;grid-template-columns: repeat(2, 1fr); // 2份均等分// 上面等同于grid-template-columns: 1fr, 1fr; // 2份均等分子元素效果display: grid;grid-template-columns: 1fr; // 1均等分flex 布局css选择器的权重！important[1,0,0,0]行内元素[0,1,0,0]
2022-04-13 10:25:54
91
原创 vue-router 个人笔记
问题：vue-router 重复指向一个router导致的报错：NavigationDuplicated: Avoided redundant navigation to current location: “/login” 或者Uncaught (in promise) Error: Navigation cancelled from “/” to “/login” with a new navigation.解决方案：给push、replace的原型上方法改写一下// 解决报错const
2022-04-11 13:00:13
961
原创 前端网络请求 个人笔记
XMLHttpRequestnew XMLHttpRequest 实例open (method, url, async)method GET / POST / DELETE / PATCHurlasync 是否开启异步，true (异步）加onreadystatechange false (非异步）send 发送setRequestHeaderxmlhttp.setRequestHeader("Content-type","application/x-www-form-urlenco
2022-04-09 22:29:02
1048
原创 nodeJS 搭建静态服务器三种方案 个人笔记
方案一：nodeJS搭建目录结构：依赖项：server.jsconst http = require('http');const path = require('path');const readStaticFile = require('./readFileStatic');http.createServer(async (req, res) => { let urlString = req.url; let filePathName = path
2022-04-05 22:01:32
1612
原创 vue router 个人笔记
重新加载页面window.location.reload();路由的参数List item路由的方法路由跳转导致的闪屏问题：方案一：过渡动画<transition name="fade-transform" mode="out-in"> <router-view/></transition>/*enter-active 定义进入过渡的结束状态leave-active 定义离开过渡的结束状态*/.fade-trans.
2022-03-31 16:41:59
1074
原创 前端本地存储 - 个人笔记
localStoragesessionStorage 的个人区别cookie名称存储大小特点适合的应用场景localStorage5Mb1、长期存储到浏览器中2、不参与服务端的通信应用缓存登录信息同一个浏览器不同网页的通信sessionStorage5Mb1、存在目标网页的显示的时间段中（网页刷新/关闭，存储内容被清空）2、不参与服务端的通信cookie4kb1、普通浏览器存储50条cookie 2、cookie参与服务端的通信 3、如果coo.
2022-03-31 15:05:00
1205
原创 个人知识体系梳理
jsstringArrayFunction闭包优点缺点StoragelocalStoragesessionStorageBOMDOM生命周期componentrender函数指令vuexvue-routerhashhistoryPromiseawait箭头函数模板字符串let、conststringArrayFunction闭包优点缺点StoragelocalStoragesessionStorageBOMDOMvuestringArrayFunction闭包优点缺点Storagel
2022-03-07 00:58:22
437
原创 个人工作近2年节点复盘
前端开发工作快2年了，大致捋一捋自己的经历写静态网页碎片化自学vue对着视频写vue项目对着视频写node项目到自己捣鼓Linux项目部署开始工作进公司写图表js写逻辑css3动画带徒弟当小组长今天我发现2年后的自己少了当初的那种拼劲、不认输的劲、爱创新、一个东西功能做不出来夜熬再深也要捣鼓出来，到如今 下完班就只想躺尸，不想再写代码、不爱钻研新东西，以前会的东西现在都忘的差不多了，比如node写后台、Linux服务部署、sql语句等。还少了那种喜欢捣鼓新鲜事物的动力（以前喜
2022-03-07 00:45:24
221
原创 个人笔记-svg图标在vue3中的使用
1、安装svg svg-sprite-loader依赖npm install svg-sprite-loader --save-dev2、创建icon文件夹3、index.js文件中内容// 使用svg-sprite-loader将svg挂载到页面上，使用<use>标签引用const requireAll = (requireContext) => requireContext.keys().map(requireContext);const req = require.c
2022-02-21 15:15:27
1410
原创 个人笔记-vue3与vue2的写法区别
vue2转vue3的个人总结nextTickref值refs的引用异步组件的引入nextTickvue2写法import vue from 'vue';vue.nextTick(() => {});vue3写法import { nextTick } from 'vue';nextTick(() => {});ref值vue2data() { return { msg: 'huhu', };},vue3<div>msg</div&
2022-02-14 10:36:14
1366
原创 sass 个人开发笔记
sass个人开发笔记语法变量for循环if else 判断语法变量<style lang="scss"> $uint: 360 / 5;</style>for循环@for$i 变量#{} 中填写变量<style lang="scss">@for $i from 1 through 12 { li:nth-of-type(#{$i}) span { transform: rotateY(#{$i}deg) translateZ
2021-12-17 17:12:14
79
原创 MutationObserver Api的在项目中的应用--解决了 el-color-picker中隐藏清空按钮
需求：去掉 el-color-picker中的清空按钮，去掉是去不掉的，干脆隐藏掉吧思路：1、已知该清空按钮的class名称为 el-color-dropdown__link-btn，但无法给它直接加 display：none,会污染全局其他变量，也不能在组件中 累加 类名 来解决，因为这个拾取面板压根不属于个组件里面2、在该组件存在时，监听app根组件的DOM变化，当dom变化时，判断是否存在该按钮，有，则给它重新赋值className，这个className赋的值是display：none3、
2021-11-15 15:52:12
2154
2
原创 node 版本折磨的我 发现还有nvm这个好用的家伙
最近换了新电脑，自然配置了新的开发环境，用了最新的node版本结果安装vue项目依赖时，node-sass各种安装不上结果一百度发现还有nvm这个管理工具真够好用啊，记录一下，以防自己以后找不到门牌号了博客园一篇好用的nvm使用教程...
2021-11-10 21:59:51
702
原创 js 手写轮播列表-鼠标移入暂停滚动且可滚动列表，鼠标移出继滚动的位置继续轮播
最近某个项目中要求的该奇葩的需求，要求列表轮播且鼠标移入暂停轮播且可以手动滚动列表，鼠标移出继续轮播网上很多插件都满足了基本的轮播需求：轮播，鼠标移入暂停轮播，鼠标移出继续轮播，唯独这个需求没有满足，就是鼠标移入时，还可以手动滚动列表，于是我决定手写一个，轮播实现的方式有很多种，可以用 transform、top来写，但为了这个特殊的需求，只有用scrollTop来实现了html部分// 外层容器<div class="swiper-wrapper" ref="outterRef">
2021-10-17 21:30:34
1478
1
原创 Windows 10 家庭中文版 电脑左右分屏快捷键（win + ＞）失效的解决办法
如果 win + > 或者 win + < 键不能电脑分屏，则将设置/系统/多任务处理/贴靠窗口-开-取消-贴靠窗口时自动调整窗口的大小，填满可用空间
2021-09-27 21:49:52
6531
2
原创 js可选链使用时报错Support for the experimental syntax ‘chaining‘ isn‘t currently enabled 问题记录-安装bable依赖及配置
问题回顾 vue2 项目中使用了可选链let a = videoInfo?.videoUrl ?? '';然后就报错解决方案// 首先安装babelnpm install --save-dev @babel/core @babel/cli @babel/preset-env// 安装npm i @babel/plugin-proposal-optional-chaining --save-dev // 或者安装指定版本（与上面一条二选一）npm install @babel/plug
2021-09-18 11:37:21
4913
1
原创 node 搭建后端项目
1、初始化项目npm init -y新建出一个package.js文件记录依赖2、初始化gitgit init生成.git文件夹3、根目录创建.gitignore文件内容node_modules4、根目录新建ReadMe.md文件5、登录码云，创建仓库，并上传项目6、安装koa依赖npm i koa7、根目录创建src目录，并创建main.js文件内容8、安装nodemonnpm i nodemon9、package.json文件中的“scripts”中添
2021-09-15 00:13:55
671
原创 element tree 个人笔记
1、dialog 初始化 自动勾选 并默认展开 节点<el-tree :data="treeData" node-key="id" highlight-current // 高亮当前选中节点 ref="treeRef" :default-expanded-keys="expandKeys" // 默认展开的节点的key 数组，此树 key指的是 id :default-checked-keys="expandKeys" // 默认勾选的节点的key .
2021-09-03 09:59:06
161
原创 对接websocket接口的个人笔记
初始化实例websocketconst wsURL = 'ws://122.201.201.202:8000/websocket/xxx';const ws = new WebSocket(wsURL);监听websocket的几个事件// 监听socket连接ws.onopen = this.open();ws.onerror = this.error();ws.onclose = this.close();ws.onmessage = this.getMessage();o.
2021-08-13 16:28:18
453
原创 fetch post踩坑记录
当个请求参数时，可以写为fetch(url, { method: 'POST', body: JSON.stringify({ planID: val, }),}).then(res => res.json()).then((response) => { if (response.code === '0') { console.log(response.code); }});多个请求体时，写为const fo
2021-08-04 12:56:09
215
原创 scss 注册vw和vh
.stylelintrc.js文件中配置module.exports = { extends: 'stylelint-config-standard', plugins: [ 'stylelint-scss', ], rules: { indentation: 4, "font-family-no-missing-generic-family-keyword": null, "at-rule-no-unknow
2021-08-01 21:58:48
603
原创 正则表达式个人笔记
正则表达式个人笔记常用判断首尾是否有空格去除首尾空格去除字符串里面的所有空格常用判断首尾是否有空格const RegExp = /^\s+|\s+$/gRegExp.test(' a b ')// true去除首尾空格const RegExp = /^\s+|\s+$/g' a b ').replace(RegExp, '')// ab去除字符串里面的所有空格' a b '.replace(/\s/g/, '')// 'ab'' a b '.repl
2021-07-09 15:54:44
108
原创 vue的directive注册自定义指令笔记
局部注册（指的是单个vue组件内注册）<template> <input type="number v-focus></input></template><script>export default { data() {}, directives: { focus: { inserted(el) { el.focus(); } } }}</script>全局注册方式一：1.
2021-07-06 14:23:10
178
原创 vue （scss）引入外部组件修改外部组件的样式且不影响外部组件在其他组件中的样式
方法一：<div class="preference-wrapper"> <!-- 外部组件 --> <processline /></div><style lang="scss">.preference-wrapper { .processline { width: 426px !important; }}</style>方法二：<div> <!-- 外部组件
2021-07-05 11:10:03
949
原创 vue中scss设置全局变量，并使用
存写全局变量的文件common.scss// 暗蓝色$blue-Color: #00c0d2;// 屎黄色$yellow-Color: #febf00;vue.config.js文件中module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { data: '@import "@/style/comm.
2021-06-25 15:04:48
840
原创 vue 项目启动时报错TypeError: Cannot read property ‘cssSourceMap‘ of undefined
问题：找到build文件夹底下的webpack.dev.conf.js文件排查问题原因:在根目录文件下创建了config.js文件，和webpack.dev.conf.js 文件中的config.js文件路径相同且同名冲突了解决办法：删除掉自己新创建的config.js文件或者改文件名...
2021-06-17 18:10:00
1214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人