木木木森林

原创 外贸常用网站

外贸常用网站。

原创 前端工作时必备网站(纯手工总结)

前端工作必备网站CSDN掘金博客园Stack Overflow(国外问题交流网)MDN 前端必备GitHubB站vuereactbootCDN印记中文Element UI(Vue常用)Ant Design(React常用)Vant(移动端组件库)Mint(移动端组件库)微信小程序官方文档谷歌插件网Node.js(前端常用的后端语言)Npm(包管理和分发工具)ES6 教程(阮一峰)axios(基于 promise 的 HTTP 库，用来发请求)Ramda(js函数库)Lodash(函数库)TypeScript

原创 git 基本操作

git init 初始化仓库git status 查看文件状态 ：红色标注的文件在工作区，绿色标注的文件在暂存区，很干净的时候说明工作区 暂存区和仓库的当前版本是一致的（Untracked files:未跟踪 新文件的意思， modified：被修改了 deleted：被删除了）git add 文件名 / git add . / git add * ：把某个文件或者所有的文件提交到暂存区git commit -m ‘注释信息’:把暂存区的内容提交到仓库区 并给当次提交添加注释信息git co

原创 前端 HTML/CSS 基础知识汇总

前端 HTML/CSS（一）前端 HTML/CSS（二）前端 HTML/CSS（三）前端 HTML/CSS（四）前端 HTML/CSS（五）前端 HTML/CSS（六）前端 HTML/CSS（七）前端 HTML/CSS（八）前端 HTML/CSS（九）前端 HTML/CSS（十）前端 HTML/CSS（十一）前端 HTML/CSS（十二）前端 HTML/CSS（十三）前端 HTML/CSS（十四）前端 HTML/CSS（..

原创 JS 知识积累笔记

前后端对接问题：接口跨域队列是什么？：队列是先进先出(插队除外)。先进去的代码先执行。[ ] + push + shift = 数组。我们可以认为JS的数组是队列的一种实现。栈：先进后出。像罐子里放东西，先放的东西会压在罐子底下，要拿的时候，最后才能拿出来。栈的实现 ＝ [ ] ＋ push ＋ popJS链表：一个节点连着一个节点，只要不是连着两个或多个节点。proto 就等于next，是下一个节点的意思。树：一个节点后面有两个或两个以上的节点。树：一个节点后面有两

原创 前端必备网站（纯手工输入）

首推B站（没有你学不会的技术，无广告，全免费）https://www.bilibili.com/MDN JS 学习（最爱的前端网站）https://developer.mozilla.org/zh-CN/docs/learn/JavaScript印记中文https://docschina.org/Stack Overflowhttps://insights.stackoverflow.com/trends消除图片中的背景https://www.remove.bg/zh...

原创 HTML、CSS基础知识笔记

构造函数在es6之前是没有“类”的概念的。格式化VS CODE 文档：shift + alt +fcss hover 如果给a元素，那么只有在a里面的才能被选取，如果给外面的元素像div，ul li 这样就是在元素外部也能被选取。行内元素不支持直接设置宽、高。不换行，溢出的字以省略号表示：width：多少px自己决定;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;注：ellipsis : 　当对象内文本溢出

原创 JavaScript设计模式

设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖

原创 胡哥面试视频手录

1. 在项目前期，我们作为前端一定要和 UI 和产品经理进行深度的沟通，争取把每一个需求都弄明白。这样做的好处是避免了咱们后边分工。分工其实是最大的成本的浪费。2. 项目中期，在项目开始的时候，不仅仅是个人编写的现有的代码，我们需要把以前的工具包、插件、组件等等跟工作相关的一系列常用的东西都收集好，这样在工作中效率就会提高很多。在工作中，先做重要的工作，再做次要的工作，先实现功能，再进行优化，可以避免期限到了功能还没有实现的局面。3. 在项目后期，最重要的是项目的维护，以及项目 bug 的修改。在这个过

原创 一篇博客搞定移动端布局

指屏幕在：横向、纵向上所拥有的**物理像素点**总数。一般用 n * m 表示。​ 例如：iPhone 6 的屏幕分辨率为 750 * 1334- 注意点： - **屏幕分辨率是一个固定值，屏幕生产出来就确定了，无法修改！！** - 屏幕分辨率、显示分辨率是两个概念，系统设置中可以修改的是：显示分辨率。 - 显示分辨率是设备当前所用到的物理像素点数，也可以说：屏幕分辨率 >= 显示分辨率

原创 JavaScript中 slice, substr 和 substring 的区别

slice, substr 和 substring 的区别。1. 它们都接收两个参数首先，它们都接收两个参数，slice 和 substring接收的是起始位置和结束位置(不包括结束位置)，而substr接收的则是起始位置和所要返回的字符串长度。var test = 'hello world'console.log(test.slice(4, 7)) // o wconsole.log(test.substring(4, 7)) // o wconsole.log(test.substr(4

原创 使用require.context实现前端工程自动化

使用require.context实现前端工程自动化。

原创 js重点手写

css的各种居中-三个小盒子在一个大盒子中水平居中。css的各种居中-多行居中。

原创 前端现场笔试题

多行文本溢出以省略号表示：overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; // 最大行数-webkit-box-orient: vertical;

原创 TypeScript快速入门

我们在函数名后添加了 ，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。接着在调用的时候，可以指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算出来

原创 浅拷贝4(Object.assign)

Object.assign() - 当拷贝对象的属性值对应的都是基本类型数据，可以理解为深拷贝。 - 当拷贝对象的属性对应的值为数组或对象等引用类型时，为浅拷贝。

原创 浅拷贝3(扩展运算符)

当拷贝对象的属性值对应的都是基本类型数据，可以理解为深拷贝。当拷贝对象的属性对应的值为数组或对象等引用类型时，为浅拷贝。

原创 浅拷贝2(JSON.parse(JSON.stringify()))

一般来说，JOSN.parse(JSON.stringify(obj1))只能对基本数据类型+obj+array进行深拷贝。不能对函数进行深拷贝，因为会忽略函数的拷贝。解决办法是进行递归操作。

原创 浅拷贝1(for-in)

浅拷贝:仅仅复制对象的引用,而不是对象本身。深拷贝:复制对象所引用的全部对象。

原创 vue2.x 和 vue3.x的区别

1. 组建中可以不需要一个根标签包裹了。2. 取消了全局事件总线。在*Vue3*中,从实例中完全*移除了* `$on`、`$off` 和 `$once` 方法。`$emit` 仍然包含于现有的 API 中。3. 取消了项目中的生产提示 ：`Vue.config.productionTip = false`4. 移除了过滤器，官网的说法是，过滤器有学习成本，可以使用方法或者计算属性来代替。

原创 vue3.x 组件间传参

父组件给子组件传最好的方式用： props，插槽，$parent

原创 vue3 中 v-model从入门到精通

// 与Vue2的v-model的区别// 1.默认属性名是modelValue,不再是value了// Vue3中,v-model和.sync语法合二为一// 指令语法用的是v-model// 实际效果用的是.sync// 扩展语法:v-model:属性名="value",该语法可以自定义传递的标签属性名称,不一定非要是modelValue// 但是,自定义属性名称之后,自定义事件的名称也会跟着发生变化

原创 vue 中 sync和v-model的使用

原创 vue2 中 v-model从入门到精通

// 在子组件中使用v-model，子组件接收要使用value。 // vue3中叫作modelValue。如：defineProps(['modelValue']) // 如果使用msg接收，不会生效 props: ['value'],

原创 20 个既简单又实用的 JavaScript 小技巧

我们可以使用 window.scrollTo() 平滑滚动到页面顶部。你一定遇到过这样的场景，需要全屏播放视频，并在浏览器中全屏打开页面。

原创 Pinia的使用

Pinia的使用。Pinia在2019年11月左右开始尝试用Composition API(组合式 API)重新设计Vue Store(存储)的样子。Pinia适用于Vue 2和Vue 3，并且不需要你使用复合API。Pinia是Vue的一个存储库，它允许你跨组件/页面共享状态(状态即数据)。...

原创 TypeScript数组的多种定义方式

7. 类数组的类型，使用系统定义的IArguments。TypeScript数组的多种定义方式。8. 类数组的类型，使用自定义的接口。

原创 移动端出现横向滚动条

解决移动端出现的横向滚动条...

原创 报错：TypeError: Cannot read properties of undefined (reading ‘$createElement‘)

一个路由跳转的问题component 的后面多加了一个 ，去掉就好了：

原创 报错：TypeError: Cannot read properties of undefined (reading ‘init‘)

报错：TypeError： Cannot read properties of undefined reading 'init'1. 报错的样子2. 报错的原因3. 解决的方法4. 控制台不再报错1. 报错的样子在vue当中引用echarts，控制台报错： “TypeError: Cannot read properties of undefined (reading ‘init‘)2. 报错的原因报错是因为我们引用了echarts里面的init方法显示没有定义3. 解决的方法将import

原创 报错：Invalid prop: type check failed for prop “index“. Expected String, got Undefined

报错：Invalid prop: type check failed for prop "index". Expected String, got Undefined1. 报错的时候2. 报错的内容3. 修改的地方4. 解决1. 报错的时候2. 报错的内容3. 修改的地方4. 解决

原创 报错：Cannot read property ‘xxx‘ of undefined

报错：Cannot read property 'xxx' of undefined有时候我们会碰到这样的报错为什么会出现这样的问题？解决后记有时候我们会碰到这样的报错为什么会出现这样的问题？因为supports的第0个是undefined的。解决因为数据是后端请求过来的，一开始没有加载到。然后后面直接.type就没有办法拿到数据。如果是这样的话，我们可以先判断一下，如果有数据再显示下面的内容。这样等数据真正拿到了才会显示。后记info.bgImg并没有报错，而下面的supports[

原创 谷歌浏览器按F12或者右键检查打开控制台很慢

谷歌浏览器按F12或者右键检查打开控制台很慢三步搞定：按f12打开控制台，并点击设置按钮2. 找到preference 里面的language3. 选择 English (US) - English (US)

原创 查找数组中满足条件的对象里的最后一个键

let arr = [{ a: 1, b: 2 }, { a: 3, b: 4 }, { a: 3, b: 5 }, { a: 3, b: 6 }]// 比如说a的值为3的function firstGrayIndex(array) { let index = array.reverse().findIndex((item, index) => { // console.log(item); return item.a === 3; }); if (index ===

原创 PC项目笔记

整体引入 lodash：import _ from 'lodash'按需引入 lodash 中的 throttle：import throttle from 'lodash/throttle'事件控制 2、3 级分类的显示和隐藏：原来的是使用 css 去做的，改为一个类：首先把原来的 hover 去掉，改为一个类。在 item 身上动态的强制绑定 class，[item_on: 布尔值]，布尔值为 true，那么当前的这个 item 的类就生效。移入哪一个 item，就让当前这个 it..

原创 ES6快速上手

目录ECMAScript概述JS历史ECMAScriptECMAScript版本文档地址关键字扩展(重要)let和块级作用域函数作用域块级作用域let关键字let关键字特点const关键字块级作用域的函数声明变量解构赋值(重要)什么是变量的解构赋值数组的解构赋值对象的解构赋值解构赋值的应用字符串的扩展模版字符串(重要)字符串新增的方法数组扩展扩展运算符什么是扩展运算符其他应用数组的新方法Array对象的新方法Array.from(实用)Array.ofArray原型上的新方法copyWithin(了解)fi

转载 Vue3快速上手(tianyu)

前端网站分享Vue3快速上手1.Vue3简介2.Vue3带来了什么自己添加的内容：1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式5.reactive对比ref6.setup的两个注意点7.计算属性与监视1.computed函数2.watch

转载 Vue2知识点(tianyu)

前端网站分享笔记脚手架文件结构关于不同版本的Vuevue.config.js配置文件ref属性props配置项mixin(混入)插件scoped样式总结TodoList案例webStorage组件的自定义事件全局事件总线（GlobalEventBus）消息订阅与发布（pubsub）nextTickVue封装的过度与动画vue脚手架配置代理方法一方法二插槽Vuex1.概念2.何时使用？3.搭建vuex环境4.基本使用5.getters的使用6.四个map方法的使用7.模块化+命名空间路由1.基本使用2.几个注

原创 Vue 项目性能优化

Vue代码层面优化1) v-for 遍历列表2) 图片资源懒加载3) 路由组件懒加载4) 第三方插件的按需引入5) 大数组优化1: 冻结响应式数据6) 大数组优化2: 虚拟列表7) 事件销毁2. webpack配置层面优化1) 兼容性处理2) 拆分打包与压缩3) 资源预加载(prefetch)4) 生产环境时不生成 SourceMap5) 文件名hash化=>利用浏览器缓存6) 代码Tree Shaking3. 基础的Web技术层面的优化1) 开启 Gzip2) 静态资源(css/js/img)使用C

原创 小程序功能实现

小程序功能实现小程序搜索框实现实现带搜索记录的搜索框小程序优化小程序微信支付流程以前收藏的小程序面试题小程序购物车功能实现微信小程序轮播图实现小程序搜索框实现判断是否为空，如果为空则提示用户，输入内容不能为空。发送请求判断是否为有效关键词，如果搜索的内容中没有商品，则版心内容提示用户，未搜到合适的商品。小程序实现搜索框功能实现带搜索记录的搜索框关键API: wx.getStorageSync('searchData') || [], //调用API从本地缓存中获取数据博客