- 博客(30)
- 收藏
- 关注
RSS订阅
1原创 JSBRIDGE 使用
1.新建一个文件// import Vue from 'vue';export const setupWebViewJavascriptBridge = callback => { var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (!isiOS) { if (window.WebViewJavascriptBridge) {
2022-03-09 11:54:20
1219
原创 HOOKS + TS
useStateuseState如果初始值不是null/undefined的话，是具备类型推导能力的，根据传入的初始值推断出类型；初始值是 null/undefined的话则需要传递类型定义才能进行约束。一般情况下，还是推荐传入类型（通过useState的第一个泛型参数）。// 这里ts可以推断 value的类型并且能对setValue函数调用进行约束const [value, setValue] = useState(0);interface MyObject { foo: string;
2022-02-23 16:21:58
904
原创 VUEX的使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。从新建到使用过程建立文件结构MODULES中文件的结构xxxx.js部分代码：export default { namespaced: true, // 命名空间，由于多个vuex区别 state: { // 初始化数据 count: 5, todos: [ { id: 1, tex
2022-02-23 11:31:47
1000
原创 HOOKS使用redux及部分方法
创建redux基本步骤1.新建action-type.js文件（操作类型）基本结构如下：export const xxx = 'xxxx'2.新建reducer.js文件主要是结构：const xxxx = (state,action) => {switch (action.type) { case xxx: //操作 break }}创建store ，多个reduce人可以合并使用基本用法：combineReducers：用于合并多个reducer；
2022-02-22 16:36:50
1272
原创 通过url下载文件
1.通过接口请求文件，返回类型是blob类型this.$axios .get( url, { responseType: 'blob', } // 服务器上pdf路径 ) .then((res) => { console.log(typeof res, res) const a = docume
2021-12-03 14:06:19
174
原创 vue + webpack 搭建项目
1.npm init -y 初始化npm ，然后安装webpack-cli（npm install webpack webpack-cli --save-dev 命令），安装webpack webpack-dev-server（npm install webpack webpack-dev-server --save-dev）2.创建项目目录创建src根目录(内部文件夹根据项目需求创建)，public文件夹（用于存放index.html 和 favicon.ico）...
2021-11-22 14:18:21
689
转载 axios中断pending请求
<template> <div class="page" id="app"> <button @click="getMsg" class="get-msg">获取数据</button> <button @click="cancelGetMsg" class="cancel">取消获取</button> <ul> <li v-for="item in items">{{item
2021-09-07 16:56:26
762
原创 react事件监听和触发（针对跨页面和跨级等等）
events.js文件/* * @Descripttion: * @version: * @Author: sueRimn * @Date: 2021-08-30 14:40:39 * @LastEditors: sueRimn * @LastEditTime: 2021-08-30 15:07:21 */function evtBus() { const listeners = {}; // 保存已经注册的事件 const isFunction = (fn) => fn
2021-08-30 15:19:49
1602
原创 React性能优化
React性能优化memo： 包装组件useMemo ：包装传参（除函数）useCallback：包装函数传递一、 组件的优化（没有任何传值，单纯的调用）例：import React, { useState } from 'react'import Child from './child'export default function Parent(props: any) { const [num, setNum] = useState(0) const handleClick = ()
2021-08-25 16:52:10
62
原创 React 样式污染
引用moudles.css 处理样式的污染。命名文件 xxx.moudles.css 也可以使用scss或者less ：例如 :注： 避免一个文件有相同的class名称，只生效一个（最后一个覆盖之前所有的）在js导入引用import styles from './home.modules.scss'export default function Home(props) { const {children} = {...props} console.log(styles,'style')
2021-08-25 16:49:58
662
原创 Git命令
拉取代码：直接clone master分支的代码git clone <项目仓的地址>当需要clone 指定分支代码时git clone -b <指定分支> <项目仓的地址>提交：git statusgit add .git commit -m"提交内容"git pull --rebasegit push 或者 git push origin <分支>tag ：tag的作用可以查看回溯到整个完整提交阶段，如果需要查看某个版本的完
2021-08-25 16:47:53
74
原创 React useContext和useReducer结合使用
父组件代码：import React, { useEffect, useReducer } from 'react'export const sateContext = React.createContext() // 创建并导出context export default function Home (props) { const [ state, dispatch ] = useReducer(stateReducer,0) // 创建reducer function stateRe
2021-08-24 14:58:45
320
原创 React性能优化
React性能优化memo： 包装组件useMemo ：包装传参（除函数）useCallback：包装函数传递一、 组件的优化（没有任何传值，单纯的调用）例：import React, { useState } from 'react'import Child from './child'export default function Parent(props: any) { const [num, setNum] = useState(0) const handleClick = ()
2021-08-24 11:42:20
53
原创 react 全局挂载组件
在index.js 文件中导入react需要挂载的组件import message from 'antd'// 全局挂载组件React.$message = function (arg) {// 默认部分参数 const { type = 'success', content, duration = 1, onclose } = { ...arg } message[type](content, duration, onclose)}在其他js文件调用api组件import Re
2021-08-24 10:16:19
4160
原创 git使用
整理常用的git指令拉代码直接clone master分支的代码git clone <项目仓的地址>当需要clone 指定分支代码时git clone -b <指定分支> <项目仓的地址>提交git statusgit add .git commit -m"提交内容"git pull --rebasegit push 或者 git push origin <分支>tagtag的作用可以查看回溯到整个完整提交阶段，如果需要查看某个
2021-08-20 09:07:11
69
原创 react router封装
import Login from '../component/login/index'import Index from '../component/index/index'import Props from '../component/props/index...
2021-08-19 10:14:21
509
转载 2021-08-11
package.json 文件详解 前言一、package.json 文件作用二、package.json 文件创建三、package.json 文件示例四、package.json 文件配置说明 前言 随着前端由多页面到单页面，由零散的文件到模块化开发，在一个完整的项目中，package.json 文件无处不在。首先...
2021-08-11 16:09:24
37
原创 2021-08-06
插槽向父组件传值子组件：<template> <div> <slot name="test" :te='text' :te1='text1'></slot> </div></template> <script>export default { props: [ 'text', 'text1' ], data () { return {} },}</s
2021-08-06 10:53:30
42
原创 vue事件总线
在插件中定义事件总线jsfunction evtBus() { const listeners = {}; // 保存已经注册的事件 const isFunction = (fn) => fn && Object.prototype.toString.call(fn) === '[object Function]'; const isString = (str) => str && (typeof str === 'string' || Ob
2021-08-03 14:49:54
84
原创 vue 封装 使用api 调用组件
首先实现一个vue组件模板<!--hello.vue--><template> <div>{{text}}</div></template><script>export default { name: 'hello', data () { return { text: '' } }}</script></script>封装api新建一个js文件
2021-08-02 11:59:32
567
原创 call() ,bind(), applay()调用
call,bind,applay都是更改this指向的call的使用： call在使用时直接是obj.call(this,'arg1','arg2') 不用使用“（）”调用call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：...
2021-07-19 10:52:34
292
转载 vue render 函数
前几天想学学Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识，我们有必要重温一下Vue中的一些基本概念。那么先上一张图，这张图从宏观上展现
2021-07-15 10:54:58
150
原创 render函数的基本使用
第一个参数：{String | Object | Function}第一个参数对于createElement而言是一个必须的参数，这个参数可以是字符串string、是一个对象object，也可以是一个函数function。接着把上例中的String换成一个Object，比如：除此之外，还可以传一个Function，比如第二个参数:{Object}createElement是一个可选参数，这个参数是一个Object。来看一个小示例：包括事件也可以第三个参数：{String | Array}
2021-04-29 11:13:53
479
原创 vue实现文件下载
vue项目中实现文件下载功能 </h1> <div class="clear"></div> <div class="postBody"> <div id="cnblogs_post_body" class="blogpost-body blogpost-body-html">功能：点击导出按钮，提交请求，下载excel文件；修改a...
2021-04-23 15:32:56
157
原创 vue项目中实现生成二维码
功能：点击导出按钮，提交请求，下载excel文件；修改axios请求的responseType为blob，以post请求为例： 1 this.$axios({ 2 method: 'post', 3 url: '/api/market/exportEmployee.do', 4 // headers里面设置token 5 header.
2021-04-23 14:33:32
255
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人