- 博客(55)
- 收藏
- 关注
RSS订阅
原创 个人总结数组常见API
1:数组转换成字符串 join('') let arr = [1, 2, 3, 4, 5, 6, 10] //数组的方法1:join('分隔符') 把数组变成字符串通过分隔符链接 console.log(arr.join(''));// '12345610'2:添加数组元素的方法 末尾添加push() ,末尾删除pop(),头部添加unshift(),头部删除shift() //数组的方法1:push()尾部天机数组元素 .
2021-09-29 21:46:47
215
原创 vuex小结
vuex内部数据流程图vuex与组件之间数据交互效果图在全局中使用state//场景1)在模板中使用{{$store.state.list}}//使用modules中的属性{{$store.state.模块名.数据项名}}//场景2)在计算属性中使用computed:{this.$store.state.list//使用map...mapState(['list'])...mapState({'自定义名称':'list'})//使用modules中的stat..
2021-09-28 20:15:24
123
原创 ant 组件中如何主动触发校验
问题: 想在某个动作之后单独触发某一个表单的验证const chooseUser = () => { //执行一个函数之后 单独校验某个绑定的规则 formRef.value.validateFields(['schemeUserInfo'])};formRef为表单绑定的 :model="formState"schemeUserInfo 为某一个表单的name <a-form-item label="策划人" class="da...
2022-01-07 15:41:39
2156
原创 快速入门typescript语法2
1. 对象类型-单独使用const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 } const 对象名: { 属性名1：类型1， 属性名2：类型2} = { 属性名1: 值1，属性名2：值2 }const goodItem:{name: string, price: number, func: ()=>string } = { name: '手机', price: 2000, func:function(){ r.
2021-11-24 17:44:54
377
原创 快速入门typescript语法1
1. TypeScript 是什么?TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。2. 为什么要为 JS 添加类型支持?JS 的类型系统是弱类型的，没有类型的概念,在写比较大的项目时,经常会遇到类型错误问题,但是写代码时.js不会提示你,只有运行时才会报错,严重影响开发效率TS属于静态类型的编程语言 它要先编译，再执行。不能直接执行，需要编译成js才能执行,它...
2021-11-24 16:42:25
682
原创 typescript中 tsconfig.json常用配置项的含义
1.空对象表示该目录下的所有ts文件需要被编译{//表示该目录下的所有ts文件需要被编译}2.include(使用较多)"include" 用来指定那些ts文件需要被编译 路径: ** 表示任意目录 * 表示任意文件{"include":[ "./src/**/*"]}3.exclude"exclude": 表示排除哪些文件不需要编译表示排除src目录下tss文...
2021-11-23 18:57:30
845
原创 图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示我们希望有一种降级处理的方式，可以在图片加载失败后显示一张我们预先设定好的默认图片1.监听图片的 error 事件由于图片加载失败后，会抛出一个 error 事件，我们可以通过监听 error 事件的方式来对图片进行降级处理let IMG = document.getElementById('IMG');IMG.addEventListener('error',function(e){
2021-11-21 20:50:24
1534
原创 React路由的使用
在React中路由的使用和vue-router非常相似1. 先下包react-router-dom@5.3.0 可以自己用npm yarncnpm 进行下载,我使用的是5.3.0版本2. 导入并使用import { HashRouter as Router , Route, Link } from 'react-router-dom'export default function App () { return ( <div> ...
2021-11-17 19:30:28
445
原创 react中怎么实现通过hash值跳转不同的页面
前置条件先知道什么什么是hash模式 和hash值hash值： localhost:3000/#/page#之后的部分就是hash值，它有两个特点： hash值的变化(地址栏中改了hash值再回车)不会重新发请求。它不是请求路径的一部分。 hash值的变化会触发hashChange事件。 如何获取到哈希值的变化呢?我们可以模拟一下window.addEventListener('hashchange', onChange)在window 注册一个hashch...
2021-11-17 19:07:25
1113
原创 eslint配置项(react项目)-eslint报错
这是我自用的配置项,有需要的可以按需复制1.当前根路径下 .vscode setting.json文件配置{ "eslint.run": "onType", "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx"] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 编辑器设置 - ...
2021-11-17 18:34:21
1483
原创 react 中如何自定义hooks
首相要知道自定义hooks的目的是什么,区别于自定义组件自定义hooks最大的好处就是可以 逻辑复用1. 自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks2. Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！3.自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样）下面这是一个自定义倒计时的 hooks① 首先定义一.
2021-11-15 20:05:55
5264
原创 react中redux的使用
Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。类似于vuex但Redux并不只为react应用提供状态管理， 它还支持其它的框架。使用前,最好先建一个store文件夹,来管理Redux中的状态注意: redux可以无视组件层级,对于组件系统来说，redux就是一个第三方的，全局的变量友情提醒! 一般项目中都是redux和 react-redux 来搭配使用的,这两者是不同的包,这里我们就直接来说说react-redux的使用流程...
2021-11-15 19:46:53
1265
原创 react中副作用函数(useEffect)详解
先简单说一下常见的useEffect使用方式 三种useEffect(() => { // 副作用函数的内容}) 每次更新之后都要执行--------------------useEffect(() => { // 副作用函数的内容}, []) 初始化页面时 只执行第一次--------------------useEffect(() => { // 副作用函数的内容}, [依赖项]) //依赖项可以有多个1 初始执行一次 2 每次依赖项的值变化时
2021-11-12 20:58:07
7556
原创 vue中的单向数据流的概念
数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。这实际上是为了更好的解耦。在开发中可能有多个子组件依赖于父组件的某个数据，万一子组件真的可以直接修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化可以看看下面的图示...
2021-11-10 16:46:50
302
原创 vue怎么实现动画效果
动画第一步把要做动画的语句添加到transition中，其中name可以定义前缀，下面的事件在添加动画时就可以写my-enter,my-leave-to，从而可以设置不同区域具有不同的动画效果。<transition name="fade"> <div v-show="show"></div></transition>-----------------------------------.fade-enter-active,....
2021-11-10 00:36:19
1467
原创 Vue.js 中的 template 是如何编译的
1. 首先第一步实例化一个vue项目2. 模板编译是在vue生命周期的mount阶段进行的3.通过compile编译器把template编译成AST语法树, AST在内部经过一些转化得到render函数，render的返回值是Vnode, VNode是Vue的虚拟DOM节点,...
2021-11-10 00:28:45
896
原创 Vue-Router 配置路由的步骤
Vue-Router是vue官方发布的,与vue高度集成的一款路由管理器,有以下基本步骤1, npm安装npm install --save Vue-Router2, 引用import VueRouter from 'Vue-Router'3, 配置路由文件先new一个VueRouter实例,在实例里面配置跳转规则,并注入(挂载)到Vue中4,在视图加载的位置 使用<router-view></router-view>5,跳转路...
2021-11-08 08:51:58
463
原创 路由之间跳转的方式
路由之间的跳转常用的有4种方式1、<router-link to="需要跳转的路径">2、this.$router.push()跳转到指定的 url，并在 history 中添加记录，点击回 退返回到上一个页面3、this.$router.replace()跳转到指定的 url，但是 history 中不会添加记录， 点击回退到上上个页面4、this.$touter.go(n)向前或者后跳转 n 个页面，n 可以是正数也可以是负数...
2021-11-08 08:42:38
2460
原创 Vue 中 key 值的作用
Vue 中 key的作用主要是为了高效的更新虚拟DOM当使用v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素...
2021-11-07 14:08:32
176
原创 Vue 的计算属性详解
vue中的计算属性 computed 一种对数据进行复杂处理的方式,使得数据处 理结构清晰有下面一些好处:1、 依赖于数据，数据更新，处理结果自动更新；2、 计算属性内部 this 指向 vm 实例；3、 在 template 调用时，直接写计算属性名即可；4、 常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据；5、 相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算
2021-11-07 14:02:02
393
原创 Vue 常用的修饰符都有哪些
v-model修饰符v-model.修饰符="vue数据变量" v-model.number 以parseFloat转成数字类型 v-model.trim 去除首尾空白字符 v-model.lazy 在change时触发而非inupt时 v-on修饰符@click.stop - 阻止事件冒泡@click.prevent - 阻止默认行为@click.once - 程序运行期间, 只触发一次事件处理函数.@click.native在组件内使用,如果组件没有事.
2021-11-06 19:18:12
433
原创 跟 keep-alive 有关的生命周期
在开发 Vue 项目中,大部分组件是没必要多次渲染的,所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态，避免重新渲染生命周期函数：在被 keep-alive 包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。1、activated 钩子：在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。2、deactivated 钩子：组件被停用（离开路由）时调用。使用 keep-alive 就不会调用 beforeDestroy
2021-11-06 19:11:31
427
原创 vue数据双向绑定的原理以及Object.defineProperty 和 Proxy 的区别
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。第一步:对observe 的数据对象进行递归遍历，把所有的子属性对象都加上 setter 和 getter属性,这样当给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据的变化第二步:compile 解析模板指令，将模板中的变量替换成...
2021-11-05 21:59:36
275
原创 react脚手架中引入eslint和prettier-now
1.如何在react脚手架中配置eslint①在项目中安装eslintnpm i eslint -D②用eslint的init命令创建eslint配置文件在项目根目录，运行npx eslint --init按交互提示安装相关插件:如果选择了typescript则需要先下载typescript包③设置vscode的自动保存格式化在项目根目录下，补充配置文件：.vscode\settings.json{ "eslint.run": "onType", "esli
2021-11-05 18:41:02
330
原创 React脚手架的创建流程和基础使用(1)
1.创建react脚手架 npx create-react-app demo2.根据提示启动项目,想cd到目录文件app-demo里面启动项目有npm start 和yarn start 都可以 类似于vue中的yarn serve3.基本使用过程在src目录下index.js中导入react,reactDom适用与web应用然后进行使用,先创建一个元素,在渲染到一个dom节点上4.写法繁琐,所以我们都使用另一种写法jsx注意点:创建的...
2021-11-04 23:26:14
92
原创 关于搜索栏双向绑定出错问题
我们一帮都会给搜索栏进行双向数据绑定,然后点击搜索之后,把表单的数据,当做参数发起请求,但是这样会出现一种情况:当我们在搜索栏输入了内容,但是没有点击搜索,这个时候切换当前的分页,就会出现默认搜索当前的值的情况,解决方案:,表单绑定的值和发送的请求,使用不一样的参数当点击了搜索按钮,把表单的值赋值给API,如果没有点击搜索,则不会携带表单的数据 this.API = { ...this.fromData } this.API.chkState = ...
2021-11-02 16:17:13
261
原创 项目错误点,难点总结
1.当vue项目中出现,只想显示单选框或者复选框,而不想被点击时可以在el-checkbox-group上绑定:value属性,这个时候就是单向显示了 <el-checkbox-group :value="checkedCities"> <div v-for="city in list.options" :key="city.id"> <el-checkbox :label="city.code">{{ city.title }.
2021-10-31 20:54:33
122
原创 vue项目打包上线
vue项目打包之后会得到dist目录 该目录下有三个文件,是上传到服务器所需的如果希望可以双击打开index.html，则需要提前在vue.config.js中配置{ publicPath: './'}打包优化-路由懒加载{ path: '/login', component: () => import('@/views/login/index'), hidden: true },一个路由对一个组件，表示一个页面。懒加载...
2021-10-29 19:47:05
3707
原创 es6新语法之扩展运算符的使用
目录扩展运算符的应用1. 合并数组2. 拷贝数组3. 将伪数组转换为数组4.与解构赋值结合6.Map 和 Set 结构，Generator 函数基础语法var array = [1,2,3,4];console.log(...array);//1 2 3 4var str = "String";console.log(...str);//S t r i n g该运算符主要用于函数调用function push(array, ...items) { ...
2021-10-29 01:11:47
234
原创 权限控制RBAC小结
背景:为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。 权限控制一般分为页面级和按钮级别的,页面级一般指路由级别,按钮级一般指特定的按钮权限不够的人员看不到实现原理是,给不同的员工分配不同的角色,而每个角色控制着不一样的权限点1.刷新页面时的bug修复(1)如果我们刷新浏览器，会发现跳到了404页面(2)对于add...
2021-10-27 18:11:01
308
原创 关于树状结构,表单校验
添加编辑部门遵循,同级部门名称不能重复,所有部门标识不能重复先看下前置代码接下来就是表单校验的部分需要注意:点击添加的时候,把当前元素的id赋值给了表单的pid,而点击编辑的时候,是直接把当前整个编辑的对象,赋值给了表单,这个时候的id和pid都是元素本身的pid和id,1.校验权限标识,校验规则是所有权限标识不能重复,编辑自身时,可以使用自身的权限标识const validCode = (rule, value, callback) => {const ...
2021-10-26 22:36:45
653
原创 错误:关于Invalid prop: type check failed for prop “model“. Expected Object, got Array found in 报错
1:
2021-10-25 21:33:33
3546
1
原创 js中把excel文件中的日期格式的内容转回成标准时间
// 把excel文件中的日期格式的内容转回成标准时间// https://blog.youkuaiyun.com/qq_15054679/article/details/107712966export function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000.
2021-10-25 10:30:22
464
2
原创 JavaScript中的逗号操作符(基础使用和拓展用法)
一、逗号操作符的基础用法逗号操作符可以用来在一条语句中执行多个操作，如下所示：在一条语句中同时声明多个变量是逗号操作符最常用的场景。不过，也可以使用逗号操作符来辅助赋值。在赋值时使用逗号操作符分隔值，最终会返回表达式中最后一个值：在这个例子中，num 将被赋值为 2，因为 2 是表达式中最后一项。逗号操作符的这种使用场景并不 多见，但这种行为的确存在。二、逗号操作符的拓展用法逗号操作符还有很多意想不到的操作,例如可以使我们的代码最大程度的进行简写,如下所示：le..
2021-10-24 15:53:47
2539
原创 公共组件的使用(use)
use,是它是Vue提供一个静态方法,用来向Vue注册插件,增强vue的功能1.格式Vue.use(com)这个com就是一个导入的对象,使用这个方法有一个必要条件,就是com里面必须提供一个install 函数,这个函数必须有一个参数,而这个参数就是Vue默认进去的,import PageTools from './PageTools/index.vue'export default { install(Vue) { Vue.component('PageTools', .
2021-10-23 21:35:57
361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人