- 博客(30)
- 收藏
- 关注
RSS订阅原创 react使用redux
安装 npm i redux// index.js 创建storeconst sotre = redux.createStore()// 订阅store的修改store.subscribe(() => { //获取仓库的值 console.log("counter:", store.getState().counter)})// actions type: 事件类型名称 参数2: const action = { type: "ADD_NUMBER", num: 5.
2022-06-03 20:49:55
269
原创 react hooks的使用
1.useState注: 只能找函数最外层调用hook，不要在循环、判断、子函数中调用useStateconst Demo = () => { // 参数：初始化值(不设置默认为undefined) const [age, setAge] = useState(10) // setAge 参数：传入一个新值或函数 // setAge执行后组件会重新渲染(重新调用Demo函数), 根据新的值返回DOM结构 // 注:引用数据类型需要做浅拷贝才会更新 functi
2022-05-16 18:56:22
296
原创 a标签下载和文件流下载
a标签直接下载在这里插入代码片a标签下载跨域解决办法 axios({ responseType: "blob", url: fileUrl, // 下载跨域的地址 }).then((res) => { const url = window.URL.createObjectURL(res.data); const link = document.createElement("a"); link .href = url; link .download = ""
2022-03-13 13:36:24
962
1
原创 vue.config.js 配置记录
有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。参考vue-cli文档点击查看const path = require.
2021-12-22 15:46:36
628
1
原创 js url拼接参数和取出参数
获取url ?后面的参数// 返回一个包含参数的对象 function getUrlParams() { var obj = {} var str = location.search.substr(1)//通过？的索引位置截取字符串 var arr = str.split('&') arr.forEach(item => { var [k, v] = item.split('=')
2021-12-09 15:06:58
516
原创 宏任务和微任务的区别
事件循环中并非只维护着一个队列，实际上是两个队列宏任务队列：ajax、setTimeout、setinterval、DOM监听、UI Rendering等微任务队列：Promise的then回调、Mutation Observe API、queueMicrotask两个队列的优先级所有同步任务都在主线程上执行，形成一个执行栈主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件一旦"执行栈"中的所有同步任务执行完毕，系统就会读
2021-11-16 10:12:51
1957
2
原创 vue 注册插件
// 引入组件import Loading from './loading.vue'import Button from './Button .vue'const components = [ Loading, Button ]// 定义 Loading 对象const myPlugin = { // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。 install(Vue){ //
2021-11-15 13:46:42
634
原创 vue组件之间通信
注册全局指令Vue.directive('focus',{ // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 bind(el, binding) { console.log('bind：',el,binding) // el触发的元素 console.log(binding.modifiers) // 修饰符 console.log(binding.value) // 属性值 console.log(binding.arg) // 属性
2021-11-02 22:27:31
479
原创 vue组件及页面的生命周期
生命周期：父组件嵌套子组件的生命周期执行顺序因为vue在解析时是逐行解析，最外层标签没有遇到闭合标签时是处于一个DOM没有完成加载的状态，所以还不能触发父组件的mounted，子组件包含于父组件中，优先完成DOM加载所以子组件的mounted会优先触发组件深入缓存组件生命周期触发的顺序// 没有缓存，动态组件的实现 <component :is="currentCpn" />// 有缓存，缓存组件的实现<div id="app"> <keep-aliv
2021-11-02 21:07:53
599
原创 vue注册全局指令
Vue.directive('focus',{ // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 bind(el, binding) { console.log('bind：',el,binding) // el触发的元素 console.log(binding.modifiers) // 修饰符 console.log(binding.value) // 属性值 console.log(binding.arg) // 属性名 i
2021-11-02 21:06:47
888
原创 React中使用css
内联样式联样式是官方推荐的一种css样式的写法：style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；并且可以引用state中的状态来设置相关的样式问题：（1）写法上都需要使用驼峰标识（2）某些样式无法编写(比如伪类/伪元素)export default class App extends PureComponent { constructor(props) { super(props); this.state = {
2021-10-18 23:09:16
1267
原创 css 动画案例
1.数字累加动画动画库地址：https://www.tweenmax.com.cn/demo/const fuwukehu = document.querySelector(".fuwukehu")function countMove(el, endScore=0, time=3, startScore=0) {// time 动画时长 const demo = { score: startScore } // 开始数值 //创建一个tween在20秒内改变score的属性值从0到10
2021-10-09 15:59:51
223
原创 css过渡和动画属性
css过渡transition：执行变换的属性 变换延续时间 变换速率 延迟时间;property(执行变换的属性): all 或指定某一个color,wdith可以同时指定多个属性，分别设置不同过渡时间transition：width 2s, height 1s linear (可以设置多个，不写的属性未默认值)transition-property: width, height;transition-duration: 500ms , 1sduration(变换
2021-09-24 16:23:58
311
2
原创 微信小程序自定义字体 获取设备信息
设置自定义字体onLaunch() { wx.loadFontFace({ global: true, // 全局使用 family: 'HappyZcool-2016', // 字体名称 source: '/static/font.TTF' // 自定义字体文件；不建议使用相对路径引入 })}获取当前设备信息onLoad() { const { statusBarHeight } = wx.getSystemInfoSync() this.se
2021-09-08 10:08:30
267
2
原创 GET请求和POST请求区别
http设定了8种发送请求的方式，这8种方法本质上没有更多区别，只是让请求更加语义化，最常用的还是get和post常见的GET请求：浏览器地址输入网址时（即浏览器请求页面时，且无法手动更改）可以请求外部资源的html标签，例如：img、a、link、script标签，且无法手动更改发送Ajax时默认GET的请求方式form表单默认使用GET请求常见的POST请求：发送Ajax时，明确指出使用POST的方式时form表单提交时明确指出使用POST的方式二者的区别：...
2021-08-15 23:49:38
262
2
转载 vue3.0新特性记录中...
拉开序幕的setup理解：Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法等等，均要配置在setup中。setup函数的两种返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。若返回一个渲染函数：则可以自定义渲染内容注意点：尽量不要与Vue2.x配置混用Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。但在se
2021-08-04 00:55:09
379
3
转载 浏览器的本地存储和缓存机制
CDN的介绍及工作原理网站通常将其所有的服务器都放在同一个地方，当用户群增加时，公司就必须在多个地理位置不同的服务器上部署内容为了缩短http请求的时间，我们应该把大量的静态资源放置的离用户近一点。内容发布网络CDN（Content DeliveryNetworks）CDN是一组分布在多个不同地理位置的web服务器，用于更加有效的向用户发布内容基本思路：尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互
2021-08-01 19:03:39
525
原创 浏览器的渲染过程及回流、重绘
浏览器渲染引擎理解：一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块…等等浏览器渲染页面的整个过程：浏览器会从上到下解析文档。遇见 HTML 标记，调用HTML解析器解析为对应的 token （一个token就是一个标签文本的序列化）并构建 DOM 树（就是一块内存，保存着tokens，建立它们之间的关系）。遇见 style/link 标记调用相应解析器处理CSS标记，并构建出CSS样式树。遇见 script 标记 调用javascr
2021-08-01 18:42:49
322
原创 React路由总结
1. 路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component2. 路由分类后端路由：理解： value是function, 用来处理客户端提交的请求。注册路由： router.get(path, function(req, res))工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由,调用路由中的函数来处理请求, 返回响应数据前端路由：浏览器端路由，value是co
2021-07-11 21:45:19
207
原创 mapv自定义图片坐标点
文档：https://github.com/huiyan-fe/mapv/blob/master/src/map/baidu-map/Layer.md<template> <div id="map" :style="{height:height}" /></template><script src="http://mapv.baidu.com/build/mapv.min.js"></script><script>imp
2021-07-08 08:57:34
1075
原创 git基本操作
DOS命令是window操作系统的例如：cls 清屏igconfig 当前电脑网络状况git的安装git config --list 检查新电脑git相关的配置通过git --version 查看git版本如果没有安装git，则去官网下载https://git-scm.com/downloads傻瓜式安装如果已经有git，通过git config --list 查看git相关的配置删除git相关配置git config --global --unset user.nameg
2021-03-31 23:51:19
615
7
原创 css中auto属性值的使用
理解前须知：width/ height的默认值为automargin的默认为0padding的默认为0border 不写属性的情况下默认为0如果border: solid 不指定大小 单边默认为2.4px，最小可设为为0.8px元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定一个元素在其父元素中，水平布局必须要满足以下的等式margin-left+border-left+padding-left+width+padding-right+border-rig
2021-03-28 11:58:49
983
3
原创 background各个属性详解
html永远不会出现滚动条如果html或body其中一个添加overflow: auto;，滚动条只会出现在document上html和body同时添加overflow: auto 属性才可以在body上出现滚动条禁用document、html、body滚动条，给最外层的元素设置滚动条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .
2021-03-26 23:14:20
939
1
原创 css新增ui方案及案例
/* 自定义字体图标, 可以被所有用户使用 */@font-face{ font-family："my-font"; //指定字体名字 src：url("字体文件路径");}div{ font-family："my-font"; }font: 字体大小(必选)/行高 字体族(必选);/* font-style: 字体风格; font-size: 字体大小; font-weight: 字体粗细; line-height: 字体行高; font-family: 字体族; *
2021-03-25 23:04:15
198
原创 css选择器的总结
css层叠样式表概念<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2021-03-25 00:13:22
150
原创 vue和vscode相关配置
vscode—>文件----> 首选项—> 用户片段----> vue.json文件复制下面代码：{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script>", "export default {",
2021-03-22 21:16:52
395
原创 echarts柱状图的配置项
安装依赖 npm install echarts --save<!-- 封装组件，创建一个容器，传入id确保每个图形的唯一性 --><template> <div :ref="`echarts-bar${id}`" style="height:388px" /></template>// 导入echartsimport * as echarts from 'echarts';export default { props: { id:
2021-03-19 14:26:42
539
原创 vuex辅助函数的使用
vuex使用store对象管理共享状态，也就是全局变量import Vue from "vue"import Vuex from "vuex"Vue.use(Vuex)const store = new Vuex.store({ state: {}, mutaions: {}, getters: {}, actions: {}, modules: {}})export default storevuex的5个属性及作用分别是：state：用来存放多个组件会用到的公共属性m
2021-03-14 22:50:18
482
原创 vue路由的配置及跳转传参
嵌套路由const routes = [ { // 一级路由全称/home path: "/home", // 只有一级路由以/开头 component: () => import("@/views/home"), // 按需加载路由 children: [ { // 二级路由全称 /home/news path: "news", // 二级路由不能再以/ 开头 component: () => import("@/views/news") } ]
2021-03-13 16:38:35
2588
2
原创 js数组常用遍历方法总结
js数组常用遍历方法总结 // item 数组元素 index 索引 arr 当前遍历的数组 let arr = ["2112","127","203","99","564"] // 1. forEach 无返回值,会改变原数组,return不会终止遍历 arr.forEach(item,index,arr) { item + 1 } console.log(arr) // ["2113","128","204","100","565"] // 2. filt
2021-03-12 21:50:03
631
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人