- 博客(24)
- 收藏
- 关注
RSS订阅原创 ts笔记记录
tsts不能直接被浏览器解析，需要编译后，变成js，才可以被浏览器解析ts更安全，例如：一些设置了只读属性的，readonly的属性值，不可更改ts中的枚举方法，既可以根据key找到value，也可以根据value找到key，而原生js中如果根据value找key，则需要遍历...
2022-01-14 14:09:19
260
原创 计算属性和监听属性的区别
computed： 同步处理数据，有缓存属性，依赖于其他数据，一般用于同步处理数据或者格式化数据的场合，比如说购物车统计，一个数据依赖于一个或者多个数据watch：没有缓存属性，不依赖其他数据，关联数据，但是不依赖数据，一般用于处理一些数据或者同步或者异步事件的派发，主要适用于与事件和交互有关的场景，一个数据同时触发多个事务...
2021-04-19 09:22:22
982
2
原创 跨域
1. 为什么会有跨域问题？浏览器的一种保护机制，为了防止用户个人信息等被攻击窃取，所以浏览器根据同源策略产生了跨域问题，服务器是没有跨域问题的，请求服务器，服务器都会返回数据，只是浏览器在拿到服务器返回的数据时，会不会返回给axios或者ajax请求的success而已浏览器产生跨域问题，一般是报错CORS policy2. 跨域怎么产生的？只要一个请求URL中的协议，域名，端口三者之间任意一个与当前页面的URL不同，即为跨域3. 跨域的几种解决办法JSONP由于script标签没有
2021-04-12 16:00:31
148
2
原创 数据可视化之地图
1. 在项目中引入Echarts在index.html文件中引入echarts.min.js文件在main.js文件中挂载Echarts到vue原型在组件中通过axios获取到地图的矢量数据，由于地图矢量数据不是在服务器存储，而是在本地存储的，所以要在组件中另外引入axios请求地图矢量数据，并且要调用Echarts的registerMap方法，将地图的矢量数据注册给全局的Echarts对象，然后配置geo（只有地图配置geo，别的图表都是配置series）此处需要注意的是css
2021-04-08 14:08:32
1481
原创 用vue创建项目
1. 创建新项目vue create projectName2. 安装elementUIvue add element-ui下面两个选项都选no? Use scss theme? No? ElementUi i18n options None3. 文件介绍untils文件 —工具文件夹，里面存放工具文件，比如ajax的初始化，表单校验文件src文件夹里面的assets文件用来存放一些图标或者图片src文件夹里面的components文件夹一般用来存放一些公共组件，所有页面都能用的上
2021-04-07 16:00:19
129
原创 vue权限控制
1. 权限的相关概念状态保持：在不发送用户账户名和密码的情况下，后端依然知道是哪个用户在发送请求，一般情况下有三种方式来实现状态保持，cookie，session和token，前后端分离的架构中，token用的比较多token是一堆字符串，用来标识用户的唯一性，为了让后端知道是哪个用户在请求数据，因此在请求头当中，前端一般要将token传给后端2. 前端权限的意义没必要的按钮不显示没必要的请求不发送没必要的页面不显示3. 前端权限控制思路菜单的控制登录之后拿到数据，有两个关键的字段
2021-04-06 11:09:52
228
原创 websocket
websocket和http请求的区别http请求是前端主动向后端发起的请求，当后端数据发生变化时，并不能及时的通知前端，不能保证数据更新的实时性websocket可以保持前端和后端的长链接，当后端数据发生改变，可以立即通知前端，可以保证数据更新的实时性后端的设置前端的配置当后端的服务器关闭之后，前端的onclose事件可以监听到后端服务器关闭了前后端字段约定服务端接收字段约定服务端发送数据字段约定如果接收的数据为getData，即服务器要给前端传递新..
2021-04-02 21:16:35
143
2
原创 Echarts动画
定时器用定时器来动态改变数据，需求是：每页展示五条销量数据，每隔几秒切换当前页数据，整页数据的切换首先，定义当前页和总页数的数据写更新图表方法在更新图表方法中，根据currentPage定义数据展示起始和结束的下标，用数组的splice方法对数据进行截取，截取出当前页要展示的数据，setOption更新图表写定时器方法在定时器方法中，每隔一定的时间，currentPage自加1，然后再调用更新图表的updateChart方法，更新图表获取到数据后，先对数据进行排序，然.
2021-04-01 16:35:57
780
原创 axios
1. 什么是axiosaxios是一个基于promise的HTTP库，是一个已经封装好的ajax的一个库2. axios的特性3. axios的安装4. 引入在main.js文件中引入5. axios请求输出内容6. get请求三种写法，一种无参，两种有参7. post请求post请求有个参数序列化，根据后端的要求转换请求头类型，引入nodejs中的qs，此处是在组件中引入的，项目中应该是在main.js文件中引入post请求也可以有参数，也可以没有参数，不是说pos
2021-03-24 18:07:18
105
原创 vuex的应用
1. mutationsome用来判断是否有满足条件的元素，有的话，返回true，没有返回false，find用来找元素，找到的话，返回第一个符合条件的元素一个用来判断是否有，一个用来找mutation为什么不能直接更改item呢，因为mutation要通过state来修改state中的数据，不能直接改state中的数据在mutation中写异步操作，页面上的数据可以更新，但是调试工具无法检测到数据变化，所以mutation只能写同步操作2. getters总计当页面的选
2021-03-23 21:56:27
111
原创 vuex如何长久保存数据
vuex不是完美的，当刷新页面的时候，整个vue的应用会重新进行初始化，store里面的index.js也会重新进行初始化，刷新之前操作的数据变化也不会保存，如果想要长久的保存起来，需要和本地存储一起结合使用本地存储包括localStorage和sessionStorage...
2021-03-23 21:15:15
1086
原创 数组去重的方法
方法一：用第三方库underscore里的方法，方便快捷方法二：用ES6的set方法，set方法的特点是元素不能重复方法三：indexOf方法，如果不包含这个元素，返回-1方法四：数组的filter过滤方法和indexOf方法结合方法五：利用对象的key值的唯一性，Object.keys将一个对象中的key值全部取到一个数组里，此时数组中的item都是string格式的，要转换为数字方法六：先数组排序，相等的元素肯定会排在一起，比较相邻的两个元素，不相等的话，push到新数组里方法七：两层for
2021-03-19 12:33:46
253
原创 vue中数组的监听
1. 重写数组的某些方法来监听数组变化在将数组处理成响应式数据后，如果使用数组原始方法改变数组时，数组值会发生变化，但是并不会触发数组的setter来通知所有依赖该数组的地方进行更新，为此，vue通过重写数组的某些方法来监听数组变化，重写后的方法中会手动触发通知该数组的所有依赖进行更新数组值会发生变化，但是并不会触发数组的setter来通知所有依赖该数组的地方进行更新2. 当数组中的元素类型为非数组时，继续递归执行数据的监听对数组中的每一项进行观测，如果有的项是对象的话，也更新仅记录...
2021-03-19 09:58:22
621
原创 vue数组变化的限制&解决办法
由于 JavaScript 的限制，Vue 不能检测数组的变化1. vue不能利用索引直接修改一个数组项可以通过vm.$set或者Vue.set或者splice方法来修改数组项2. 删除数组元素删除数组元素，可以用delete方法，或者splice方法，清空数组的话，给splice传递参数03. 数组的push，shift方法等，都可以相应，因为vue对数组的方法进行了重写仅记录...
2021-03-19 09:19:00
706
原创 vuex
1. 什么是vuex？状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。2. 安装3. 引入在store文件下的index.js文件中通过三行引入在main.js文件中的new vue中，引入store，把 store 对象提供给 “store” 选项，这可
2021-03-18 11:08:31
134
原创 diff算法
什么是虚拟dom？虚拟dom是指用js来描述的HTML的结构为什么用引用虚拟dom？因为重新渲染数据会引起dom的重绘和回流（重排），这对性能消耗消耗是非常大的，我们在开发的时候尽量避免重绘和回流。因此vue就引入了虚拟dom，也就是virtual dom，这样可以避免直接频繁操作真实的dom,以此来减少性能消耗。diff算法的守则只比较同一层级，不跨级比较标签名不同，直接删除，不继续深度比较标签名相同，key相同，就认为是相同节点，不继续深度比较通过h函数生成VNode，VNode中包
2021-03-15 13:50:45
197
原创 vue2的响应式原理
vue2的响应式原理首先用observer方法观察data数据如果是普通的数据，string，number，Boolean数据，则直接return target，然后遍历target中的数据，在遍历函数中调用defineReactive方法，在defineReactive方法中调用object.defineProperty方法，在其中设置get和set方法，将数据变成响应式数据，set中会接收newValue，用新值取代老值，而且渲染更新视图2. 如果是data中的对象数据，改变对象中的数据时，
2021-03-15 13:01:08
1231
原创 vue-grid-layout布局设置item最小宽度minW
最近项目中在用vue-grid-layout布局，红色标记部分是title部分，由于要展示文字和时间选择框以及图标等元素，所以宽度不能特别小，否则布局会乱，想办法如何设置item的最小宽度刚开始没有仔细看vue-grid-layout的官方文档，采取的方法是监听元素尺寸，用三目运算符判断宽度小于最小值时设置宽度为最小值，否则设置为元素当前调整宽度，但是不起作用，没找到原因，打印了数据，三目运算符部分确实执行了，但是到页面时最小值仍然不起作用。查看官方文档，发现可以设置minW，因此在layout数据中
2020-12-29 15:13:36
3296
原创 el-table表格中单元格根据不同的数据显示不同的内容
业务需求：进程状态有三种显示状态：运行中，停止，重启，根据后台返回的不同的状态值显示不同的内容这个功能需求很常见，大家应该都没什么问题后来由于执行右边的启动，停止，重启按钮时，需要将进程状态展示位加载的状态，虽然只是加了一个小小的需求，但是实现起来困难很多，因为后台返回的状态码只有三个数据，0, 1，2，分别代表三种状态，刚开始我是用了三个v-if，然后最后一个加载的状态用v-else，只要状态码不是0,1，2，就显示加载状态，但是这个思路并不能实现，因为后台返回的状态码是固定的，我和后台沟通了下，
2020-06-23 17:37:27
3269
原创 el-row，el-col，flex结合布局
记录下用flex和el-row，el-col做的一个布局外层包裹一个div，用于设置高宽，背景色，padding和margin值，元素水平垂直居中用flex布局css样式wrapper里面的元素根据需求设置span的值即可目前总结这么多，随着使用的增加，再完善最终效果如图~...
2020-06-17 09:21:20
9737
原创 总开关和单行分开关的控制与影响事件
项目中有一个switch开关的打开与关闭事件，需求是打开总开关时，所有的分开关都要打开，关闭总开关时，所有的分开关都要关闭，同时，当所有分开关打开时，总开关打开，分开关有一个是关闭时，总开关关闭，这个需求在项目中应该很常见的，网上应该也有很多分享，在此把我的实现方法记录分享一下，有空了也要多学习下大家的实现方法。一. 首先实现的总开关控制分开关当总开关的状态改变时，先判断总开关的状态，如果是打开状态，就用map方法遍历table数据的每个对象的status值，这样就可以实现总开关控制所有分开关的开关
2020-06-16 11:00:29
563
原创 el-table表格popover弹窗中显示Echarts图表
最近的项目中有个需求是需要在table表格中点击每行的某个单元格时，要弹出一个弹窗，弹窗中要插入Echarts图表。展示效果大概如图中所示，样式有点丑，还没完善样式，见谅说说我在实现这个需求时遇到的问题吧一. Echarts画布渲染问题插入Echarts图表时，刚开始的时候图表canvas画布一直无法调节尺寸，渲染出来是正方形，且尺寸无法设定后来在网上查了很多资料，也请教了大佬，找到原因是因为popover弹窗还没完全展开时，Echarts图表的canvas画布已经开始渲染，但是这时获取不到po
2020-06-10 09:45:01
2597
3
原创 elementUI使用之table表格如何给行元素添加点击事件
elementUI使用之table表格如何给行元素添加点击事件刚开始使用elementUI，遇到一个需求，需要给table中的行元素绑定一个点击事件，查看了elementUI的官网文档以及网上的文章，实现了这个需求。官方文档提供的event事件在代码中绑定事件在methods中写方法好了，这样就可以实现了。本篇文章参考了https://blog.csdn.net/...
2020-03-25 11:49:16
4168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人