- 博客(38)
- 收藏
- 关注
RSS订阅原创 el-table 中 :span-method=“objectSpanMethod“合并单元格
【代码】el-table 中 objectSpanMethod合并单元格。
2024-01-26 15:10:01
639
原创 了解了解TypeScript
什么是TypeScript? TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 // TypeScript 代码有明确的数据类型let age1: number = 18//
2021-11-24 19:16:09
649
原创 React访问控制
场景:用户必须登录才能访问后台首页，否则不能进入后台主页,因此，就需要对项目进行登录访问控制，让需要登录才能访问的页面，必须在登录后才能访问。 在没有登录时，直接跳转到登录页面，让用户进行登录。在vue中有导航守卫,react中没有导航守卫，需要自己封装.react-router-dom 文档 :React Router: Declarative Routing for React.jshttps://v5.reactrouter.com/web/example/auth-workflow..
2021-11-21 23:10:04
1014
原创 React中如何在非组件环境下拿到路由信息?
如上图代码,我们在拦截器里面不能直接使用history进行跳转,而用location.href直接复制会导致页面刷新,那么如何在非组件内直接使用history进行页面跳转?参考代码:https://github.com/remix-run/react-router/blob/v5/packages/react-router-dom/modules/BrowserRouter.js首先react-router-dom中直接有Router这个包，但是它Router 没有history属性,在安装r...
2021-11-18 21:05:14
747
原创 从零开始React(8)==＞hooks进阶
一.如何用useEffect发送请求?在hooks基础里面我们了解到useEffect里面可以进行：数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等,那么我应该如何在useEffect里面进行发送请求呢?示列代码:import React, { useEffect } from 'react'import ReactDom from 'react-dom'import axios from 'axios'expor
2021-11-17 23:14:07
182
1
转载 React中引入eslint 环境配置
目标:在react项目中配置elint,并启用保存自动化格式功能.思路:在项目中安装eslint 用eslint的init指令创建eslint配置文件 设置vscode中的自动保存格式化命令步骤 终端中输入命令 (安装ts的指令 非必须但是ts格式化格式更高级) npm i eslint typescript2.在项目根目录,运行npx eslint --init 3.按照交互提示安装相关插件 3.1.选择是是否使用TypeScript,...
2021-11-17 20:14:55
508
原创 Vue高频面试题
一.常用指令有哪些?并说明作用? ★★vue官方提供指令有15个:v-model:用于表单元素双向数据绑定. v-for:循环,多用于循环数组. v-if:显示与隐藏(v-else-if v-else 这两需要搭配v-if使用) v-show:显示内容 v-hide:隐藏内容 v-on:绑定事件,简写@ v-html:解析html标签 v-text:接卸文本 v-bind:动态添加标签属性(三种绑定方法:1-对象型:{red:isred},2.三元表达式: isred? 're...
2021-11-14 23:05:32
863
原创 从零开始React(7)==＞hooks基础
在之前我们了解到有状态组件和无状态组件有状态组件：能定义state的组件。类组件就是有状态组件,无状态组件：不能定义state的组件。函数组件又叫做无状态组件(在rect16.8后引入了React Hooks ,函数组件也能定义自己的状态)函数组件在没有引入hooks之前是无状态组件,而在引入了hooks后,函数组件也可以定义自己状态.Hooks是什么?Hooks 只能在函数组件中使用 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性(state 及生命周期等特性的函
2021-11-13 15:25:09
708
原创 从零开始react(6)=＞setState进阶
先上代码:export default class App extends Component { state = { n: 1 } hClick = () => { this.setState({n: 100}) console.log(this.state.n)// 这里打印是多少? console.log(document.getElementById('span').innerHTML) // 这里打印是多少？ } render
2021-11-11 23:30:56
556
原创 从零开始react(5)=＞react组件进阶
props校验-基本使用:在之前博客中我们有提到关于props的校验.如图:props校验:对于子组件来说,props是外来的(是接受父组件传过来的参数的),无法保证组件使用者传入什么格式的数据，有了类型校验，我们的程序就更加健壮了。props的基本使用:导入 prop-types 包 。这个包在脚手架创建项目时就自带了，无须额外安装 使用组件名.propTypes = {属性名1: 类型1, ...} 来给组件的props添加校验规则(固定写法)如图所示:作用:规定接...
2021-11-10 19:01:05
962
原创 从零开始react(4)
在之前的博客我们学习了组件和组件状态修改,今天我们继续学习一下组件通讯一.组件通讯组件通讯:件是独立且封闭的单元，默认情况下，只能使用组件自己的数据,在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。 而在这个过程中，多个组件之间不可避免的要共享某些数据,为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯.在我们了解了什么是组件通讯,我们来认识一下组件通讯的三种方式:父子组件之间 兄弟组件之间 跨组件层级父子组件之间:.
2021-11-08 20:43:10
198
2
原创 在 Vue 中使用插件的步骤?Vue 项目优化的解决方案都有哪些？说一下你在 Vue 中踩过的坑?
在 Vue 中使用插件的步骤?采用 ES6 的 import ... from ...语法或 CommonJS 的 require()方法引入插 件 使用全局方法 Vue.use( plugin )使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true })Vue 项目优化的解决方案都有哪些？1、 使用 mini-css-extract-plugin 插件抽离 css 2、 配置 optimization 把公共的 js 代码抽离
2021-11-07 16:30:56
317
原创 从零开始react(3)
在学习过react组件和react组件状态后,我们继续来学习react组件的状态-修改状态.组件的状态-修改状态:在之前我们知道定义状态是使用state = 对象来做初始化,那么我么在做修改状态是直接修改state中的值来来让视图变化么?答案肯定不是来直接修改state里面的值来让视图变化,在react中状态是不可变的,就是说不要直接修改当前状态值,而是创建新的状态值.而要修改就需要用到setState函数.setState函数:语法 :this.setState({ 要修改的部分数据
2021-11-07 15:37:52
58
原创 说说Vue2.0兼容IE哪个版本以上? Vue 如何去除 URL 中的#?
Vue2.0兼容IE哪个版本以上?在Vue2.0中完全兼容IE10以上,部分兼容IE9,不支持IE8及一下版本,因为Vue的响应式原理是基于es5的Object.defineProperty的，而这个方法不支持ie8及以下的Vue 如何去除 URL 中的#?Vue-Router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”， 可以使用 Vue-Router 的另一种 模式 history：在文件目录下的 router->index.
2021-11-06 22:07:35
1920
原创 从零开始react(2)
一.react组件简绍组件分类: 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件 业务组件：由基础组件组合成的业务抽象化UI。例如公司部门信息的下拉框 区块组件：由基础组件组件和业务组件组合成的UI块 页面组件：展示给用户的最终页面，一般就是对应一个路由规则 具体组件使用可以去这个博客看看:React学习：组件(Components)_若水弹丸之地-CSDN博客二.react组件的两种创建方式使用 JS 中的函数创建组件
2021-11-06 21:35:11
74
原创 从零开始react(1)
一.React脚手架-从零开始创建项目创建方式1:先全局安装脚手架工具包 (命令：npm i -g create-react-app ) 用脚手架工具来创建项目(create-react-app your-project-name(your-project-name 表示项目名称，可以修改 ))创建方式2:直接使用npx来创建项目:npx create-react-app your-project-name目录:二.理解react-dom在package.json文件中:...
2021-11-05 21:27:13
111
原创 了解了解v-if和v-show
在vue中我们经常用到的两个属性v-if和v-show,那么这两者有什么共同点和不同点呢?一.相同点和不同点:在实际使用中我们可以通过v-if或者是v-show来动态控制 DOM 元素的显示隐藏,列如:当v-if和v-show值为假时,绑定的元素都不会在页面中显示 <div v-show="0">1111</div> <div v-if="0">222</div>但是在控制台中我们可以看见:由上可以:相同点:v-if.
2021-11-05 19:45:37
282
原创 浅拷贝/深拷贝
一.深浅拷贝:浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响 深拷贝: 完全拷贝一个新对象，修改时原对象不再受到任何影响二.深浅拷贝的区别:通俗易懂的来说就是假设B复制了A，当修改B时，看A是否会发生变化，如果A也跟着变了，说明这是浅拷贝，如果A没变，那就是深拷贝。学过js的同学应该都知道，javascript变量包含两种不同数据类型的值：基本数据类型和引用数据类型。基本数据类型采用的是值传递，创建一个基本数据类型会在内存中开辟一个新的空间；而引用数据类型
2021-11-01 23:12:22
131
原创 变量对象/作用域/作用域链------＞闭包
一.变量对象:变量对象，是执行上下文中的一部分，可以抽象为一种数据作用域，其实也可以理解为就是一个简单的对象，它存储着该执行上下文中的所有变量和函数声明(不包含函数表达式)。二.作用域:作用域其实可理解为该上下文中声明的变量和声明的作用范围。可分为块级作用域和函数作用域特性:声明提前:一个声明在函数体内都是可见的, 函数优先于变量 非匿名函数自动执行,函数变量为只读,无法修改let foo = function() { console.log(1) };(functi...
2021-11-01 00:37:41
146
原创 原型/构造函数/实列/原型链
一.构造函数原型prototype:构造函数通过原型分配的函数时所有对象所共有的,每一个构造函数都有一个prototype属性,指向另一个对象,(prototype就是一个对象),这个对象的所有属性和方法,都会被构造函数有拥有.可以就一些不变的方法直接定义在prototype对象上,这样所有的实列就可以共享这些方法.二.对象原型:对象都会有一个属性__proto__指向构造函数的prototype原型对象,我们可以使用构造函数prototype原型对象的属性和方法,就是有__protot__
2021-10-30 23:59:57
164
原创 使用Element组件中table表格翻页如何让序号延续递增
在使用Element组件做table表格和加入分页功能之后,在我们表格翻页后表格序号没有延续上一页序号进行递增,如图:通过Elemen官方文档查询到:如果设置了type=index，那么可以通过传递index属性来自定义索引效果如下:...
2021-10-22 00:45:00
379
原创 vue侦听器watch基本使用
一.watch概述:vue提供的一个响应数据变化的通用方法,一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性,当需要在数据执行异步或开销较大的操作时,这个方法最有效.语法:// newVal :当前值 oldVal: 上一刻值watch: { "被侦听的属性名" (newVal, oldVal){ }}实列代码:<..
2021-10-21 19:59:01
232
原创 数组平铺结构转换为树形结构
* 把平铺的数组结构转成树形结构** [* {id:"01", pid:"", "name":"大王" },* {id:"02", pid:"01", "name":"小王" }* ]* 上面的结构说明： 大王是小王的上级*/function tranListToTreeData(list) { // 1. 定义两个中间变量 const treeList = [], // 最终要产出的树状数据的数组 map = {} // 存储映射关系/.
2021-10-21 18:57:26
153
原创 svg图标收缩展开
效果图:一.判断是否展开,来显示不同的展开收起图标如果当前节点有 children 则根据node.expanded 来判断显示加号还是减号 'tree' : 'user'" svg图标可自行更改二.如何给没有孩子节点的对象加一个头像三.消除默认展开图标...
2021-10-20 21:07:31
474
原创 axios的响应拦截器
一.拦截器介绍:一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器请求拦截器: 在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装 响应拦截器: 响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等// 请求拦截器instance.interceptors.request.use(req=>{}, err=>{});/.
2021-10-18 15:29:44
11500
2
原创 vue中$route和$router区别
一、$route和$router区别$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法 $route为当前router跳转对象里面可以获取name、path、query、params等看图示列:红框中就可以看出$router中含有history属性，可以实现路由跳转 $route中含有query,params属性，跳转路由中传递参数就靠这两个...
2021-10-17 23:25:45
280
原创 dispatch和commit的使用
dispatch是一个异步操作this.$store.dispatch (actions的方法)commit 同步操作 this.$store.commit(mutations的方法)
2021-10-17 23:15:15
366
原创 sync和v-model的区别
1.v-model的原理:<com1 v-model="num"></com1> // <!--v-model 是语法糖-->等价于<com1 :value="num" @input="(val)=>this.num=val"></com1> <!--v-model的默认行为是input,默认prop是value-->v-model通常用于表单控件，因为这样子组件有更强的控制能力2..sync修饰符的原理
2021-10-17 23:00:03
254
原创 统计及数组中每个元素出现的次数
现有数组:arr = ['b', 'c', 'b', 'a', 'b', 'c'],统计出每个元素出现的次数.一.forEach统计每个元素出现的次数
2021-10-17 20:53:08
336
原创 什么是跨域?跨域解决方法
一.为什么会出现跨域问题?跨域出于浏览器的同源策略限制。同源策略:它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议，主机和端口号二.什么是跨域?当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域三.跨域请求报错原因和
2021-10-17 18:08:20
2608
原创 当我们打开首页时，加载了哪些组件
一.咋我在启动项目后可以通过浏览器查看都是先挂载在App.vue主组件上，显示不同的组件如图下图所示:一般来说人资后台都是两个一级路由，分别是Login登录页和Layout具体内容页，和若干个二级路由和三级路由组成。<template> <div id="app"> <router-view /> </div></template> <script>export default { name:.
2021-10-14 14:08:23
460
原创 个人笔记(js常用Array方法,文章底部干货,点赞收藏)
1-Array.prototype.filter() 语法: var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])描述:filter为数组中的每个元素调用一次callback函数，并利用所有使得callback返回 true 或等价于 true的值的元素创建一个新数组。callback只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callb...
2021-10-13 21:23:40
104
原创 git语法大全(值得收藏)
一.Git基础概念:Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性！二.Git 中的三个区域:使用 Git 管理的项目，拥有三个区域，分别是工作区、暂存区、Git 仓库三.Git 中的三种状态: 已修改 modified 表示修改了文件，但还没将修改的结果放到暂存区 已暂存 staged
2021-10-13 19:46:28
1652
转载 前端开发常用快捷键
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..
2021-10-13 19:31:32
3197
原创 个人练习案例(购物车结算)
一.界面样式要求二.代码部分三.思路解析主要运用到 v-model 数据视图双向绑定和 computed 计算属性两个技术点.1.定义数据手机价格(mobilePrice)和手机数量(mobileNumber)以及电脑价格(computerPrice)和电脑数量(computerNumber)和运费(sendPrice).这些数据都运用 v-model 进行数据绑定.2.定义计算属性手机价格小计(mobileCount),电脑价格小计(computerCount),总价...
2021-10-13 19:19:39
78
原创 个人练习(购物车渲染案例)
一.案例需求:书籍有选中与取消选中的功能,然后每本书籍右上角都有删除按钮,点击就会将书籍删除,效果如下图所示:1-结构部分html2-css样式部分3-代码部分二.技术简介1.主利用 vue 框架和 element 组件库完成页面布局,然后主要利用css的 hover 属性和transform动画属性完成书籍和右上角删除按钮的选择与否效果,2.运用axios请求数据,3.运用splice方法操作数组完成删除效果4.运用calssNa...
2021-10-13 18:58:35
93
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人