前端
前端的学习与应用
~嘘~禁止想象~
~嘘
展开
-
obj.name 与 obj[name]语法的区别
obj.name 与 obj[name]语法的区别。原创 2022-08-03 06:48:44 · 1025 阅读 · 1 评论 -
mvc和mvvm
mvc与mvvm原创 2022-07-25 16:48:27 · 361 阅读 · 0 评论 -
如何快速的筛查package.json中的包是否有冗余
我们在开发的时候(尤其是大型项目), 很多的包我们在引入之后可能没有在实际的场景中使用,但是package.json中却有搜集.就会显得这个文件很混乱.这时候我们就需要将没有用的包从中筛选出来.看到这篇文章, 讲了三种方法.https://www.dovov.com/package-jsonnpm.html...原创 2022-02-25 16:06:53 · 1225 阅读 · 0 评论 -
git基本操作(笔记)
防止忘记。。。git简易直观操作git操作练习1. 创建提交操作在当前分支提交git commit -m "info"创建一个新的分支并指向新的分支git checkout -b 新分支名创建一个新的分支,但指向当前分支git branch 新分支名切换到已有分支git checkout 已有分支名2. 分支合并操作合并 feat02 到 feat01方法一:首先要切换到feat01git merge feat02(feat02是我们要合并的分支原创 2022-02-08 11:18:52 · 627 阅读 · 0 评论 -
React中父向子传递参数(类组件)
在父传子过程中是使用props来实现组件间的传输的,直接通过代码来直观的感受一下。父组件:export default class App extends Component { render() { return ( <div> <Child name="perry" age="18" height="1.88"></Child> </div> ) }}子组件:class Child原创 2022-01-15 23:33:17 · 1186 阅读 · 1 评论 -
vscode中react写jsx没有补全
打开settings.json文件在后面加上下面这两个项 "emmet.includeLanguages": { "javascript":"javascriptreact" }, "emmet.syntaxProfiles": { "javascript":"jsx", "javascript":"html", },保存即可原创 2022-01-12 10:22:40 · 281 阅读 · 0 评论 -
VsCode通过snippet generator快速生成自定义代码片段
在线地址:https://snippet-generator.app/复制我们需要快速生成的代码到左边例如:然后复制右边到片段json文件即可片段json文件在哪?之后就可以通过关键字进行代码的快捷生成了原创 2021-12-09 13:47:44 · 1059 阅读 · 0 评论 -
学习webworker
1. 什么是webworker理论多代码少的一个新特性MDN是这样说的Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面一个worker是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的JavaScript文件这个文件包含将在工作线程中运行的代码;workers 运行在另一个全局上下文中,不同于当前的window因此,使用 window快捷方式获取当前全局的范围 (而不是self) 在一个 W原创 2021-12-06 22:45:40 · 2923 阅读 · 0 评论 -
循环延迟问题 for + setTimeout()
假设我们要实现一个repeat函数,能够在间隔相同的时间去执行一个fn。(func, 次数, 间隔时间)function repeat(func, times, wait) { return (...arg) => { for (let i = 0; i < times; i++) { setTimeout(() => [ func(...arg) ], wait) } }}const repeatF = repea原创 2021-11-08 20:17:24 · 469 阅读 · 0 评论 -
遍历整个dom节点,理解判断节点类型
dom实际上就是一颗数:如何去遍历一棵树,递归一定是我们最先想到的方法。假设我们现在要拿到document中所有的节点,我们应该怎么去做,我们应该从document开始,向下找,将document的孩子节点一个个遍历,如果他的孩子中还有孩子节点,那么我们去递归。我随便构建了一个html的结构,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta htt原创 2021-11-07 14:45:01 · 287 阅读 · 0 评论 -
2021-08-16 代码规范报错
✖ 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the `--fix` option在代码最后面加空行即可如果有html css js format 关掉保存即可原创 2021-08-16 19:38:44 · 220 阅读 · 0 评论 -
better-scroll的observe-dom参数
还在为better-scroll发愁吗,明明所有的配置都是正确的它就是不能滚动。当然也有可能是真的配置错了言归正传,我们来看看这个observe-dom参数1. 官方解释开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后,当这些 DOM 元素发生变化时,将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性:针对改变频繁的 CSS 属性,增加 debounce如果改变发生在 scroll 动画过程中,则不会触发 r原创 2021-08-12 19:13:14 · 1117 阅读 · 0 评论 -
Vue CLI(学习笔记)
1. 什么是CLICLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架。Vue CLI 是官方发布 vue.js 项目脚手架使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。使用Vue.js开发大型应用时,我们需要考虑代码目录结构,项目结构和部署,热加载,代码单元测试等事情如果每个项目都要手动完成这些工作,效率很低,所以我们通常使用一些脚手架工具来帮助我们完成这些事情。2. 依赖于 node需要安装node8.9以上的环境还原创 2021-08-06 17:55:50 · 122 阅读 · 0 评论 -
Vue响应式原理(简单理解)
先把这张图供起来0. 什么是响应式官网的解释(可以挑着读一下)当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来原创 2021-08-06 09:06:55 · 680 阅读 · 0 评论 -
postcss-px-to-viewport 的使用
安装npm install postcss-px-to-viewport --save-dev配置vue.config.js文件module.exports = { css: { loaderOptions: { postcss: { plugins: [ require(‘postcss-px-to-viewport‘)({ uni原创 2021-08-04 07:58:43 · 748 阅读 · 0 评论 -
HTML和HTML5的简单区别
html5原创 2021-05-08 15:31:40 · 4792 阅读 · 0 评论 -
将一个Python程序与html配合的案例总结
最近帮学长做一个需求,总结一下在实现过程中遇到的问题,以及一些新知识的学习。点击上传文件,并展示。点击按钮进行测试,执行Python文件,并将指定生成文件夹中的图片展示在页面上1. 文件的上传并展示在页面上方法一:FileReader参考文档:MDN FileReader<body> <!-- multiple 属性规定输入字段可选择多个值。如果使用该属性,则字段可接受多个值。 --> <!-- webkitdirectory 属性可以以文件夹形式上传文原创 2021-05-08 00:19:25 · 2108 阅读 · 1 评论 -
axios(codewhy老师学习笔记)
为什么选择axiox作者推荐,量级轻。功能特点在浏览器中发送XMLHttpRequests请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据…原创 2021-03-21 15:25:16 · 888 阅读 · 0 评论 -
VueX(学习笔记)
1. vueX的概念和作用原创 2021-03-10 11:37:44 · 117 阅读 · 0 评论 -
新版 Vue-devtool 离线安装
github下载地址:https://github.com/vuejs/vue-devtools/记得用tags里面的解压然后用管理员方式打开cmd后进入解压文件后、执行npm install然后执行npm run build(原来)之后会报错,因为要用 yarn 来安装所以安装yarnnpm -g bin找到npm的bin目录到bin目录下,使用管理者模式打开cmd,运行npm i -g yarn使用yarn在下载的文件夹内跑yarn install然.原创 2021-02-26 19:45:23 · 2215 阅读 · 3 评论 -
手风琴效果(JavaScript练习)
<!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> * { margin: 0; p.原创 2021-02-15 11:28:26 · 711 阅读 · 3 评论 -
vue-Router(学习笔记)(cli4)
1. 认识路由1. 什么是路由网络工程里面的术语路由(routing)就是通过互联的网络把信息从原地址传输到目的地址的活动。路由提供了两种机制:路由和传送。路由是决定数据包从来源到目的地的路径。传送将输入端的数据转移到合适的输出端路由中有个非常重要的概念叫路由表路由表本质上就是一个映射表,决定了数据包的指向2. vue-router的基本使用3. vue-router嵌套路由4. vue-router参数传递5. vue-router导航守卫6. keep-a原创 2021-02-11 09:50:11 · 246 阅读 · 0 评论 -
vue3.x 重复点击路由报错
这个报错是重复路由引起的。需要给VueRouter里面自己重写 push 和 replace 方法const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}const originalReplace = VueRouter.pro.原创 2021-02-10 18:58:35 · 462 阅读 · 0 评论 -
在vue3.x中遇到的报错:Uncaught (in promise) Error: Couldn‘t resolve component “****“ at “/*****“
Uncaught (in promise) Error: Couldn’t resolve component “default” at “/about”at eval (vue-router.esm-bundler.js?6c02:1990)异步异常(字面理解)配置根目录下的vue.comfig.js原先我是写成这样(错***)查看里面的publicPath: "/", 对,不能有.module.exports = { publicPath: "/", }...原创 2021-02-08 19:32:39 · 12659 阅读 · 0 评论 -
在使用懒加载方式引入子路由vue文件,有时会报错!!!
这报的错!!! 就离谱!!!Uncaught SyntaxError: Unexpected token '<'我在home中配置了两个子路由叫HomeNews和HomeMessage并通过懒加载的方式将其引入了router下的index.js正确的操作!!!没错浏览器有时候也会正常的显示正常的跳转,但是跳着跳着他就不正常了。One Month Later我改了它引入的方式之后,就再没报过错了。(不知原理)import HomeMessage from '../views/Ho.原创 2021-02-08 19:10:48 · 268 阅读 · 0 评论 -
自定义vue模板(name默认是文件名)
左下角找设置里面的用户代码片段然后找到这个文件用下面的模板替换即可{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", "", " </div>", "</template>", "", "<script>", " export default原创 2021-02-07 22:29:34 · 367 阅读 · 0 评论 -
不使用for或while实现循环功能(JavaScript)
1. 利用 正则 和 replace <script> var str = new Array(6).join("a"); //"aaaaaa" var i = 0; str.replace(/a/g, function() { console.log(i); i++; }) </script>2. 利用 setInterval 进行循环 <script> var i = 0; var t原创 2021-02-05 12:14:05 · 781 阅读 · 0 评论 -
利用正则添加千分符(JavaScript)
<body> <input type="text"> <button>添加千分符</button> <p></p></body>方法一: <script> var input = document.querySelector("input"); var p = document.querySelector("p"); var btn = document.query.原创 2021-02-05 09:34:56 · 299 阅读 · 2 评论 -
vscode中将html,css,js代码首行改成2空格缩进
1.首先在坐下角找到设置2. 然后找到这个东西改成23. 如果安装了如下插件4. 按F1查找formatter.config文件5. 将所有的index_size的值改成2即可"indent_size": 2,6. 然后关掉vscode重新打开,缩进就变成2个了...原创 2021-02-04 18:26:42 · 2909 阅读 · 1 评论 -
js实现商品筛选功能
应用场景:商品筛选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; list-sty原创 2021-01-30 18:45:53 · 902 阅读 · 0 评论 -
点击自制菜单
应用场景:当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时,需要阻止浏览器默认行为,并执行我们想要的效果第一种方式,通过创建元素的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-01-30 13:08:41 · 198 阅读 · 2 评论 -
获取元素(动态集合和静态集合)
如果我想利用循环将 ul 中的 li 元素清空,我们最先想到的是直接获取所有的 li 循环遍历删除即可。但是获取 li 元素的方法不同会导致结果不同<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l.原创 2021-01-29 20:28:31 · 301 阅读 · 0 评论 -
base64编码的图片有什么用
1. 什么是图片的base64编码图片的base64编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url。网页上展示的时候是这样的(后面的…非常长)我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的,一个http请求就是一个网络开销。图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 css 的下载同时下载到本地,那不是非常节省网络开销(一次就够)?base64 正好能解决这个问题。2. 什么时候用呢?优点呢?如原创 2021-01-25 12:10:29 · 1932 阅读 · 0 评论 -
webpack 打包图片时遇到的bug
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “from” argument must be of type string. Received undefined在使用 url-loader 时 limit 的限制过小导致,我们需要安装 file-loader 并且调低url-loader和file-loader的版本在packge.json中修改成下面的版本后(我自己随便找的低版本)执行 npm install "u.原创 2021-01-25 16:47:59 · 972 阅读 · 2 评论 -
Webpack入门学习(笔记)
1. gulp 与 webpack 的区别gulp更加强调的是前端流程的自动化,模块化不是它的核心。Webpack更加强调模块化开发管理,而文件压缩合并,预处理等功能,是他附带的功能。2. 安装webpack 依赖于 node 环境,node 要用 npm(软件包管理工具) 来管理包3. 打包webpack ./src/main.js ./dist/bundle.js设置webpack.config.js文件可以简化命令行执行语句const { dirname } = requi原创 2021-01-27 00:19:09 · 213 阅读 · 0 评论 -
实现寻找一个节点 上面所有兄弟节点 和 下面所有兄弟节点
直接上栗子:输出红色li元素上面和下面的节点<!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><原创 2021-01-27 18:03:41 · 273 阅读 · 0 评论 -
布局转换
应用场景:在某些情况下我们需要将浮动布局转换成为定位布局,以实现动画效果。我们通过给父级设置postion属性,使用offsetTop和offsetLeft获取位置后赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-01-28 12:14:14 · 146 阅读 · 2 评论 -
点击置顶
应用场景:当页面在下滑时右下角会有一个返回顶部,一点击会返回顶部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st原创 2021-01-28 12:39:56 · 151 阅读 · 0 评论 -
js 控制多选框选择项数
应用场景: 当我们限制多选框选择数量时用到<!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><b原创 2021-01-28 13:10:01 · 553 阅读 · 0 评论 -
webpack 打包 css 报错
UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function版本过高导致!!!在 package.json 中将 css-loader 和 style-loader 版本号改为如下低版本 "css-loader": "^3.3.0", "style-loader": "^1.0.0"然后重新的安装依赖的包 npm install就可以打包成功了...原创 2021-01-24 08:39:37 · 208 阅读 · 0 评论