- 博客(25)
- 收藏
- 关注
RSS订阅原创 CSS的盒模型
CSS的盒模型分为4个部分：Margin（外边距）：在边框外的区域，外边距是透明的Border（边框）：在外边距和内边距中间的区域Padding（内边距）：在内容和边框中间的区域，内边距是透明的Content（内容）：盒子的内容盒模型图：1.w3c的标准盒模型例子：<template> <div id="app"> <div class="box"></div> </div></template><
2021-07-21 15:33:25
147
原创 vue中计算属性computed和侦听器watch
1.computed计算属性模板中可以使用简单的运算，但是太多的逻辑运算会让模板过重且难以维护如果模板不再是简单的声明式逻辑，需要进行任何复杂的逻辑操作的都应该使用计算属性例如：<template> <div id="app"> {{ message.split("").reverse().join("") }} </div></template><script>export default { name:
2021-07-21 15:29:53
143
原创 vue中v-if和v-show的区别
1.v-ifv-if是通过控制dom节点是否生成来控制元素的显示和隐藏例如：<template> <div id="app"> <div id="content" v-if="false">v-if隐藏</div> </div></template>可以看到并没有生成id为content的dom节点2.v-showv-show生成了dom节点，之后通过dom节点的内联样式display来控制元素的显示和
2021-07-07 00:02:43
249
原创 TypeScript基础类型
一、布尔——boolean只能写true或者falselet isDone: boolean = true;二、数字——number数字类型支持二进制、八进制、十进制、十六进制let binaryLiteral: number = 0b1010; // 二进制let octalLiteral: number = 0o744; // 八进制let decLiteral: number = 6; // 十进制let hexLiteral: number = 0xf00d; // 十六进制三
2020-11-26 17:35:44
132
原创 在node中搭建TypeScript开发环境
一、安装npm install -g typescript二、使用tsc编译index.ts文件let test: string = "test";tsc index.ts通过tsc编译成index.jsvar test = "test";注意：1.通过tsc默认编译成的js版本是es3版本2.编译之后会发现原来的index.ts文件报错了 是因为如果代码中没有使用模块化语句（import、export），便认为该代码是全局执行的，编译后的index.js中声明了一个变量test，所
2020-11-26 10:31:12
779
原创 react-Hook——Memo Hook的用处
一、Memo HookMemo Hook是用来减少没必要的重复渲染，从而提高执行效率二、使用例如：import React, { useState } from "react";export default function App() { const [len] = useState(10); const [num, setNum] = useState(0); const list = []; for (let i = 0; i < len; i++) { co
2020-11-09 21:41:04
606
原创 redux——redux-actions
一、为什么要使用redux-actionsredux-actions是用来简化redux中action的创建和reducer的创建二、安装npm install redux-actions --save// 或yarn add redux-actions三、使用createAction：用于简化创建一个action创建函数，createAction接收三个参数，第一个参数为action的type值，第二个参数为一个函数，函数的返回值为payload的值，第三个参数为附带的信息之前acti
2020-11-02 21:15:35
645
原创 redux——redux-saga常用指令
一、安装二、使用三、为什么要使用reudx-saga?在解决redux副作用的中间件中，redux-thunk、redux-promise虽然也能解决问题，但是它们会导致action和action创建函数不再纯净，因为他们改动了action，而redux-saga就是为了解决这个问题，他保持了action和action创建函数的纯净...
2020-10-30 01:14:59
546
原创 ES6中的生成器和迭代器以及可迭代协议理解
一、迭代器和可迭代协议1.迭代：每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。2.js中的迭代器：如果一个对象具有next方法，且该方法会返回一个具有以下两个属性的对象，那么称这个对象为一个迭代器value：传给下一次迭代的值done：boolean类型，判断当前是否迭代完成，如果为true表示迭代完成一个简单的迭代器：const iterator = { total: 3, now: 1, next()
2020-10-27 22:19:48
207
原创 redux副作用处理——redux-promise
一、安装npm install --save redux-promise// 或yarn add redux-promise二、使用import { createStore, applyMiddleware } from "redux";import * as loginActions from "./action/login";import reducer from "./reducer";import logger from "redux-logger";import promise
2020-10-26 18:00:51
706
原创 redux副作用处理——redux-thunk
一、安装yarn add redux-thunk// 或npm install --save redux-thunk二、使用import { createStore, applyMiddleware } from "redux";import * as loginActions from "./action/login";import reducer from "./reducer";import logger from "redux-logger";import thunk from
2020-10-25 17:32:46
663
原创 redux日志记录——redux-logger
一、安装npm i --save redux-logger// 或yarn add redux-logger二、使用import { createStore, applyMiddleware } from "redux";import reducer from "./reducer";import logger from "redux-logger";import * as loginActions from "./action/login";// 创建仓库const store =
2020-10-25 16:02:47
3339
原创 Redux中间件和applyMiddleware
一、Redux中间件是什么：中间件是在不影响原本功能，且不改变原本代码的基础上，对仓库store中的dispatch方法进行功能加强二、Redux中间件原理：原理：更改仓库中的dispatch函数例如：在分发action的时候打印出仓库原状态和仓库新状态// 创建仓库const store = createStore(reducer);// 保存原始的dispatch函数const oldDispatch = store.dispatch;// 修改dispatch函数store.d
2020-10-23 22:16:30
224
原创 redux——combineReducers原理
import ActionTypes from './utils/actionTypes'import warning from './utils/warning'import isPlainObject from './utils/isPlainObject'function getUndefinedStateErrorMessage(key, action) { const actionType = action && action.type const actionDe
2020-10-21 10:08:53
192
原创 redux——boundActionCreators原理
一、boundActionCreatorsboundActionCreators接收两个参数：1.actionCreators：可以是一个包含action创建函数的对象或者一个action函数，如果是一个action创建函数直接返回一个dispatch分发函数2.dispatch：仓库的dispatch函数二、源码：// 通过这个函数返回一个dispatch分发函数function bindActionCreator(actionCreator, dispatch) { return fun
2020-10-20 14:26:04
323
原创 redux——createStore原理
一.createStore的接收值和返回值1.createStore接收3个值：1.reducer2.preloadedState：仓库的初始状态3.enhancerexport default function createStore(reducer, preloadedState, enhancer) { let currentReducer = reducer // 仓库的reducer let currentState = preloadedState // 仓库当前的状态 let
2020-10-20 01:59:10
657
原创 react中使用redux
1.安装yarn add redux2.使用一、redux的reducerreducer就是一个普通函数，通过接收到的二个参数action和state计算得到新的状态state然后返回1.一个数据仓库有且只有一个reducer2.reducer必须是一个没有副作用的纯函数/** * * @param {*} state 之前仓库中的状态（数据） * @param {*} action 描述要做什么的对象 */function reducer(state, action) { s
2020-10-18 16:51:50
116
原创 git上传后有子文件打不开
目录git上传后有文件打不开删除.git文件删除已经上传的文件重新添加上传git上传后有文件打不开因为该子文件原本也是一个git仓库，可能导致git将其当成一个子模块删除.git文件在子文件中删除.git文件删除已经上传的文件git rm --cached 子文件夹路径重新添加上传git add 子文件夹路径/后面要加上/，这样git才会将其当成一个子模块之后再次commit和push...
2020-08-17 01:57:58
1918
1
原创 vue中使用Font Awesome
vue中使用Font Awesome下载引入使用下载npm install font-awesome引入在main.js中引入import "font-awesome/css/font-awesome.min.css";使用<span class="icon"></span>css中引入字体.icon { font-family: FontAwesome;}...
2020-06-12 16:05:26
425
原创 promise是同步还是异步的？
1.promise本身是同步的let oP = new Promise( (res, rej) => { console.log(1);});console.log(2);执行的结果先打印出1再打印出2，如果promise是异步的应该先打印出2，所以promise本身是同步2.promise的回调then是异步的let oP = new Promise( (res,......
2019-10-21 00:15:07
21156
7
原创 css的前缀和浏览器的内核
浏览器的内核：IE——tridentOpera——Blink（presto已废弃）chrome——Blink（之前是webkit）Firefox——GeckoSafari——webkit因为有自己的内核所以也叫主流浏览器css为了兼容各个主流浏览器，有一些浏览器特有的属性需要加上前缀，否则识别不了IE—— -ms-Opera—— -o-Chrome和Safari—— -webk...
2019-08-07 19:03:00
471
原创 HTML文件开头的!DOCTYPE是干什么的？
!DOCTYPE html!DOCTYPE必须位于文档的第一行，在html标签之前，声明了不是html的标签，同时告诉浏览器应该使用哪种规范解析页面，浏览器才能正确的显示内容，如果没有写或者格式错误，浏览器就会使用兼容模式。...
2019-08-07 18:28:16
716
原创 Vue如何设置网站的小图标favicon
把需要设置的icon放到static文件夹中然后在index.html中引入<link rel="icon" href="./static/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" />然后...
2019-08-02 20:39:37
1298
原创 vue中axios提示not defined
axios在main.js中引入import axios from 'axios';会提示not defined可以把axios挂载到全局中在main.js中Vue.prototype.myAjax = axios;之后通过this.myAjax({ })就能直接使用...
2019-06-10 18:06:26
3496
原创 gulp.watch只自动刷新一次问题
gulp.task("watch", function () { gulp.watch("html/*", gulp.series("html")) gulp.watch("css/*", gulp.series("css")) gulp.watch("js/*", gulp.series("js")) })...
2019-05-10 16:39:05
853
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人