cbyr-CSDN博客

原创 vscode用户区配置

{ "liveServer.settings.donotShowInfoMsg": true, "editor.fontFamily": "Consolas, 'Courier New', monospace", "emmet.variables": { "lang": "zh-CN" }, // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnType": false, ".

2021-12-08 13:49:26 568

原创 vue常见面试题

一，什么是数据双向绑定？双向绑定：数据->视图，视图->数据。从数据到视图。当数据变化时，视图也跟着变化。原理：利用数据劫持结合订阅者发布者模式，通过objeck.defineproperty中的set和get方法（作用：拦截器）set方法设置数据时触发，get是访问时触发监听。在数据变动时发布消息给订阅者（v-model、v-bind绑定的那个属性），触发相应的监听回调。对比数据变动前后的虚拟DOM，计算出那些地方需要更新，只更新需要更新的地方。二...

2021-12-01 21:06:38 597

原创 TypeScript浅谈

一，TypeScript 介绍 TypeScript简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 // TypeScript 代码有明确的数据类型let age1: number = 18// .

2021-11-24 16:50:09 713 1

原创 Vue数据双向绑定

一，什么是双向绑定双向：数据 - > 视图、视图 - > 数据；绑定：v-model、v-bind . . .从数据到视图。当数据变化时，视图也跟着变化。从视图到数据。当input框中的内容变化时，数据也跟着变化。二，原理：利用数据劫持结合订阅者发布者模式，通过objeck.defineproperty中的set和get方法（作用：拦截器），在数据变动时发布消息给订阅者（v-model、v-bind绑定的那个属性），触发相应的监听回...

2021-11-21 19:39:29 583

原创 React中传值props校验

一，为什么要做校验类型校验的必要性：对于子组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，有了类型校验，我们的程序就更加健壮了。如果不校验会有什么问题 ? 简单来说就是报错！！在Vue中我们也用到了校验：二，props校验-基本使用，在react中我们有两种方法解决此类报错：1，第一种快速修复：第二种方案：步骤：导入 prop-types 包。这个包在脚手架创建项目时就自带了，无须额外安装 import...

2021-11-21 18:37:49 585

原创配置eslint，Vscode工作区需要的配置

省事解决方案：（react、vue通用）{ "eslint.run": "onType", "eslint.options": { "extensions": [ ".js", ".vue", ".jsx", ".tsx" ] }, "editor.codeActionsOnSave": { "source.fixAll.esl

2021-11-18 20:56:18 796

原创 React编程式导航

问题导入场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？页面跳转有两类方式：用户点击链接跳转写代码跳转-编程式导航实例：import React from 'react'import ReactDom from 'react-dom'import { useHistory } from 'react-router'import './04.css'import { BrowserRouter as Router, Route, N

2021-11-17 21:41:45 134

原创 React - router - dom 详解

React 路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。 React路由和Vue路由其实没有区别。前端路由是一套映射规则，在React中，是 URL路径与组件的对应关系使用 React 路由简单来说就是：配置路径和组件（配对）...

2021-11-17 21:31:03 28088 5

原创前端单页面（SPA）和多页面（MPA）

了解单页面和多页面应用程序1，单页面和多页面SPA：( Single Page Application ) 单页面应用程序，例如：后台管理系统，整个应用中只有一个页面（index.html） MPA : ( Multiple Page Application )多页面应用程序，例如：门户网站，整个应用中有很多个页面（*.html）单页面优点：1. 加快页面响应速度，降低了对服务器的压力传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面...

2021-11-17 21:24:28 1540

原创在vscode中创建代码片段

创建代码片段：左下角设置中点击用户代码片段在代码片段主体 body 内写入你想要的，每行代码用逗号隔开效果：删除代码片段：找到对应的路径，删除文件即可...

2021-11-13 15:29:35 389

原创浅谈React中的Hooks

一，Hooks是什么？在React中函数组件是没有React state 、生命周期这些功能的。在React16.8之前的模式是 class 组件(提供状态) + 函数组件(展示内容) ；React16.8之后，React提供了Hooks钩子函数，它使函数组件提供了状态、生命周期等原本在Class 组件中才提供的功能。 Hooks带来的好处：函数本身比较简单，提供了Hooks的函数组件可以更好的胜任根据状态来渲染UI这件事 hooks让函数组件内部有...

2021-11-12 20:05:37 1312

原创 React组件通信

通信方式：父子组件之间兄弟组件之间（变量提升）跨组件层级 1，父子通讯父组件通过自定义属性传递，子组件通过props接收：父组件：<子组件标签自定义属性1={值1} 自定义属性2={值2} .... /> 子组件-函数式组件-接收数据 // 接收数据：函数组件需要通过补充形参来获取function 子组件(props) { console.log('从父组件中传入的自定义属性被收集在对象:...

2021-11-11 19:49:25 838

原创 React事件中this指向的问题

一，绑定事件时this的指向import { Component } from 'react'import ReactDOM from 'react-dom'class This extends Component { state = { msg: 'hello react' } handleClick () { console.log(this) // 这里的this是？答案：此时this指向undefined } render () {

2021-11-08 21:08:11 371

原创 v-loalder是什么？

一，是什么：他就是基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取。二，用途：vue-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块；module.exports出一个vue.js组件对象；1：< ...

2021-11-08 20:35:26 435

原创你是怎么认识Vuex的？

一，Vuex是什么？Vuex 可以理解为是一种开发模式或框架，通过状态(数据源)集中管理驱动组件的变化。Vuex的核心也就是store，可以把它含着你应用中的大部分状态（state）理解为是一个容器，里面包Vuex有两个特点：Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，如果store 中的状态发生改变，那么相对应的组件也会获得更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit...

2021-11-08 20:20:57 985

原创 vue2中自定义过滤器

vue2中允许自定义过滤器，多用于文本格式化，主要使用在插值表达式和v-bind表达式。它有两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。基础类似于自定义指令，可以用全局方法Vue.filter()注册一个自定义过滤器，它接收两个参数：过滤器 ID和过滤器函数。过滤器函数以值为参数，返回转换后的值：<template>  <span v-tex...

2021-11-07 15:30:10 205

原创 vue中计算属性

一，计算属性干什么用的在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。好处：依赖于数据，数据更新，处理结果自动更新；计算属性内部 this 指向 vm 实例；在 template 调用时，直接写计算属性名即可；常用的是 getter 方法，获取数据，也可以使用 set 方...

2021-11-07 11:50:14 132

原创 vue中key的作用

一、Key是什么，我们都知道vue中在v-for的作用是对数据进行循环渲染，那么key在其中起到什么作用呢？如果不加key发什么？简单来说报错根据vue官方介绍：key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点背后的逻辑当我们在使用v-for时，需要给单元加上key如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的eleme...

2021-11-07 11:22:48 471

原创 React 组件介绍

一，组件化：组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。特点：独立可复用可组合组件类型：基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框区块组件：由基础组件组件和业务组件组合成的UI块页面组件：展示给用户的最终页面，一般就是对应一个路由规则二，函数组件与 class 组件 1，什么是函数组...

2021-11-06 22:38:33 171

原创十种常用代码编辑器

1.vs code 微软推出的轻量级代码编译器,是本人使用最多的编译器(主要是好玩的插件多),支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。分享下本人的死宅背景~2. NETBEANS NetBeans是Sun公司（2009年被甲骨文收购）在2000年创立的开放源代码供开发人员和客户社区的家园，旨在构建世界级的Java IDE。NetBeans当前可以在Solaris、Win

2021-11-06 19:37:20 11155 1

原创 git 命令大全

git init # 初始化本地git仓库（创建新仓库）git config --global user.name "xxx" # 配置用户名git config --global user.email "[email protected]" # 配置邮件git config --global color.ui true ..

2021-11-05 19:46:44 100

原创 React介绍

创建方式一：1. 先全局安装脚手架工具包命令：npmi-gcreate-react-app2. 用脚手架工具来创建项目命令：create-react-app+脚手架的名称创建方式二：直接使用npx来创建项目命令：npxcreate-react-app+脚手架的名称环境配置-关于eslint在React中的使用步骤：1. npm i eslint -D （如果要使用typescript ，同时下载typescript依赖包）...

2021-11-05 19:32:00 573

原创 v-if和v-show的区别

一.v-show与v-if的共同点在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。当表达式都为 false 时，都不会占据页面位置当表达式结果为 true 时，都会占据页面的位置二、v-show与v-if的区别控制手段不同编译过程不同编译条件不同控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除...

2021-11-05 18:30:17 30789 2

原创关于请求返回的数据选择框排序出错解决办法

问题阐述：因为服务器返回的数据排序混乱，导致请求回来的数据选框字母的排序错乱。解决方案：封装一个函数对数据进行处理。数组中sort（）可以对数字、字母进行排序。export const loadSort = (arr) => { // 定义一个空数组 let newArray = [] // 遍历拿到的数组 arr.forEach((item) => { console.log(item)...

2021-11-03 14:10:41 220

原创 css常问面试题

1. 如何选中多个相同标签中内容为空的标签 CSS3 :empty 选择器语法：p:empty{ background:#ff0000;}上效果：2. 如何选中多个相同标签中内容相同的标签 CSS3 :enabled 选择器语法：input[type="text"]:enabled{ background-color: #ff0000;}上效果：...

2021-10-28 21:57:01 63

原创关于RBAC权限管理的那些事儿

一，什么是RBAC RBAC基于角色的权限访问控制（Role-Based Access Control）是商业系统中最常见的权限管理技术之一。同时它也是一种思想，可以通过任何编程语言来实现。简单来说，RBAC权限管理分为三个部分：用户—角色—权限；一个用户可以拥有一个或者个角色，用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。二，权限模型介绍：三，RBAC的优势：简化了用户和权限的关系就是因为多了一个角色属性，通过角色可以...

2021-10-27 22:10:56 130

原创将excel中时间转为标准时间

通用：// 把excel文件中的日期格式的内容转回成标准时间export function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000) time.setYear(time.getFullYear()) const year = time.

2021-10-27 21:02:22 285

原创数组转树方法（v起来）

一，为什么需要数组转树：当我们做后台管理系统时难免会遇到关于公司组织架构这样的模块，一个部门下会有好几个小部门，这时我们就可以运用树形图来更好地进行查看，下面简单举例。展开前：展开后：二，下面使用两种方法进行数组转树：1. 非递归方式：/** * 把平铺的数组结构转成树形结构 * * [ * { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '...

2021-10-27 19:57:03 2400 2

原创关于npm ERR! cd（）never called 无脑解决方案

解决方案：1. 打开cmd清除你的npm缓存：npm cache clean -f2. 安装最新版的node：npm install -g n如果出现npm ERR! notsup Unsupported platform for [email protected]: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})，运行 npm install -g n --force ，安装npm包管理助手3. ...

2021-10-26 15:09:24 545

空空如也

空空如也