- 博客(118)
- 收藏
- 关注
RSS订阅原创 引入icon图标
## 一.`svg-sprite-loader`的基本使用**1.在[iconfont](https://www.iconfont.cn/search/index?searchType=icon&q=money&page=1&fromCollection=1&fills=&tag=)下载好需要的图标后,把它添加到项目`assets`里并引入。**那如何引入呢？ 🔍[typescript svg cannot find module](https://stackoverflow.com/questio
2022-10-16 22:26:35
2252
原创 Vue组件的命名规则
1. 在html中不允许使用驼峰！html中的组件必须用，例如。在组件中, 父组件给子组件必须用，例如。2. 在template中必须使用。3.在组件的data中用引用时,只能是方式，比如。不规范命名的报错信息，如下图所示:4.文件名最好全小写，因为有些古老的操作系统(window10)可能不能识别大小写，防止2个大小写文件重名。5.组件首字母最好大写......
2022-07-11 02:10:05
4024
原创 es6箭头函数中return的用法
1.箭头函数没有this箭头左边是输入参数，右边是输出参数。不管你对箭头函数做任何的call、bind操作都无效。this永远都是最开始定义时获取的this。箭头函数的this就是普通变量。箭头函数里的this就是外面的this(默认的window),箭头函数没有this。所以你加call、bind没用。上级是对象时this永远都是指向window，只有是非箭头函数时才是上级的this箭头函数所在的this 是它外面的那个非箭头函数的this。this指向外层函数作用域(不是外层对象哦)。2
2022-06-28 05:19:54
457
原创 修改mac终端命令行的前缀
终端自带前缀太繁琐，实现自定义前缀。方法：修改PS1变量可取值：\h表示本地主机名\W表示符号~\u表示用户名$表示符号$//sudo chmod -R 777 /etc/bashrc vi /etc/bashrc # PS1='\h:\W \u\$ ' PS1='\W ' //自定义你的PS1保存并退出：按Esc + :wq + 按Enter。写入权限如果提醒你没有该文件的写入权限，例如chmod: unable to change file mode on /etc/b.
2022-05-31 04:59:01
1893
原创 chrome err_connection_timed_out
关键点：重新切换代理服务器。具体操作方法1：刷新 DNS 缓存方法2：清除缓存方法3：更新 DNS方法4：尝试 VPN方法5：检查防病毒和防火墙设置方法6：修改Windows主机文件方法7：重新切换代理服务器(找能用的)chrome无法正常使用,时好时坏,这是因为服务器被墙了，如果当前的不能用就重新切换能用的(治标不治本)判定服务器已经处于被墙状态:1.管理后台显示vps运行正常，但国内无法ping通，境外ip可以（ip被列入黑名单）2.能ping通，也能telnet过去，但ss.
2022-05-26 14:14:50
4234
5
原创 PX2REM
sass文档假设设计稿是640px,稿内div宽高256px*128px。在使用动态rem时，通常我们需要手动转换将px值转换为对应的rem，但这过程略显繁琐，这时我们可以借助工具实现自动转换。1.安装npm config set registry https://registry.npm.taobao.org/ touch ~/.bashrc echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' .
2022-05-15 21:59:58
938
原创 手写Redux(3)
Redux文档-storeAPI封装技巧内容:分别模拟封装store的三个方法getState()dispatch(action)subscribe(listener)封装前代码redux.jsimport React, { useState, useContext, useEffect } from "react"const store = { state: undefined, reducer: undefined, setState(newState) {
2022-05-11 23:13:12
323
原创 手写Redux (2)
手写Redux (2)目录1.Selectorconnect的第一个参数2.mapDispatchToPropsconnect的第二个参数3.connect的意义4.封装Provider和createStoreSelectorSelector是connect的第一个参数，由React-Redux库提供。Selector的第1个功能:实现简写目前我们的User组件只用到了state.userconst User=connect( ({state}) => { return &
2022-05-11 00:15:39
551
原创 排 序 算 法
排序算法(上)算法里面最简单的就是排序算法，这节课主要讲选择排序。算法入门:四种排序算法(选择、归并、快速、技术)和对应的结构。实现minOf2:2个数找出较小的那个再优化析构赋值:把结构拆开，依次复制let minOf2=([a,b]) => a < b ? a : b //调用minOf2([1,2]) //小白调用法minOf2.call(null,[1,2]) //高手调用法现成APIJS内置了Math.minMath.min(1,2)Math.min.ca
2022-05-09 15:48:18
538
原创 Mixed Content: The page at ‘https:...‘ was loaded over HTTPS, but requested an insecure script ‘http
今天把个人博客上传github预览时发现样式没了，打开控制台发现请求被拦截。原因: 浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。如下图所示:解决方法1’ 既然不支持http,那就改为https2’ 将http自动升级为https将调用的http请求升级成https请求<meta http-equiv="Content-Security-Policy" content="upgrade-insecure
2022-05-08 17:18:10
2143
原创 搭建个人网站
Hugo 是用Go语言实现的一个博客生成器，目前世界上最快的博客生成器。还有个用JS实现的博客生成器叫做Hexo,难用,不推荐。安装brew install hugo //yarn global add hugohugo version用brew安装报错，我不知道怎么解决，有知道怎么处理的同学评论区告诉我哦用yarn安装出现警告“hugo@0.0.3”没有二进制文件，那我们直接以二进制形式安装。解决方法: 文档(安装包)直接以二进制形式安装需要下载安装包(已下载)应该将其安装在P.
2022-05-08 08:39:24
418
原创 手写 Redux
从零开始手写redux全局state的读写例1.使用Context读写appStateimport React, { useState, useContext } from "react"import ReactDOM from 'react-dom'import './style.css'const appContext = React.createContext(null)const App = () => { const [appState, setAppState] =.
2022-05-04 04:07:27
394
原创 Hooks 各个击破
Hooks 各个击破React文档Hooks：useState、useEffect、useLayoutEffect、useContext、useReducer、useMemo、React.memo、callCallback、useRef、useImperativeHandle、自定义Hook、useDebugValueuseState(最常用)在React的函数组件里，默认只有属性，没有状态。1.使用状态//数组第1项是读接口，第2项是写接口，初始值0const [n,setN] =
2022-05-02 06:51:42
802
原创 Hooks 原理解析
Hooks 原理解析内容1.分析useState原理和源码2.useRef的作用3.useContext的作用4.Vue3 对比 React分析useState原理import React from "react";import ReactDOM from "react-dom";const rootElement = document.getElementById("root");function App() { console.log("App 运行了") const
2022-04-24 21:28:43
1817
原创 React函数组件
函数组件内容1.创建方式2.函数组件没有state怎么办3.函数组件没有生命周期怎么办4.自定义hook函数函数组件的创建方式两种形式1' 声明一个变量等于箭头函数const Hello = (props) => { return <div>{props.message}</div>}//箭头函数可以缩写const Hello = props => <div>{props.message}</div>2' 使用
2022-04-22 05:47:54
2773
原创 Class组件详解
Class 组件详解目录一.class组件的创建方式二.props和state三.生命周期Lifecycle创建 class 组件两种方式第1种.ES5方式(过时)import React from 'react'const A = React.createClass({ render() { return ( <div>hi</div> ) }})export default A// 由于ES5不支持class,才会有这种方式第2种.
2022-04-21 08:45:32
1599
原创 React 类组件和函数组件
React 类组件和函数组件目录1.类组件和函数组件2.如何使用 props 和 state3.如何绑定事件4.复习 this+ 两个面试题组件component一.概念Element VS Component (元素与组件)//不成文的约定:元素小写，组件大写const div=React.createElement('div',...)这是一个React元素(小写)const Div=()=>React.createElement('div',...) 这是一个Rea
2022-04-19 11:25:14
5239
原创 React起手式
React起手式目录1.如何引入React2.函数的本质–延迟 如何使用React里的函数？3.JSX的用法4.条件判断与循环引入React(3种方法)1’ CDN引入(不推荐)需要引入2个库：先引react 后引react-dom,注意顺序<body> <div id="app"></div> <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.developm
2022-04-17 12:56:40
737
原创 深入理解Vue动画原理
深入讲解 Vue 动画原理文档 过渡 & 动画轮播组件slides轮播难点在于最末位到首位的切换方式，在讲轮播之前需要讲下动画。Vue动画支持很多种不同的方式。Vue动画方式1 - CSS transitionVue提供了transition组件HTML//先引入Vue(bootCDN)<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.min.js"></script>&l
2022-04-16 21:55:00
968
原创 Vue Router 前端路由实现的思路
Vue Router 前端路由实现的思路路由器(面试题)一.前端路由是什么？二.hash模式? history模式? memory模式?三.VueRouter源码一.前端路由是什么？路由是什么？路由器,如果你家里有1个以上的人要上网就需要路由器。你要上网就需要连接到路由器上，路由器要连接到电信/联通公司，电信公司会出售一些网络IP或端口，百度就会购买这些IP(大概会购买几千个IP)作为它的服务器，腾讯也会购买它的IP，抖音同样也要购买它的IP。你连路由器，路由器看你想连哪里，比如你想连百度
2022-04-15 06:57:59
325
原创 Vue表单与v-model
Vue表单与v-modelAnt Design Vue 文档表单基本用法input/textarea/checkbox/radio/select/from修饰符.lazy/.number/.trim运行环境新建文件vue-demo,用Vue的脚手架给它初始化下。vue create .选择在当前目录创建,使用默认的vue2yarn serve表单基本用法1.input 文本2.textarea 多行文本<template> <div id="app"&
2022-04-13 06:48:03
310
原创 Vue进阶构造属性
Vue构造属性: directives、mixins、extends、provide、inject1.Directives 指令进入Vue.js中文文档,选择API🔍directive参考:自定义指令2种写法1’ 声明一个全局指令Vue.directive('x',directiveOptions)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m1FwIC0i-1649367577323)(media/16306568122383/1649324943.
2022-04-08 06:07:23
1130
原创 Vue 模板、指令与修饰符
Vue的模版语法我们把HTMl模版叫做template。template的3种写法1’ Vue完整版,写在HTML里html<div id=xxx> {{n}} <button @click="add"> + 1 </button></div>new Vue({ //把html变成DOM节点 el:'#xxx', data:{n:0}, //data可以改成函数 methods:{ add(){} }})
2022-04-07 02:51:41
384
转载 this的值到底是什么？
原文链接你可能遇到过这样的 JS 面试题：请解释最后两行函数的值为什么不一样？var obj = { foo: function(){ console.log(this) }}var bar = obj.fooobj.foo() // 打印出的 this 是 objbar() // 打印出的 this 是 window函数调用首先需要从函数的调用开始讲起。JS（ES5）里面有三种函数调用形式：func(p1, p2) obj.child.method(p1, p.
2022-04-05 21:32:01
95
原创 Vue中的computed 和 watch
computed 和 watchVue2 options文档响应式原理options.data1.data会被Vue监听2.会被Vue实例代理,vm就是data的代理3.每次对data的读写都会被Vue监控。不管你是读写它的本身还是读写代理都会被监控，data对象会被篡改,本来的n会变成get n和set n。4.Vue会在data变化时更新UIdata变化时除了更新UI，还能做些啥？一.Computed 计算属性1.用途:被计算出来的属性就是计算属性2.缓存： 如果依赖的属性没有
2022-04-05 07:51:15
3409
原创 Vue数据响应式
数据响应式主要原理:深入响应式原理内容:深入理解options.dataVue对data做了什么？const myData = { n: 0};console.log(myData); new Vue({ data: myData, template: ` <div>{{n}}</div> `}).$mount("#app");setTimeout(() => { myData.n += 10; console.log(
2022-04-01 07:08:33
1806
原创 Vue构造选项
构造选项V2 options文档内容:new Vue(options)options取值详解查看示例代码Vue实例什么是Vue实例？Vue实例就如同jQuery实例:封装了对DOM的所有操作封装了对data的所有操作比如，如果我们用jQuery选择一个元素，会得到一个jQuery的实例(实例就是对象)，而不是得到这个元素。这个对象封装了对那个<div>的所有操作。Vue也是一样的，我们要做的就是用Vue去搞出一个Vue实例来。new Vue() 这就是构造一个Vue的实
2022-03-30 23:37:10
775
原创 Vue起手式
起手式Vue中文文档 、工具@vue/cli文档Vue的历史vue、Angular.js、React.js前端三大主流框架。MVC中的V是Vue的重点，M和V则被简化。Vue和vue.js没有区别，vue就是vue.js的简称。Vue你可以认为是框架也可以说是库，Vue中文英文文档都是尤雨溪写的。15年的1.0版本Vue自称是MVVM框架，不是MVC是MVVM，不过这已经成历史了。现在Vue是MV * 框架,意思就是你说MVC、MVVM都行。但是Vue升级到2.0后，它虽然看起来是MVVM
2022-03-29 21:29:13
1374
原创 数 据 结 构
数据结构目前我们用过的数据结构数组(选择排序、归并排序、快速排序)数组可以分为队列、栈等哈希表(计数排序)用来存储key-value对数据结构一:队列Queue队列Queue:一种特殊的数组,先进先出的数组什么是队列数据结构?队列数据结构就是个类似数组的东西，但是它只提供push()入队和shift()出队2个操作。你提供这样的结构和这样的2个操作，你就是队列。队列专门用来解决排队的问题。用call改写//queue.push(n)queue.push.call(queue,
2022-03-27 01:20:54
544
原创 GET请求的长度限制？
Http get方法提交的数据大小长度并没有限制，Http协议规范没有对URL长度进行限制。目前说的get长度有限制，是特定的浏览器及服务器对它的限制。各种浏览器和服务器的最大处理能力如下：IE：对URL的最大限制为2083个字符，若超出这个数字，提交按钮没有任何反应。 Firefox：对Firefox浏览器URL的长度限制为：65536个字符。 Safari：URL最大长度限制为80000个字符。 Opera：URL最大长度限制为190000个字符。 Goog
2022-03-20 03:50:50
3103
原创 Webpack(下)
Webpack（下）loader VS plugin(面试题)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amOcGpIF-1647399160833)(media/16242102685328/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202022-03-15%20%E4%B8%8B%E5%8D%884.10.57.png)]用webpack生成JS我们给它个js文件，这个js文件通过webpack得到了一个新的js文件。内置了b
2022-03-16 23:11:51
192
原创 Webpack(上)
Webpack（上）前端框架Webpack，前端最重要的工具之一。CRM法学webpack,通过11个任务学会webpack。webpack文档、npm文档工具webpack@4 和 webpack-dev-server本地预览本地预览httpserver没有webpack-dev-server功能强,parcel也能本地预览但与webpack不配套,所以只能用webpack-dev-server。webpack这么多插件怎么学？重要的"不是用什么"，而是"怎么知道用什么"，要学会搜+C
2022-03-15 02:10:32
982
原创 WARNING in configuration The ‘mode‘ option has not been set
初始化webpack.config.js去除警告 文档步骤1.新建文件webpack.config.js，打开文档复制粘贴const path = require('path');module.exports = { mode: 'development' //'production'};设置main.js为开发者模式,方便自己阅读或者debug调试。如果是正在开发中可以设置为development，如果你正要发布可以设置为production。2.重新运行终端:npx w
2022-03-11 06:06:45
1289
原创 MVC(下)
MVC（下）主要内容:使用类优化代码1.引入类(class)2.引入继承(class继承class)3.初识Vue抽象思维四:事不过三同样的代码写三遍，就应该抽成一个函数同样的属性写三遍，就应该做成共用属性(原型或类)同样的原型写三遍，就应该用继承代价有的时候会造成继承层级太深，无法一下看懂代码可以通过写文档、画类图解决步骤对比MVC的app1.js 和 app2.js，属性几乎一模一样。何不把公共的属性抽成公共属性/原型，在js里公共属性就是原型。它们两个v的属性一模一样，可
2022-03-10 07:39:35
573
原创 parcel import Vue失败
1.借助parcel导入Vue安装: yarn add vue 重启: parcel src/index.html导入:import Vue from 'vue' console.log(Vue)//undefined为了测试import Vue是否成功，console后发现并不是期待的函数，改成绝对路径后成功。
2022-03-09 12:37:49
820
原创 MVC(上)
MVC(上)MVC是进入Vue/React的必经之路，MVC本来就是模糊的，你觉得MVC是什么就是什么，只要能自圆其说即可。这就是抽象，抽象就是不具体。什么是MVC?设计模式是个框，什么都能往里装，MVC是框里的一个东西。设计模式就是对通用代码取个名字而已。越抽象能解决的问题就越多。具体问题只能针对具体需求，但抽象问题能针对更多需求。mvc属于设计模式的一种，但我们并不把它称为设计模式。因为它太著名了，每个程序员都知道mvc,它就叫MVC。设计模式就是对通用代码取个名字而已。为什么要有设计
2022-03-07 11:44:48
527
原创 变量为何要初始化？
内存是在操作系统的统一管理下使用的。软件运行前需向操作系统申请存储空间，内存空闲足够时，操作系统将分配一段内存空间并将外存中的软件拷贝份存入该内存空间，并启动该软件的运行。软件运行中，该软件所占内存空间不再分配给其他软件。软件运行完毕后，操作系统将回收该内存空间(注意:操作系统并不清空该内存空间中遗留下来的数据)，以便再次分配给其他软件使用。所以，一个软件所分配到的空间中极可能存在以前其他软件使用后的残留数据，这些数据被称为垃圾数据。所以通常情况下，我们为一个变量或者数组分配好存储空间后，都要对该
2022-03-01 07:29:41
339
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人