土豆逆袭la-优快云博客

原创 monaco editor vue2项目简记

monaco editor 编辑器的简单使用

2023-03-02 10:08:00 457

1.arr.push() 从后面添加元素，返回值为添加完后数组的长度；let arr = [1,2,3]console.log(arr.push(4)) // 4console.log(arr) // [1,2,3,4]2.arr.pop() 从数组后面删除元素，只能是一个，返回值是删除的元素；let arr = [1,2,3]console.log(arr.pop()) // 3console.log(arr) // [1,2]3.arr.shift() 从数组前面删除元

2022-01-17 15:00:45 421

原创 provide inject 传值用watch 监听

爷爷组件grandPa: provide() { return { treeDataObj: this.treeDataObj //传入一个可监听的对象 }; }, data() { const that = this; return { treeDataObj: { list: [] //传入一个可监听的对象一个可监听的对象，那么其对象的 property 还是可响应的,实时监听改变 }, // 树no

2021-11-17 10:56:07 3035

原创 2021-09-26深拷贝错误记录(js更改拷贝数组的值，而不改变原数组 )

拷贝在前！！！才能做到隔离js更改拷贝数组的值，而不改变原数组的方法总结方法一利用ECMAScript 6 的展开运算符 let arr1 = [1, 2, 3], arr2 = [...arr1];arr2.splice(0, 1); console.log(arr1);console.log(arr2); 方法二利用json格式化 let arr1 = [1, 2, 3], arr2

2021-09-26 15:00:10 287

转载 vuex页面刷新后数据丢失的方法页面刷新后数据丢失的方法

vuex页面刷新后数据丢失的方法页面刷新后数据丢失的方法1. 原因原因（1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。（2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。（3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。2. HTML5提供的提供的2种客户端存储数据的新方法种客户端存储数据的新方

2021-08-17 14:46:59 908

原创 vue用Object.defineProperty手写一个简单的双向绑定的示例

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>双向绑定</title></head><body> 手写一个简单双向绑定<br/> <input type="text" id=

2021-06-11 10:23:08 191 1

转载 flex属性-flex:1到底是什么

flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。推荐使用此简写属性，而不是单独写这三个属性。flex-grow：定义项目的的放大比例； 1. 默认为0，即即使存在剩余空间，也不会放大； 2.所有项目的flex-grow为1：等分剩余空间（自动放大占位）； 3.flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍;2.flex-shrink：定义项目的缩小比例； 1. 默认为1，即如果空间不足，该项目

2021-05-17 09:42:15 1032

原创小程序图表u-charts

图表的插件库有很多echarts ,F2,，uCharts …echarts 更适合应用于后台管理系统或者pc 端,而且比较漂亮，功能也比较全乎当小程序使用echarts 并且引用echarts 他会提示（文件太大）然后报错，虽然不影响图表实现，但是还有一个弊端就是canvas是原生组件，级别太高，当打开模态框或者抽屉会盖在抽屉之上...

2021-05-06 15:10:03 401

原创日常笔记

1.vue无缝滚动插件：vue-seamless-scroll地址：vue-seamless-scroll2.小程序图表使用U-charts地址：u-chartscanvas是原生组件级别最高，小程序使用echarts和F2都不能解决图标会覆盖在模态框上的bug,ucharts可以，u-charts 转化图片的方法只对原生的canvas标签起作用3.3d拓扑图：3d-force-graph4.ant-design-vue a-table合并表格行和列...

2021-03-01 10:24:27 291

原创 ant-table表合并行和合并列

以下是合并行，合并列时把所有的rowSpan 换成colSpan1.html—table引入(:dataSource=“makeData(dataSource.data)”)<a-table :scroll="{y: dataSource.rowsHeight,x:1800}" :customRow="customHover" bordered :columns="columns" :dataSource="makeData(dataSource.data)"

2021-02-03 14:51:20 839

原创 3D图

一：安装依赖插件1.安装3d-force-graphnpm i 3d-force-graph2.安装three.jsnpm i three3.文本节点需要安装spriteText(可选)npm i three-spritetext二：3d-force-graph 按官方demo写在自己项目里gitHub地址：https://github.com/vasturiano/3d-force-graph如图所示：可根据自己需要找到需要的demo文件，画出基本的3d模型；**Note:1

2020-11-18 17:26:19 1092

原创 LivePlayer H5播放器（实时视频和历史视频）

1.安装依赖：npm install @liveqing/liveplayer2.vue.config.js配置:const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = { configureWebpack: { plugins: [ new CopyWebpackPlugin([ { from: 'node_modules/@liveqing/

2020-08-14 14:14:14 3651 2

原创好用Ip正则，拿走不谢！！

if (form.sbip != ''){ let sbip = form.sbip; let pattern = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ let result=pattern.test(sbip); ...

2020-07-20 17:06:28 198

原创 ant-design-vue:table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩

项目需求：默认展开所有树结构；（展开之后点击折叠按钮仍然可以搜索）ant-design-vue有个bug：table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩，然后我试了defaultExpandedRowKeys也只会在首次加载起作用expandedRowKeys：展开的行，控制属性字符串数组defaultExpandedRowKeys：默认展开的行字符串数组两个数据类型都一样，功能相同，唯一区别时一个是默认的只会初始化加载依此，一个是可控的数组内的存值是要展开的

2020-07-17 14:15:51 6642 3

原创 ant design vue嵌套子表格编辑子表无法打开编辑状态

可能是由于vue的dom状态未及时更新，采用下面强制刷新一下就可以了，例如：我这里点击编辑，编辑状态未显示：this.$forceUpdate() // 强制刷新，因为数据层次太多，render函数没有自动更新，需手动强制刷新。...

2020-07-08 10:31:03 512

原创多行文本的缩进两格（带序号列表也适用）

css中text-indent属性可以使每个段落首行开头文字缩进，如缩进2个文字距离样式。p{　　text-indent: 2em; /*em是相对单位*/}注：em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。那如果我们想让第二行缩进一格呢：``p {　　text-indent: -2em;　　margin-left: 2em;}**设置text-indent: -2em;以后p标签中第一行文字向左偏移，这样第二行开

2020-07-08 10:25:03 1928

原创 ant design vue嵌套表格子表无数据时不显示展开图标

根据用户体验，这个是必须实现的。。查了一下官网文档用expandIcon 是一个函数，具体用法如下：1.a-table 标签里定义：expandIcon=“expandIcon” 该方法，代码如下：<a-table :scroll="{y: dataSource.rowsHeight}" rowKey="id" @expandedRowsChange="expandedRowsChange

2020-07-08 10:16:40 6116 2

转载 MVVM框架和jQuery的区别

1 一个MVVM框架和jQuery操作DOM节点有什么区别？JQ操作DOM节点是要用$符号对dom节点进行属性改变，事件注册，事件触发，例如，Hello, BatMan!var name = 'Homer';$('#name').text...

2020-06-09 15:11:21 1708

转载浅拷贝与深拷贝

浅拷贝与深拷贝一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点：直接存储在栈(stack)中的数据引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。二、浅拷贝与深拷贝深拷贝和浅拷贝是只针对Object和Array这样的引用数据类.

2020-06-09 14:58:40 238

转载 Cookie、session和localStorage、以及sessionStorage之间的区别

====== 一、Cookie、session和localStorage的区别 cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后

2020-06-09 14:56:45 226

转载内存泄漏怎么处理

什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能:变慢，延迟大等，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。内存泄漏的识别方法1. 使用快捷键 F12 或者 Ctrl+Shift+J 打开 Chrome 浏览器的「开发者工具」。2. 选择 Performance(老版为T

2020-06-09 14:53:04 2779

转载 Web前端性能优化——如何提高页面加载速度

1、合并Js文件和CSS将JS代码和CSS样式分别合并到一个共享的文件，这样不仅能简化代码，而且在执行JS文件的时候，如果JS文件比较多，就需要进行多次“Get”请求，延长加载速度，将JS文件合并在一起后，自然就减少了Get请求次数，提高了加载速度。 2、Sprites图片技术Spriting是一种网页图片应用处理方式，它是将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少

2020-06-09 14:50:21 1977

原创单页面与多页面优缺点

**单页面应用（SPA）**，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。**多页面（MPA）**，就是指一个应用中有多个页面，页面跳转时是整页刷新**单页面的优点**1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小2，前后端分离3，页面效果会

2020-06-09 14:26:35 472

转载 Vue.js 过滤器的基本使用（filter）

Vue.js 过滤器的基本使用（filter）vue中的过滤器分为两种：局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例 <div id="app"> <p>{{ ms...

2020-06-09 14:00:03 1252

转载 Vue项目中跨域问题解决方案

方法 1.后台更改header 2.使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） 3.Jquery jsonp后台更改headerheader('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式使用http-proxy-middleware 代理解决（项目使用v...

2020-06-09 13:55:06 2671

原创为什么我vue里明明值改变了，watch监听不到

为什么我vue里明明值改变了，watch监听不到这个是boxSelect 对象，我把1的值改成true后，watch没有监听到官方没有解释清楚。我一开始boxSelect赋值为空对象，这样后续添加上去后他就监听不到了。只能监听到一开始赋值对象里面的属性。还有个解决办法就是将一个对象赋值给这个boxSelect对象。你保存了吗？是不是有缓存？官方文档讲的很清楚，监听是注册的时候对属性批量使用Object.defineProperty方法实现的，所以后添加的属性不会监听给空对象添加监听的属性要通...

2020-05-28 11:08:50 5612

空空如也

空空如也