- 博客(114)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 在虚拟DOM和Diff算法中为什么不建议使用index作为key值？
key是什么key是虚拟DOM的一个重要标识，在DIff算法中，key对我们的性能也有着至关重要到的作用，有key就可以优化Diff算法，提高渲染性能；key在页面更新的时候做了什么1、首先，当我们进行一个页面更新，比如说新添加了一行数据，此时我们会生成一个新的DOM树；2、通过key值，定位到两个DOM树节点所在位置；（1）如果两个DOM树内容比对，没发生变化，我们直接使用原来的真实DOM（2）如果新旧DOM树节点发生了变化就替换掉之前旧的虚拟DOM,生成新的真实DOM（3）如果没找到同样
2022-03-04 17:03:44
572
4
原创 React入门基础+练习（二）
文章目录一、组件创建1.1 函数组件1.2 类组件二、组件区别2.1 有状态和无状态组件2.2 类组件的状态三、事件处理*3.1 注册事件**3.2 事件对象**3.3 this指向问题*四、setState修改状态五、表单处理*5.1 非控组件**5.2 受控组件*一、组件创建组件创建有两种：一种是函数组件、一种是类组件1.1 函数组件函数组件就是使用JS的函数或者箭头函数创建的组件函数组件创建：// 普通构造函数function Hello() { return <div>
2022-02-15 09:31:12
528
1
原创 React入门基础+练习 (一)
文章目录一、关于react1.1 react相关文档1.2 react是什么？1.3 react的特点？二、react的脚手架三、react元素的创建练习四、JSX4.1 JSX是什么4.2 JSX的使用4.3 JSX中使用JavaScript表达式*4.3.1 可以访问对象的属性**4.3.2 可以访问数组下标**4.3.3 可以调用方法**4.3.4 可以使用三元表达式*4.4 条件渲染4.4.1 if/else4.4.2 三元表达式4.4.3 &&运算符4.3 JSX注意事项
2022-02-13 16:59:19
984
原创 算法-快速排序
快速排序特点特点：快，效率高适用场景：适合数据过大且杂乱无章快速排序思路选取个分割点，通过一次排序将整个无序列表分为两个部分，其中一个部分的数据比另一个部分包含的数值小实现思路举例步骤1、选择一个分割点（通常选择第一个）——>49步骤2、大于49放右侧，小于49放左侧，排序后——13 42 6 49 56 76 91步骤3、第一个小于部分 13 42 6进行以13为分割点的排序——> 6 13 42步骤4、第二个大于部分56 76 91以56为分割点排序 ——>56 7
2022-02-08 16:42:26
216
原创 React-组件生命周期
只有 类组件 才有生命周期挂载阶段：componentDidMount执行时机：组件创建时（页面加载时）更新阶段：componentDidUpdate执行时机：setState()forceUpdate() 强制组件更新组件接收到新的props（实际上，只需要父组件更新，子组件就会重新渲染）卸载阶段：componentWillUnmount执行时机：组件从页面中消失...
2022-02-08 10:39:44
176
原创 echarts图表随着窗口大小改变自刷新问题解决
使用window.onresize缺点：多个echarts的时候就只有最后一个生效了，onresize会被覆盖 const myChart = echarts.init(this.$refs.echartRef) window.onresize = function () { myChart.resize() }使用window.addEventListener添加resize方法 const myChart = echarts.init(this.$refs.echart
2022-02-03 17:14:05
2855
原创 React-组件通信
父传子props基本使用import React, { Component } from 'react'class APP extends Component { render() { return ( <div> <h1>父子通讯——父组件</h1> <hr /> <Fn /> <Child /> </div>
2022-01-28 15:30:30
1216
原创 React-setState修改状态
由于react状态不可变，所以在react中不要直接修改 state 中的值，这是无效的！例如：语法：this.setState({ 要修改的部分数据 })setState() 作用：1 修改 state 2 更新 UI例如：setState 是哪来的？从 Component 父类继承过来的// 只要是数组中直接修改当前数组的方法都不能用！this.state.list.push(123) // 错误// 正确this.setState({ list: [...this.
2022-01-27 15:48:26
1079
2
原创 React-概念和基本使用
什么是react一个用于构建用户界面的JavaScript库react三个特点声明式组件化跨平台react 脚手架的使用创建：npx create-react-app 文件名启动：npm startreact基本使用导入react和react-dom创建react元素(虚拟DOM)渲染react元素到页面中核心代码：// 导入react和react-domimport React from 'react'import ReactDOM from 'react-dom'
2022-01-24 20:27:25
65
原创 Vue-Less的自动和手动引入
先准备样式变量文件style.less@fontColor: #27ba9b;手动引入在vue页面的style中使用<style scoped lang='less'>// 引入@import '~@/styles/variables.less';// 使用p { color: @sucColor;}</style>自动引入下载一个vue-cil插件vue add style-resources-loader安装完毕后会在vue.co.
2022-01-13 20:16:28
316
原创 Vuex-持久化
在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储，持久化：1. 数据存到vuex（内存）2.数据同时存到本地（硬盘localStorage）这里我们用vuex的一个插件来持久化存储vuex安装vuex-persistedstate 插件vuex中准备user模块（user模块中存的用户信息是所需要持久化存储的，根据自己需求而变化）=》store/modules/user.js将插件配置到vuex的plugins选项中，配置user模块进行状态持久化修改s.
2022-01-13 16:12:59
296
原创 对instance进行二次封装
/** * * @param {*} url 后台请求地址 * @param {*} method 方法（get/post） * @param {*} submitData 传递给后台的参数 * @returns */const request = (url, method, submitData) => { return instance({ url, method, [method === 'get' ? 'params' : 'data']: submi
2022-01-11 09:15:09
859
原创 Vue的调试工具(Chrome 浏览器)配置
在Chrome浏览器右上角点击这个按钮：点击更多工具下的->扩展程序开启开发者模式,并将下载好的安装包,解压并加载进来Vue.js devtools 详细信息如下
2021-12-29 21:01:47
970
原创 存储图片到第三方云服务器
结构：<template> <div> <el-upload class="avatar-uploader" action="#" :show-file-list="false" // :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" .
2021-12-25 23:45:08
492
原创 Vue-注册全局组件的两种方法
第一种：在main.js中直接注册// 引入import PageTools from '@/components/PageTools'// 注册为全局组件Vue.component('PageTools', PageTools)缺点：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护。第二种：使用插件的形式注册在统一注册的入口文件 中// 引入import PageTools from './Pa
2021-12-22 09:22:24
21486
原创 后台系统-新增和编辑共用一个弹框（基于vue和element-ui）
如图所示：点击新增角色和编辑会弹出一个弹框，弹框只写一个，如何实现共用同一结构，功能却不相同呢？首先给这两个按钮定义一个点击事件，事件名为openDialog这里不同的是 给编辑这个按钮根据作用域插槽解构了一个row还有一个2，这个2就是我们区分编辑和新增的关键这里的roleForm是上述table表格绑定的数据...
2021-12-21 19:55:18
1257
原创 vuex-token的持久化
vuex中处理tokenstate中定义一个tokenactions请求获得token值，但是actions不能直接修改state中token的值，通过模块化调用，使用mutation中的函数来改变token的值mutation定义改变token和删除token的两个函数持久化存储token的值可以在本地存储一份在对token初始化的时候，可以从本地获取一下，优先使用本地的tokensetToken的时候，在本地也存一下removeToken的时候，本地也删除tokenimport
2021-12-16 22:34:35
527
原创 vue-cil解决开发环境的跨域问题
为什么会产生跨域问题由于浏览器同源策略的限制，当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域解决开发环境的跨域问题ue-cli为我们在本地开启了一个服务，可以通过这个服务帮我们代理请求,解决跨域问题步骤：步骤1.在vue-config.js中配置步骤2.修改环境配置文件（.env.development）baseURL步骤3.重启项目，查看接口调用效果（一定要重启项目）步骤1.module.exports = { devServer
2021-12-16 22:14:42
268
原创 Vue-格式化时间
格式化时间采取过滤器步骤:下载格式化时间的第三方包在项目入口文件 main.js 中导入并使用 dayjs并定义全局过滤器在组件中，调用全局过滤器，对时间进行格式化：案例：把以下表格的发表时间改为YYYY-MM-DD HH:mm:ss格式步骤1：npm i dayjs@1.10.7 -S步骤2：import dayjs from 'dayjs'// 定义全局过滤器Vue.filter('dateFormat', (dt) => { return dayjs(dt).f
2021-12-09 19:37:13
216
原创 Vue-自定义表单验证
实例：判断两次输入密码是否一致1.在data函数的return前面，写一个表单验证2.使用这个表单验证，就用validator
2021-12-07 00:01:28
595
原创 Vue-项目初始化
基于 vue-cli 初始化 Vue2 模板的项目目的：为后面的项目开发做准备。初始化 vue-cli 的核心步骤：Manually select features(*) Choose Vue version(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testi
2021-12-02 16:38:55
891
原创 Vue-ref引用
什么是ref引用ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用，默认情况下，组件的 $refs 指向一个空对象。 使用 ref 引用 DOM 元素的方法：this.$refs就可以的到对应的Dom元素页面显示： 使用 ref 引用组件实例用法和上述引用 DOM 元素一样...
2021-12-01 00:25:04
382
原创 Vue-生命周期
一、生命周期 & 生命周期函数生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行,强调的是时间点。注意：重点的生命周期函数created 是第二个生命周期函数，可以访问到data数据和methods数据，常用在调用methods中的函数发起ajax请求mounted 在实际开发中，要想操作当前组件的DOM元素，必须在mounted
2021-12-01 00:15:19
184
原创 Vue-vuex
一、什么是vuex？Vuex 是 vue 项目中实现大范围数据共享的技术方案。作用：能够方便、高效地实现组件之间的数据共享二、安装与配置①安装：npm i vuex@3.6.2②封装store模块：导入 Vue 和 Vuex 依赖包 import Vue from 'vue' import Vuex from 'vuex'把 Vuex 安装为 Vue 的插件 Vue.use(Vuex)创建 store 的实例对象 const store = new Vuex.Sto
2021-12-01 00:03:31
776
原创 Vue登录路由守卫
假设，admin 密码123456 就可以跳转到主页路由的安装与配置：详情跳转源代码：路由器配置页面import Vue from 'vue'import VueRouter from 'vue-router'import Mylogin from '../components/MyLogin.vue'Vue.use(VueRouter)const router = new VueRouter({ // 路由规则的数组 routes routes: [ { pat.
2021-11-28 10:32:51
1264
原创 Vue实现按钮和文本框的切换
案例：▲注意点解析：为什么使用 this.$nextTick( )?组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。因为vue是异步的，所以说执行this.flag=false 指令时，页面还没有渲染，我们要等页面渲染后才能进行 获取Dom元素并且聚焦为什么使用箭头函数？箭头函数没有自己的this，它的this就是箭
2021-11-27 22:22:14
1467
1
原创 Vue-路由
什么是路由？路由（英文：router）就是对应关系。在 SPA （SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。）项目中，不同功能之间的切换，要依赖于前端路由（Hash 地址与组件之间的对应关系）来完成。Hash地址： http://www.xxxx.com/api/getbooks?id=1#home 这是一个网页地址，从#开始往后叫做Hash地址前端路由的工作方式① 用户点击了页面上的路由链接② 导致了 URL 地址栏中的 H
2021-11-27 21:11:26
1370
原创 Vue-自定义指令
自定义指令的分类vue 中的自定义指令分为两类，分别是：私有自定义指令全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令全局自定义指令全局共享的自定义指令需要通过“Vue.directive()”进行声明语法：Vue.directive('自定义指令的名字', {自定义指令的选项}})使用方法：需求： 把App根组件改成红色全局自定义指令写在main.js中：页面显示效果：这种写法，只能定义一个颜色值，所以我们可
2021-11-26 10:04:22
291
原创 Vue-组件之间的数据共享
在项目开发中，组件之间的最常见的关系分为如下两种：① 父子关系② 兄弟关系父子组件之间的数据共享父子组件之间的数据共享又分为：① 父 -> 子共享数据② 子 -> 父共享数据
2021-11-26 09:40:00
1921
1
原创 Vue-动态组件和插槽
一、动态组件动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。使用方法：当我们使用默认这种写法时，我们会发现，如果在right进行了操作，再切换到left，再次切换到right时，right上的操作不会缓存下来我们就通过以下方式，解决这一问题：使用 keep-alive 保持状态keep-alive默认缓存所有组件，我们可以通过include属性，来自己选择缓存哪些部分include：只有名称匹配的组件会被缓存
2021-11-25 17:25:34
2337
1
原创 Vue-组件
组件知识点什么是组件化开发： 据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。.vue文件就是Vue组件vue 组件的三个组成部分：template -> 组件的模板结构(必写)script -> 组件的 JavaScript 行为（可选）style -> 组件的样式（可选）三个组成部分1.template注意：1.template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素2.templ
2021-11-22 21:40:27
1268
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人