- 博客(52)
- 收藏
- 关注
RSS订阅原创 vue3学习 4.toRaw
1.toRaw 获取原始数据不是引用关系 而是全等关系1.toRaw 从Reactive或Ref中得到原始数据 2.toRaw作用 做一些不想被监听的事情(提升性能) let obj ={name:'zs',age:19} /* ref/reactive数据类型的特点: 每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的 所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,
2021-06-25 18:05:07
16479
2
原创 vue3学习 3.递归监听和非递归监听
1.递归监听 1.递归监听 默认情况下,无论是通过ref还是reactive都是递归监听 递归监听是vue将对象包装成Proxy对象 里面的所有数据都能深度监听 2.递归监听存在的问题 如果数据量比较大,非常消耗性能 3.非递归监听 注意点: 如果是通过shallowRef创建的数据, 那么vue监听的是.value的变化 并不是第一层的变化.所以如果使用的是shallowRef的话 数据都不会有Proxy对象转化 4.应用场景 一般情况下我们是用ref和reactive即可
2021-06-23 19:01:15
317
1
原创 vue3学习 2.组合API
1.vue2的老旧模式数据放在data里面 但是操作数据的方法可能在methods或者computed或者watch里面 分开操作有点不合适2.vue3中新增setup方法setup函数时组合API的入口函数<template> <div> <p>{{count}}</p> <button @click="myFn">按钮</button> </div><
2021-06-23 17:32:05
248
1
原创 vue3对于vue2的提升 1,速度提升
vue3的六大亮点performance:性能比vue2提升1.2~2倍Tree shaking support:按需编译,体积比vue2更小composition API:组合API(类似react hooks)better typeScript suppert:更好的Ts支持custom renderer API:暴露了自定义渲染APIfragment,teleport(protal),msusoense:更先进的组件1.优化diff算法 vue2中的虚拟dom是进行全量的对比 htt
2021-06-22 19:00:46
452
原创 高程3 引用类型
5.引用类型引用值(或者对象)是某个特定**引用类型**的实例,在js中 引用类型是吧数据和功能组织到一起的结构,对象被认为是摸个特定引用类型的**实例**,新对象通过使用new操作符后跟一个构造函数来创建.后遭函数就是用来创建新对象的函数;DateDate.parse()，Date.UTC() Date.now()1.1 继承的方法Date 类型重写了 toLocaleString()、toString()和 valueOf()方法。toLocaleString() - 2/1/2019
2021-05-08 20:14:23
139
7
原创 高程3 变量,作用域和内存问题
变量1.基本类型和引用类型的值基本类型:值得是简单地数据段,引用类型值:那些可能由多个值构成的对象引用类型的值是保存在内存中的对象. js不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间.在操作对象时.实际上是在操作对象的引用而不是实际的对象,为此,引用类型的值是按引用访问的.1.1动态的属性基本类型和引用类型的方式类似:创建一个变量并为该变量赋值.1.2 复制变量值基本类型在用=复制值的时候 两个变量不受影响 随便更改一个 另一个不会受到影响引用类型的时候 这个值的副本
2021-04-25 19:25:06
70
原创 高程3 02 数据类型 操作符 语句 函数
一元操作符只能操作一个值的操作符焦作一元操作符,一元操作符是ECMAScript中最简单的操作符 1.递增和递减操作符 前置操作符 --m ++m var m = 3 ; --m 等同于 m = m - 1 此时m已经变成2;后续操作再引用到m时候就会当成2来用; 后置操作符 m-- m++ var m = 3; m++ 等同于 m = m + 1 ***但是!!!递增或者递减操作是在包含他们的语句被求值之后才执行的. 就是如果有 m++或者m-- 先把运算过程做完 然后再对
2021-04-21 19:04:14
84
原创 高程3
JSjs由核心ECMAScript 文档对象模型DOM 浏览器对象模型BOM组成DOM文档对象模型DOM是页面内标签 Document Object Model 遵循W3C标准BOM浏览器对象模型BOM 指可操作浏览器窗口的对象模型(Browwer Object Model) H5把操作浏览器的一些东西扩展作为操作BOM的一部分 弹出浏览器窗口的功能;移动缩放和变故浏览器窗口的功能浏览器详细信息的navigator对象浏览器加载页面的详细信息的location对象提供用户显示器分辨
2021-04-19 21:57:11
87
原创 bpmn.js 流程基本使用
实际项目需求:我们公司的项目需求不是一般的审批流,而是通过构建流程 然后后端通过Flowable流程引擎执行过后给出结果(比如获取参数执行流程然后输出结果 或者中间穿插分支 根据条件走不通分支 输出结果)bpmn的实现机理:Flowable和bpmn之间通过协商好的xml格式数据进行沟通. Flowable通过jar包或者自己的api进行解析xml进行流程执行 bpmn通过页面拖拽输入输出 生成约定好格式的xml (json转化xml xml转化json)参考资料:https://jue
2021-04-19 11:15:25
2335
2
原创 React路由基本使用
5.01 SPA的理解1.单页面Web应用(single page web application ,SPA)2.整个应用只有一个完整的页面.3.点击页面中的连接不会刷新页面,只会做页面的局部更新.4.数据都需要通过ajax请求获取,并在前端异步展现5.01.2路由的理解.1.什么是路由?1)一个路由就是一个映射关系(key:value)2)key为路径,value可能是function或者component2路由分类1.后端路由:1)理解:value是function,用来处理客户
2021-04-19 10:13:12
101
原创 react扩展方法 setState lazyLoad Hook Fragment Context Component render props 错误边界 组件通信方式总结
1,setStatesetState更新状态的2种写法 1,setState(stateChange,[callback])----对象的setState 1.stateChange为状态改变对象(该对象可以提现出状态的更改) 2.callback是可选的回调函数,他在状态更新完毕,界面也更新后(render调用后)才被调用 2.setState(updater,[callback])----函数式的setState 1,updater为返回stateChange对象的函数 2.upd
2021-04-17 20:09:14
141
原创 react详解redux进阶-纯函数-高阶函数 redux开发者工具
7.1.1redux是什么 1.redux 是一个专门用于做状态管理的js库,(不是react插件库) 2.他可以在react. angular,vue 等项目中,但基本与react配合使用(vue一般使用vuex管理状态) 3.作用:集中式管理react应用多个组件共享状态 7.1.2什么情况下用redux 1.某个组件的状态,需要让其他组件可以随时拿到(共享) 2.一个组件需要改变另一个组件的状态(通信) 3.总体原则:能不用就不用,如果不用比较吃力才考虑用redux工作流程7.
2021-04-16 19:42:53
531
原创 react精简组件拆分的意义
3.1功能界面的组件化编码流程(组件拆分思想)拆分组件:拆分界面,抽取组件实现静态组件,使用组件实现静态页面效果时间动态组件3.1 动态显示初始化数据3.11数据类型3.12数据名称3.13保存在那个组件?3.2交互(从绑定事件监听开始)3.2组件的组合使用-TodoList功能:组件化实现此功能1.显示所有todo列表2.输入文本,点击按钮显示到列表的首位,并清除输入的文本todolist案例相关知识点1.拆分组件,实现静态组件,注意className,style写法2.
2021-04-12 17:34:37
114
原创 react ajax 兄弟组件之间通讯
4.1.1 前置说明1.react本身只关注于界面,并不包含发送ajax请求的代码.2.前端应用需要通过ajax请求与后台进行交互(json数据)3.react应用中需要集成第三方ajax库(或者自己封装)4.1.2 常用的ajax请求库1,jQuery 比较重,如果需要另外引入不建议使用2.axios:轻量级 建议使用 1)封装XmlHttpRequest对象的ajax 2)promise风格 3)可以用在浏览器端和node服务器端4.2 axios 使用 axios.get(
2021-04-11 17:02:07
75
原创 react运行机制 基本语法 生命周期
1,关于虚拟DOM:1,本质是Object类型的对象(一般对象).2,虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内不再使用,无需真实DOM上那么多的属性.3,虚拟DOM最终会被React转化为真实DOM,呈现在页面上.2.渲染虚拟DOM到页面上 注意jsx语法1.定义虚拟DOM时,不要写字符串2.标签中混入js表达式要用{}.3.样式的类名指定不用class要用className,4.内联样式要用style={{key:value}},5.只有一个根标签.6
2021-04-05 21:10:41
189
原创 算法排序 1-4
1,冒泡排序 //冒泡排序 用前面和后面的数进行对比 如果前面大于后面就交换顺序 function bubbleSort (arr){ for (let index = 0; index < arr.length-1; index++) { for (let indexson = 0; indexson < arr.length-1; indexson++) { if(arr[indexson]>arr[in
2021-03-05 10:34:32
131
2
原创 个人记录 es6 ...用法
es6的扩展运算符 … 可以对对象进行扩展运算 也可以对数组进行扩展运算1.对象的扩展运算 记住一句话对象的扩展运算符… 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中.let bar = { a: 1, b: 2 };let baz = { …bar }; // { a: 1, b: 2 }boject.assign 用于对象的合并 将原对象的所有可枚举属性复制到目标对象中.如果目标对象中与原对象有同名属性,活多个源对象有同名属性,则后面的属性会覆盖前面的属性,同样,如果用户自定义
2021-02-04 16:48:47
85
原创 记一次多文件上传 使用element框架的实例 不显示进度条 提交按钮自己控制
效果文件上传的时候未完成不允许提交表单 显示上传进度(不能覆盖element不然没有上传进度条)上代码<el-upload :on-progress="handleprogress" class="upload-demo" action="https://www.chineseafs-tc.org.cn/cky-rest/upload/upload"
2020-11-20 17:51:44
569
原创 需要循环中的异步请求返回结果全部完成后进行后续逻辑
实际场景中 碰到一个问题 就是在一个数组中进行循环 当满足某些条件时进行异步请求 然后把请求返回的数据进行拼接 然后进行后续操作 如果单纯的在for循环里面进行 就会出现 有的数据还未完全返回 但是已经进行了后续逻辑操作 这时候需要个小技巧 递归进行循环 直到所有数据加载完成才后续进行下列代码的for循环套for循环比较恶心 因为需求比较奇葩 所以就不多说了…//递归异步请求 直到所有请求都完毕 然后掉后续借口 不然数据会混乱 querylist(i, element) { if (i
2020-10-26 11:41:45
1415
原创 vue 使用qiniu上传文件到七牛服务器(视频 文件 图片.) 带有真实进度条展示 切记下载最新版qiniu-js!!!!!!!!!!!!!!!!!
**切记下载最新版qiniu-js!!!**需求效果html代码 <div class="f2-sub_btn"> <van-button type="primary" block> <span>开始录制视频</span> <input type="file" accept="
2020-10-16 10:36:55
742
原创 vue 使用视频流 formdata上传视频文件 并且限制视频大小 格式
需求代码<div class="f2-sub_btn"> <van-button type="primary" block> <span>开始录制视频</span> <input type="file" accept="video/*" clas
2020-09-29 10:54:30
2034
原创 js 图片转base64码后 再对base64码进行压缩 然后传给后台 无限压缩 直到符合输出码率
kejiang 1 html <div> <img :src="url" alt class="el-upload-list__item-thumbnail" />
2020-09-29 10:49:37
471
原创 vue中图片转化base64
需求页面直接上代码 //上传图片信息保存在数组中并且回显 change(event) { let file = event.target.files[0]; let windowURL = window.URL || window.webkitURL; //图片格式为PNG或JPG且小于5M if ( /\.(jpg|jpeg|png|JPG|JPEG|P
2020-09-22 14:42:49
1881
原创 ant-design form表单校验方式 不同于 form-model
1需求.对form表单进行非空和指定规则校验2,写html部分data指定表单3,在methods中指定校验规则.4.最后提交的时候惊醒表单验证. 通过了在提交
2020-09-17 11:07:22
1683
原创 MySQL 学习
MySQL 关系型数据库管理系统1.下载安装https://www.mysql.com/ 官网2安装因为我是安装的msi版 所以安装过程直接一路next
2020-09-09 22:50:41
314
原创 学习MySQL+Navicat 02
1,主键的用处:保证数据的唯一性,一个表里面只能有一个主键!一个主键可以同时约束好几列!create table t1( nid int(11) not null auto_increment, pid int(10) default null, num int(11) default null, primary key (nid,pid) //这个意思是定义了一个主键 由nid和pid共同组成主键)engine=innodb default charset=utf8 数据行的增删改查
2020-09-09 22:49:44
54
原创 学习MySQL 03
上节回顾:1,增删改查insert into name values(‘root’),(‘xxx’)insert into name select id from tab2;3.自增起始值(能修改 自定义 )步长:-session-global4.unique 唯一索引 表示同一列东西只能出现一次. 不能重复.\id name(unique) email(unique)联合唯一索引id name email unique(name,email)1 11 21 1(不能出
2020-09-09 22:49:26
84
原创 ant-design 使用中出现的bug或者问题总结
1,使用tree树形结构时 如果设置自动展开全部 但是数据是异步获取到的则不会展开.因为标签创立的时候已经走过了 所以不会展开 这时候需要现有数据 再有dom结构则需要加这里的作用是用有没有数据或者其他条件来判断if 创建不创建.相当于初始化.2,...
2020-09-04 15:55:16
871
转载 vue中使用mixins异步方法获取参数的获取
当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下：mixin中组件中控制台解决方案：不要返回结果而是直接返回异步函数mixin中组件中控制台...
2020-09-03 09:56:31
1993
3
原创 vue中mixins使用原理详解
混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。1.把要用的方法抽出来 写一个js 然后暴露出去 里面的参数以及this 都相当于组件注入 可以全局调用import { mapActions, mapState } from "vuex";export default { props: ["itemdata"], data() { return
2020-09-03 09:50:44
4073
1
原创 学习MySQL 02.
1,自定义起始值show create table t1 \G //查看创建表的语句 \G是表示竖着看alter table t1 auto_increment=2;//这里的修改可以使表内自增起始值变为自己想要的任何数字. 哪怕表内被delete 删空了 但是起始值还是2.当时用自定义时 查看语句会发现有自增语句自动添加了例子:自定义个20为起始值的语句 然后insert into 一条 就从20开始新增了.2,设置自增列的步长基于会话级别:(一次登录就是一次会话), 开启两个cmd窗
2020-06-21 15:48:22
96
原创 ant中vue-table的使用(排序 搜索筛选)
官网api https://www.antdv.com/components/table-cn/虽然用法很多 但是很多API并没有写出实际的例子并且原来我用的element 到这里初次使用很难看得懂,.<a-table :columns="columns" // 表头 :dataSource="data" // 数据源 :loading='loading' // 加载loading :pagination="pagination" // 页脚 :scroll="scrol
2020-06-19 17:10:39
6770
原创 学习MySQL+Navicat
关系型数据库:互相之间有约束 强类型关系的 先A才能B否则报错 sqllite,db2MySQL非关系型数据库:内部没有很多的约束 只要能存数据就行 MongoDB,redisinnodb 支持事务,原子性操作.myisam 不支持事务 读取快auto_increment 表示:自增primary key 表示约束(不能重复且不能为空),加速查找.例子:清空表: delete from t1; truncate table t1; (穿kei特)也是清空表的意思. 比del
2020-06-17 17:26:29
271
转载 VSCODE使用大全 转载
https://blog.csdn.net/weixin_45601379/article/details/100550421
2020-06-09 14:56:43
177
原创 VUE复习深入学习13.深入响应式原理,底层探究
数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”
2020-06-08 17:34:35
135
原创 VUE复习深入学习12.状态管理 VUEX 服务端渲染
状态管理简单状态管理起步使用经常被忽略的是，Vue 应用中原始 data 对象的实际来源——当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享：var sourceOfTruth = {}var vmA = new Vue({ data: sourceOfTruth})var vmB = new Vue({ data: sourceOfTruth})重要的是，注意你不应该在 action 中
2020-06-08 17:02:49
135
原创 VUE复习深入学习11.渲染函数 & JSX
渲染函数 & JSX节点、树以及虚拟 DOM<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。上述 HTML 对应的 DOM 节点树如下图所示：每个元素都是一个节点。每段文字也是一个节点。甚至注释也
2020-06-08 14:45:55
207
原创 修饰符.sync的用法
一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？ 简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop。具体如下：// info.vue组件定义了一个value 属性， 和一个valueChanged事件<template> <div> <input @input="onInput" :value="value"/> </div></template>
2020-06-08 10:46:02
466
原创 VUE复习深入学习10.可复用性 & 组合 mixin!!!!!!
混入基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。选项合并当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。var mixin = { created: functio
2020-06-05 14:43:34
323
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人