- 博客(134)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 关于Vue中Diff算法详解
vue双向绑定(Diff)原理：当数据发生改变时，发布消息给订阅者watcher， 然后watcher就会调用patch给真实DOM打补丁，更新相应的视图。
2023-01-31 16:57:55
1630
1
原创 关于Vue中keep-alive的作用是什么？怎么使用？
比如：有一个列表页面和一个详情页面，那么用户可能会经常执行打开详情 => 返回列表 => 打开详情，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染页面，从而节省内存开销。是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁。用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。
2023-01-31 15:54:51
2836
原创 React中的ref属性的使用
关于React中的ref属性的三种使用方法，方法一：字符串形式的ref，方法二：create形式的ref，方法三：回调函数形式的ref。
2022-09-14 10:59:21
546
原创 React兄弟组件间的通信
PubSub.subscribe(‘消息名’, (a, b) => {})PubSub.publish(‘消息名’, data)
2022-09-13 09:36:35
439
原创 vue3 父子组件间的通信
/这里触发的方法名要和父组件中@符后面的名称一样。//触发父组件中的方法，并把值以参数的形式传过去。"子组件向父组件传送的信息""父组件传给子组件的值"
2022-07-20 17:51:03
1166
原创 vue3 父子组件之间的方法调用
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L7ssoWOR-1658307849412)(C\Users\zll\AppData\Roaming\Typora\typora-user-images\1658303809058.png)]的组件是默认关闭的，也即通过模板ref或者$parent链获取到的组件的公开实例，不会暴露任何在。2.1父组件的内容。2.2子组件的内容。2.1父组件的内容。2.2子组件的内容。......
2022-07-20 17:02:25
3124
原创 vue3+element-plus Dialog对话框的使用 与 setup 写法的使用
/ 定义控制弹窗显隐的变量。"监听flag值得变化:"// 接受父组件传过来的值。'你点击了确定按钮''你点击了确定按钮''你点击了确定按钮'// 将变量暴露出来。
2022-07-20 15:24:10
11647
11
原创 关于javascript数字精度丢失的解决办法
分析原因例如下面的例子：我们在计算 0.1 + 0.1 的到的结果是 0.2，但是计算 0.1 + 0.2 的结果并不是0.3，而是我们在计算 1.2 - 1 的结果并不是0.2，而是不过这并不是JavaScript独有的，其他编程语言也会存在同样的问题。既然这样，那能不能防止精度不准确呢？？？解决办法：我们可以使用凑整后再使用，比如计算接下来我们封装成方法使用......
2022-06-13 16:14:07
1116
原创 关于动态贴图始终跟随相机角度的实现
针对上一篇博文抛出的问题，下面来说说如何解决我们知道三维场景是可以随意旋转角度的，所以我们的动态贴图一定不能将角度写死，或者说我们需要将动态贴图跟随场景的旋转而旋转，这样就能达到动态贴图的正面始终面向我们的效果，这样就不会出现当场景旋转至某一角度时看不见动态贴图的现象了。但是想想这样并不好实现，我们知道相机在三维场景中就相当于一双眼睛一样，它在哪个位置我们就可以看到场景中哪个位置的物体。这么说，我们不就可以同过相机来实现我们的功能了吗？只需将动态贴图始终跟随相机的角度不就可以达到我们想要的效果了吗？接
2022-05-18 15:35:00
618
原创 关于uni-app打包的步骤
首先在准备打包前配置好我们的APP相关配置，在manifest.json中。打包的证书别名、密码、证书文件是不可少的证书的生成步骤可以参考 https://ask.dcloud.net.cn/article/35777安装jre环境安装完成后，打开命令行（cmd），输入以下命令：d: set PATH=%PATH%;"C:\Program Files\Java\jre1.8.0_201\bin"第一行：切换工作目录到D:路径第二行：将jre命令添加到临时环境变量中生成签名证书
2022-05-16 16:18:01
3692
原创 关于前台封装实现zip文件流的下载功能并如何使用
前台封装 zip 文件流的下载并如何使用在前端开发过程中有关于文件下载的基本是后台返回文件地址指向的 url ，前端通过 window.open 进行下载，但是对于后台返回 zip 文件流如何进行下载呢？接下来 来看看如何实现。1. 后台返回 zip文件流2. 前台使用axios请求后台接口获取zip文件流请求前的准备axios的 responseType 设置为blob将返回的zip文件流转换为blob对象解析，并指定type为：“application/zip;charset-UTF
2022-05-14 14:39:20
2783
原创 关于使用threeJs开发3d应用的相关爬坑记录
问题一：关于使用轨道控制器：THREE.OrbitControls 出现的问题。问题描述：当场景使用轨道控制器后，致使页面中的输入框或单选或复选按钮全部失效的问题分析问题原因：该问题是由于轨道控制器的工作原理造成的，当模型不是全屏状态(body中)渲染，而是在局部渲染时会出现该问题。解决办法是：// 第二个参数默认为body 如果您的场景是局部渲染的，请确保使用它(即场景渲染的容器)controls = new THREE.OrbitControls(that.camera, that.re
2022-03-30 08:38:26
1160
3
原创 关于如何在移动端正确的显示Pdf文件
1. 下载需要的依赖npm install vue-pdf 或 yarn install vue-pdf2. 引入组件import pdf from 'vue-pdf'; // 引入pdf组件3. 注册组件// 注册pdf组件components: { pdf},data() { return { pdfUrl: '', }},methods: { getPdfInfo() { this.$http.get('/sys/user/pdf/info')
2022-03-17 14:54:31
1077
原创 关于ThreeJs纹理贴图动画的实现
效果图：实际效果，图中的贴图是可以动的一、准备工作1、静态文件2、首先你要引入相关依赖：threejs核心依赖: http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js兼容检测器: http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js运行帧数监测器: http://www.yanhuangxueyuan.com/ver
2022-02-28 13:52:23
2317
2
原创 关于解决git提交报错pre -commit hook failed (add --no-verify)的问题
初始化一个新版本库时，Git 默认会在这个目录中放置一些示例脚本。这些脚本除了本身可以被调用外，它们还透露了被触发时所传入的参数。(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。这个钩子在得到提交消息和开始提交前被调用。文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找)，再进入hooks文件夹，删除。钩子都被存储在 Git 目录下的 hooks 子目录中。钩子被启用时，如果它发现文件尾部有空白行，那么就会中止此次提交。这个钩子可以用来在提交前检查代码错误，相当于。, 提交代码的时候,
2022-02-18 17:29:42
9542
原创 简述vue项目中指定某个DOM进入全屏模式与退出全屏
vue项目中指定某个DOM进入全屏模式与退出全屏首先安装全屏插件npm install [email protected] --save在使用的页面中引入import screenfull from ‘screenfull’我们指定某个DOM元素的id，然后获取这个DOM节点methods: { // 定义全屏方法，通过按钮点击触发 fullscreenHandle () { const element = document.getElementById('ta
2022-01-19 13:35:17
1166
2
原创 简述前端如何导出PDF的功能实现
前端导出PDF首先，你需要安装相关插件或依赖npm install html2canvasnpm install jspdf在项目的 src/utils 目录下新建tools.js文件，写入以下内容import html2canvas from 'html2canvas';import JsPDF from 'jspdf';export default { /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName
2022-01-14 16:09:48
1038
5
原创 基于 Element 表格组件进行二次封装支持表格拖动排序
基于 Element 表格组件进行二次封装首先来看张截图在项目 views 目录下新建表格展示页面<template> <div class="container"> <!-- 参数配置请看组件的 `props` 部分 --> <my-eltable ref="table" id="printTable" :fit="true" :size="'small'" :isSho
2022-01-13 13:48:04
624
原创 基于 Element 表格组件进行二次封装
基于 Element 表格组件进行二次封装首先来看张截图在项目 view 目录下新建表格展示页面<template> <div class="container"> <my-eltable ref="table" id="printTable" :fit="true" :size="'small'" :isShow="isShow" :loading="loading"
2022-01-11 14:13:17
775
原创 基于 vue 项目来简单了解下 webscoket 与后台实时通信的使用
基于 vue 项目来简单了解下 webscoket 与后台实时通信的使用首先：初始化 weosocketcreated() { // 初始化加载WebSocket this.initWebSocket()}// 初始化WebSocket方法methods: { initWebSocket() { if (typeof WebSocket === "undefined") return alert("您的浏览器不支持WebSocket") // websocket地址
2022-01-10 14:38:24
959
原创 记录vue开发中封装请求，支持请求拦截和响应拦截
定义 request.js 文件，我们可以放在项目的公共文件夹下，我放的位置在 src/utils/request.js下面是逻辑代码：import axios from 'axios'import Cookies from 'js-cookie'import router from '@/router'import qs from 'qs'import { clearLoginInfo } from '@/utils'import isPlainObject from 'lodash/isP
2021-11-05 17:01:58
337
1
原创 记录vue开发中使用表格拖动
来看两张效果图，首先来看保存前的数据再看保存后的数据其原理简单来说就是，改变了对象数组的某一项在原数据中所在的位置，比如：将数组下标为0的数据和下标为1的数据更换了位置，相当于排序一样的逻辑，然后再把更换后的新数据保存到后台。接下来看使用方法，首先安装相关依赖npm install lodash // 用于表单提交时的防抖节流npm install sortablejs // 表格拖动相关依赖npm install vxe-table // 支持拖动的表格在使用的页面中引入import
2021-11-05 11:02:02
931
3
原创 关于element图片上传
1. 采用 :http-request="" 自定义上传的方式<el-upload action="" list-type="picture-card" :file-list="fileList" :http-request="httpRequest" :on-success="handleSuccess" :on-remove="handleRemove"> <i class="el-icon-plus"></i></el-upl
2021-11-05 09:17:04
1660
原创 ThreeJs DRACO压缩并加载gltf模型的爬坑记录
采用DRACO压缩并加载gltf模型的用法，以VUE开发为例首先，在官方文件中找到对模型进行压缩 所需要的文件 位置大概在项目的examples/js/libs/draco/gltf下，我们可以放在项目的public目录下，如下图所示：下面来安装gltf-pipeline；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。缩小体积，更快的加载。npm i -g gltf-pipeline用法：在命令行或终端中输入以下命令，格式为：gltf-pipeline -i 原始文件
2021-10-27 14:45:55
5811
18
原创 前端开发代码规范
声明前端代码规范规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。一、编程规约(一)命名规范1.1.1 项目命名全部采用小写方式， 以中划线分隔。正例：mall-management-system反例：mall_management-system / mallManagementSystem1.1.2 目录命名全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数正例： scripts / styles / compone
2021-09-15 10:52:29
396
2
原创 关于在vue项目中封装快捷工具的方法
话不多说，简单粗暴，直接上代码 ！！！首先根据项目开发规范在项目中新建tool.js文件，比如：我放在了项目中的src/utils/文件夹下export default { getDateSpan: function (action) { var star_time, end_time; if (action == "today") { star_time = this.getDateBefore(0) + " 00:00:00" end_time = t.
2021-09-11 15:22:23
311
原创 关于在vue项目中引入ThreeJs相关API和模型的几种方式
1. 引入Threejs我们可以在public下的index.html文件中引入：2. 相关依赖文件可以在main.js文件中引入3. 模型可以放在public文件夹下新建static文件夹放入其中function loadGlt(obj) { //为模型添加添加天空盒子环境贴图反光材质 var path = 'static/surround/' var urls = [ path + 'you.jpg',
2021-09-06 17:22:51
2353
原创 关于threejs灯光的使用
现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中。在ThreeJS中有几种光源，去模拟现实环境。最常见的四种分别为：环境光( AmbientLight )：笼罩在整个空间无处不在的光点光源( PointLight )：向四面八方发射的单点光源聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源平行光( DirectinalLight )：平行的一束光，模拟从很远处照射的太阳光其他还有半球光光源( HemisphereLight )，平面光光源(.
2021-08-19 12:31:07
5654
原创 关于threejs天空盒子的使用
创建场景添加天空盒子相关代码如下：var scene = new THREE.Scene() //创建场景 var path = 'static/surround/' //注意加载的图片是有顺序的，分别是：右 => 左 => 上 => 下 => 前 => 后 六张宽高、格式相同的图片 //我们可以想象一下一个正方体盒子，而我们的模型就位于正方体盒子内部一样。 var urls = [ path + '4.jpg', path +
2021-08-19 11:51:30
1301
原创 关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用
首先来看下THREE.WebGLRenderer可以设置的参数如下：var renderer = new THREE.WebGLRenderer({ //创建渲染器对象 // canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布， alpha: false, // 画布是否包含alpha（透明度）缓冲区。默认值为false。 premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默
2021-08-18 19:56:18
8810
原创 浅谈Javacript浅拷贝和深拷贝的实现
浅拷贝和深拷贝如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝；如果B没变，那就是深拷贝，深拷贝与浅拷贝的概念只存在于引用数据类型。1. 浅拷贝var obj1 = { name: "帅哥", age: 20, speak: function () { console.log("我是" + this.name); }};var obj2 = obj1;// 当修改obj
2021-07-30 15:49:18
384
转载 关于Promise API 的实现
Promise API 的手动实现一、Promise 手写原理：利用发布者订阅者模式构造函数接收一个 executor 函数，并会在 new Promise() 时立即执行该函数then 时收集依赖，将回调函数收集到 成功/失败队列executor 函数中调用 resolve/reject 函数resolve/reject 函数被调用时会通知触发队列中的回调ES5写法(function(window) { const PENDING = "pending"; const RESO
2021-06-24 14:48:02
141
原创 Bootstrap中的switch开关组件
一、简介Bootstrap Switch是一款通过复选框美化实现的一款开关控件，可以给选择框设置类似于开关的样式，它是依赖于Bootstrap的一款插件。二、怎么下载官网地址 :GitHub下载地址 : 三、怎么导入<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-switch.min.css">&
2021-06-17 17:35:40
5133
5
原创 关于git克隆指定分支的使用
1. 使用git怎么克隆指定分支代码在开发的过程中我们上传到 git 远程仓库的代码，其master主分支一般是用来做项目上线的时候用的代码，我们在本地开发的代码一般情况下是以直接往主分支上面推送代码的，这时就需要我们创建自己的分支，在写完某个功能或一段代码后需要推送到git远程仓库的时候将代码推送到分支上。后来如果有其他开发者想要参与到项目的开发工作中时，为了保证主分支代码不被搞乱这时就不能直接克隆主分支代码，需要克隆与主分支代码保持同步的一个分支代码，但是要怎么才能直接克隆指定分支代码呢？？下面就
2021-06-02 21:17:48
13039
原创 git分支的简单使用
这里我使用git bash here命令行创建分支，当然在电脑的终端也是ok的：打开命令行工具cd 切换到自己的项目中，执行git checkout -b '分支名'可以创建分支并自动切换到创建的分支，接下开我们就可以在项目中码代码了，当你完成一个具体的功能想提交代码的时候，我们可以在命令行执行一下代码：git add . 提交跟踪到的变化的文件git commit -m '描述' 暂存跟踪到的变化的文件git push origin '分支名' 将跟踪到的变化的文件提交到远端执行以上三个步骤
2021-03-11 17:18:17
93
原创 webpack学习总结
1. webpack打包原理：把所有的依赖打包成bundle.js文件，通过代码分割成单元片段并按需加载。2. bundle，chunk，module分别是什么：bundle: 由webpack打包出来的文件；chunk：webpack在进行进行模块依赖分析的时候由代码分割而出来的代码块；module：开发中的单个模块。3. 什么是loader，什么是pluginloader用于加载一些资源文件，由于webpack只能打包符合common.js规范的js文件，而对于css样式文件，html网页
2021-03-11 15:00:17
170
2
原创 uni-app中高德地图根据地址获取逆解析经纬度
准备工作：注册高德地图开发者账号创建应用添加应用key，填写ley名称(可随便，最好与创建应用的名称保持一致)，然后选择Web端(JS API)，，点击提交提交后如下图随时所示：，我们需要的是 字符转串key复制key，返回我们会的项目，在项目的manifest.json => APP模块配置中勾选Maps地图，将我们复制的key填写进去在浏览器地址栏输入地址：https://webapi.amap.com/maps?v=1.4.15&key=你自己的key&plugi
2021-03-10 12:45:28
3086
4
原创 在微信小程序中使用微信支付功能
相关配置部分不在多说：下面只看代码逻辑部分： // 调用uniapp API uni.getProvider 获取服务供应商 uni.getProvider({ /* 获取服务类型，可选值如下: * @param share: 分享 * @param oauth: 授权登录 * @param push: 推送 * @param payment: 支付类型 */ service: 'payment', success: (res) => { /* * @
2021-01-24 11:01:25
1477
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人