xihuhu的博客

原创 Vue3相较于Vue2做出了那些改变

1.整体优化1. 性能方面的提升1.1 首次渲染更快1.2 diff算法更快1.3 内存占用更小2. 更好的Typescript支持3.Composition API （这是重点内容）2.项目搭建与Vue2搭建项目一样，只是在后面选择时选择Vue3.X在项目搭建完成之后我们就可以看见变化在入口文件 main.js 中我们就可以发现这是Vue2.X// 这是Vue2中的入口文件new Vue({ el: '#app', render: h =>

原创 入门TypeScripe：基础介绍

1.TypeScripe是什么：1.1 TypeScripe（简称TS），是JavaScript的超集，简单来讲就是：JS有的TS都有，JS写的代码在TS 的环境下都能跑。它是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行typescript1.2 语法：在Js的基础之上，为Js添加了类型支持。typescript= type+JavaScript代码示例// typescript 代码有明确的数据类型let abc:number = 18// 而Java

原创 React-Hooks：useState的一些用法

1.useState-处理表单元素处理表单元素这个能力无非就是我们要获取到表单的值那么我们就要运用useState返回状态和修改状态的功能这样我们实现功能的思路：1.用useState初始化内容和写修改内容的函数2.向input元素上设置value和onChange属性import React, { useState } from 'react'import ReactDom from 'react-dom'export default function App () {

原创 React:第一个Hooks--useState简介

1.在什么场景使用useState当你想要在函数组件中，使用函数状态时，就要使用useState这个Hooks2.如何使用useStateuseState这个是React 自带的，所以使用时要先引入代码如下import { useState } from 'react'// useState 是hook，hook是use开头的函数const Count = () => { // 0 是初始值 // 返回值是一个数组 const stateArray = us

原创 React：Hooks的基础认识

1.什么是hooksHooks：在单词本意为钩子，钩住，所以由此可以得知Hooks可以让你在函数组件里“钩住”React state以及生命周期等特性的函数。是React16.8所更新的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性它的主要作用：为函数组件提供状态，生命周期等原本只能在类组件中才提供的功能注：1.Hooks只能在函数组件中使用 2.可以理解为通过Hooks为函数组件钩入class组件的特性2.为什么需要Hooks为什...

原创 常见的大厂UI库整合

1.didi （滴滴）cube-ui 使用范围：vue移动端介绍: cube-ui 是基于 Vue.js 实现的精致移动端组件库。特点质量可靠，由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。体验极致以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。标准规范遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。扩展性强支持按需引入和后...

原创 React-组件的生命周期

1.生命周期简介组件的生命周期就是组件从被创建到挂载到页面中运行，再到组件不用是卸载的过程。了解生命周期就是了解组件的运行方式，有助于我们完成更复杂的组件功能，分析组件错误的原因等2.钩子函数在生命周期的不同阶段，会自动被调用执行的函数，为开发人员在不同阶段操作组件提供了时机。注意：只有类组件 才有证明周期钩子函数3.react类组件的生命周期钩子函数-整体说明由上图可知React生命周期钩子函数总共分为三大阶段：1挂载时，2更新时，3卸载时那么下面详细说明这三个阶段.

原创 React的props校验

1.为什么需要校验相对于接受数据的子组件来说，props是外来的数据，无法保证传输过来的数据的格式是什么，所以我们需要校验规则来保证我们数据的单纯性2.如何使用props校验1.导入 prop-types 包 。这个包在脚手架创建项目时就自带了，无须额外安装引用 importpropTypes from 'prop-types'2.使用组件名.propTypes = {属性名1: 类型1, ...} 来给组件的props添加校验规则这里的propTypes是固定写法代码示..

原创 React组件通讯介绍

1.基本介绍组件是相对独立且封闭的单元，默认情况下，组件只能使用自己的数据组件化的过程，就是将完整的功能拆分成组件，以更好的完成整个页面所需的功能，但是在过程中不可避免的组件需要用到其他组件的数据，那么打破组件的独立封闭让组件之间的数据互通，则是组件通讯的过程组件之间的通讯方式大概分三种1：父子组件之间2：兄弟组件之间3：跨组件层级2.props的使用props即是父组件可以传数据给子组件的方法3.具体用法组件分函数组件和类组件函数组件用法// 接收数据

原创 React的受控组件和非受控组件

1.什么是非受控组件从react官方文档介绍中可以得知：在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。2.非受控组件的使用借助于ref，使用原生DOM的方式来获取表单元素的值使用步骤分为4步：1.导入：import{createRef } from 'react'2.调用createRef方法创建引用，假设一个名字 const xxx=creat..

原创 Vue资料整理：Vue 中操作 data 中数组的方法中哪些可以触发视图更新，哪些不可以，不可以的话有什么解决办法？

1.可以触发视图更新的数组方法有如下两种，1.是会改变当前的数组，它们分别是push()、pop()、shift()、unshift()、splice()、sort()、reverse()，2.是不会改变当前的数组，返回一个新数组，它们是filter()、concat()、 slice()。接下来是不可以更新视图的这里以下面两种作为代表：1.比如利用索引直接设置一个数组项，这里举一个例子比如：This.Array[index]=newArray,2.是直接修改数组长度的方法，比如This.Ar.

原创 React组件：有状态组件和无状态组件

1.什么是组件状态定义：是用来描述事务在某一时刻的形态的数据。一般写作state。特点：状态能够被改变，改变之后视图会发生相应的变化作用：(1)保存数据(2)为后续更新视图打下基础比如，设计一个计数器，点击+1按钮后计数器的数字会变化为原数字+12.两种状态2.1无状态组件：不能定义state的组件，函数组件又叫无状态组件无状态组件一般应用在本身就没有数据更改的地方，比如渲染一段商品的介绍文字，它不需要实时更新，它最大的好处时可以随时复用2.2有状态组件：能定义state的组

原创 React的组件简述

1.React的组件介绍React组件时对特定的功能进行封装，主要用与对ui进行拆分，它有着独立，可复用，可组合的特点；主要的分为4大类：1.基础组件：指input和button这种基础标签，以及antd封装过的通用组件2.业务：组件：由基础组件合成的业务抽象化UI。例如：包含了A公司所有部门信息的下拉框。3.区块组件：由基础组件和业务组件组合成的ui块。4.页面组件：展示给用户的最终页面，一般就是对应一个路由规则。2.React组件的创建方式React提供两种创建方式分别是：js中的函数创

原创 react基础

1.react简介React 是用于构建用户界面的 JavaScript 库，react全家桶是在全球范围内是用的最广泛的框架react全家桶：react（核心库），react-dom（dom操作）react-router（路由），redux（集中状态管理）2.创建手脚架react提供官方工具：create-react-app创建方式1：全局安装手脚架工具包npm i -g create-react-app使用手脚架工具包create-react-app 后面接你想要得.

原创 Vue重要面试题：v-if和v-show的区别

1.两者基本用法根据Vue官方文档v-if：根据表达式的值的truthiness来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是<template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。v-show：根据表达式之真假值，切换元素的displayCSS property。当条件变化时该指令触发过渡效果。由上可知v-if 和 v-show 都是用来控制动态显示或影藏 DOM 元素的2.二者区别v-show...

原创 vue项目总结

在刚刚结束得项目中，感觉收获良多，今日便为刚刚结束得项目做出总结1.代码得熟练在这次项目中，发现自己重大问题，即许多知识点仅浮于皮毛，并未深沉理解其真正含义，对于一项功能得实现理解仅限于教材与视频教程所讲并为深挖期原理，只知生搬硬套，导致错误频出，后续应多加练习并熟读相关知识点文档，理解并深刻记忆其应用。2.关于接口文档与需求文档接口文档与需求文档是我们前端工程师最需要得两样工具，前者告诉我们需要怎样拿到数据或者是拿怎样得数据或者需要传回怎样得数据，后者则告诉我们需要完成怎样得功能做出什

原创 在vue中使用富文本组件文字加高亮效果

1.准备工作使用富文本需要有第三方包的下载npm install vue-quill-editor --save -dev // 富文本下载npm install highlight.js --save -dev // 代码高亮1.引入注册import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'/* * 注册 - 业务模块

原创 如何使你的项目有国际范

1.准备工作这项功能看着很高大上，但是执行起来却很简单，因为我们的vue本身就内置一个语言转换的方法名为i18n，全名internationalization 缩写取其头尾字母然后中间还剩18个字母，使用方法当然得先下包了代码：npm i vue-i18n2.实列中使用在项目文件夹中创建一个新得文件夹最好取名为“lang/index.js”大致内容如下// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from '.

原创 当我们做角色添加功能时当前页直接跳转到最后一页

1.目标功能跳转至角色页最后一页可以方便我们查看当前添加是否成功这种功能实现有两种方案方案1：和后端的同事商量，把新增的角色从前方添加,添加完成后请求第一页的数据方案2：自己请求最后一页的数据,这里面有一个小坑,当添加的这个数据使最大页数发生改变时会出现问题（解决方法：先让表格页数自身++total,来模拟后台总数,然后除以当天每页显示的条数,向上取整来得到向服务器请求需要发送的页数）代码...

原创 Excel表格导入时，如何将中文key转为英文key

1.为什么要这样做在我们导入excel表格后，我们需要将数据导入至服务器，然而这些表格为了方便阅读基本上都是使用中文书写，但是服务器并不能识别这些中文，所以就需要我们将这些中文转换成英文例如2.转换的方法思路：对于原数组每个对象来说找出所有的中文key 得到对应的英文key 拼接一个新对象： 英文key:值代码示例 formatData(rows) { //这个地方是对照表 需要时自行更改 const map = { ..

原创 使用非递归数组转树形结构

1.为什么要用数组转树在我们渲染后台数据时并不是所有的数据都是平铺直叙的，最典型的就是在后台管理平台上，一定会有的员工和部门的上下级管理关系，这是时候我们就需要使用数组转树形结构。2.完成数组转树形结构的方法完成该结构的方法有两种递归和非递归递归：递归算法要求的源数据的格式为：['id'=> 1, name='第一个节点'，'pid'=>'父级节点'] ,每一个节点的记录格式都是这样的即可满足树形数组的构建。依照先遍历的想法，依次找child，找child的child，往下找ch

原创 svg图标在表格中折叠和展开的变换

上述变化效果实现很简单，在内容前添加一行代码即可如果当前节点有 children 则根据node.expanded 和三元表达式 来判断

原创 Element-ui的表格table翻页如何让序号延续递增

1.在element-ui的文档中讲解了如何自定义序号的方法2.实际代码中的使用3.index方法也是可以自定义的methods:{ getIndex(index) { const page = this.params.page const pagesize = this.params.pagesize // 当前页数 - 1 * 每页数据条数 + index + 1 return (pag..

原创 JS数组方法reduce()的使用方法

1.什么是reduce方法reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。代码语法如下arr.reduce(callback,[initialValue])2. 内部参数reduce内部有参数function(total,currentValue, index,arr)，initialValue2.1 ：total：必需，初始值, 或...

原创 watch监听器的基本使用

1.watch的功能从vue.js的Api文档中可以得知：watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个 property。代码示例<template> <div class="attr"> <h1>watch属性</h1> <h2>{{ $data }}</h2> .

原创 使用Element-ui自带的菜单选中高亮

根据Element-ui文档中我们可以看到，在导航组件

原创 Vuex中函数用法

<div> <p>1.如何全局使用state</p> <span>{{this.$store.state.xxx }}</span> computed:{ ...mapState(['xxx']) ...mapState({新名字:'xxx'}) } <p>2.如何使用modules中的state</p> <span>{{ ...

转载 actions和mutations和state的关系图

原创 vuex五大核心知识点

Vuex是单向数据流的设计模式，其有五大核心概念：1.State :是用来存放数据的，通常将全局数据保存在这里代码实列如图在Vue组件中我们可以通过this.$store.state来获取Vuex下的State状态。2.Getter:有些时候我们需要从store中的state中返回特定的模板或者计算，这个时候我们就需要用到Getter,主要是为了避免数据过多导致代码的臃肿代码实列如图在单独的Getter.js文件中写入要简化的数据，并导出在...

原创 常见的代码编辑器

一、VS Code下载网址：Visual Studio Code - Code Editing. Redefined简介：VS Code 全称 Visual Studio Code，是微软开发的一套免费、轻量级、功能强大的源代码编辑器工具。VS Code 主要针对软件工程师的用于代码编辑，支持各种插件，让你的代码编辑效率更高。特点：智能代码补全简化的调试快速，强大的编辑代码导航和重构内置的Git命令可扩展和可定制的插件二、Source Insight下载网址：

原创 前端开发常用快捷键

webstorm: 　　Alt+Tab 窗口切换√ Alt+ left/right 切换代码视图√ 　　alt+F2浏览网页 file里面settings可以改字体 ctrl+F查询　　 ctrl+alt+下箭头可以多个复制 alt+1左侧栏隐藏√ 　　shift+F6重命名√　　 ctrl+shift+u 小写大写转换√ 　　shift+tab 成段向前缩进√ 　　ctrl+/ 单行注释√ 　　ctrl+shift+/ 块注释√　　 ctrl+shift..

转载 git的基本用法

在学会使用git之前，首先要知道git是什么呢？ Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。相对于SVN来说：Git 是分布式的，SVN 不是：这是 Git 和其它非分布式的版本控制系统，例如 SVN，CVS 等，最核心的区...

原创 js中常用的方法

1.MATHMath.PI // 圆周率Math.max() // 最大值Math.min() // 最小值Math.round(2.3) // 四舍五入Math.floor(1.8) // 向下取整Math.ceil(1.8) // 向上取整Math.abs(-1) // 绝对值Math.random()// 0-1之间随机数 0 能取 1不能取2.Dated.getFullYear() // 年d.getMonth...

原创 vue路由中的$route对象和$router实例

1.this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。从实际代码中来看：在控制台输出this.$route，在这里面我们可以看到里面带有path query等属性。2.this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其

原创 js中常用的十五种数组方法

第一种