qq_48795482的博客

在父组件中引用子组件，怎么实现数据的双向绑定，简单的写法，本文介绍两种v-model和.sync修饰符

el-table展开行实现数据懒加载，并尽量减少请求次数

本文教你如何用前端三件套实现：电子签名的绘制和导出

怎么快速给元素进行排序？拖拖拽拽就可搞定，教你在vue2项目中使用vuedraggable组件实现拖拽排序效果。。。

网页加载慢？图片体积过大？使用webpack图片压缩，图片体积直接缩小10倍，加载速度飕飕的！！！

前端发布后，nginx怎么进行静态资源和动态资源的配置，一文帮你搞懂

2、项目中增加vue.config.js。1、manifest.json中配置。

在A页面用navigationTo跳转到了B页面，在B页面用navigationTo跳转到了C页面，在C页面提交表单后，用navigationBack返回到B页面，在B页面的onShow生命周期钩子中请求数据更新状态。但是页面栈中堆积了很多页面，从该页面返回就到了C页面，而C页面是表单提交页面，我们希望从B返到A。从A页面跳转到B页面，然后从B页面跳转到了C页面，在C页面提交了表单之后要返回到B页面，但是此时B页面的状态需要更新，完事之后，我们希望此时在B页面点击返回之后回到A页面。

做了项目想在朋友面前装一装，没有服务器？朋友访问不到？不用急，ngrok帮你解决！

在 Vue 2 项目中，你可以通过配置构建工具（如 Webpack）来启用对 .br 文件的支持。最后，确保你的网站在支持 Brotli 的浏览器上测试，以验证 .br 文件是否被正确加载和压缩。然后，你可以安装 brotli-webpack-plugin 插件来帮助你在构建过程中生成 .br 文件。通过以上步骤，你可以在 Vue 2 项目中启用并使用 .br 文件压缩，以提高网站的性能。minRatio: 压缩比率的最小值，只有当压缩比率达到或超过这个值时，文件才会被生成。步骤 1: 安装必要的依赖。

以静态资源css为例，看到文件大小显著减小，请求时间大大缩短。在http块内，server块外，添加如下配置。

X轴方向动画持续20秒，动画开始直接进入播放5秒时的状态，此时应该在向右运动过程中中间的位置。4、给其他球添加动画样式，通过设置动画的延时时间（正值为延迟播放，负值表示直接进入播放动画n秒之后的状态），可改变球的初始位置。2、想要球动起来，并且沿着椭圆轨迹，要用到运动的合成，同时添加X轴方向和Y轴方向上的动画，同时在过程中改变球的大小和透明度。在旋转的过程中，球的大小，透明度在不断地发生变化，转到前端的时候不透明且最大，转到后面的时候透明度很高且最小。给球绑定鼠标移入事件，鼠标移上，所有球动画停止。

2、表单提交接口，提交表单时，将文件的id和表单信息一块提交给后台，实现文件和表单的绑定。1、后端给前端一个上传接口：进行文件上传，上传成功后，该接口返回文件的路径，名称，id。后端给前端提供一个下载接口，前端调用后，返回二进制文件流。

B 前端处理请求地址，将拿到的地址去掉协议、域名、端口号后，进行请求，这样会将请求发送到你前端页面所在的服务器。场景：出于安全考虑，项目的前端访问地址由原来的http变为了https的地址。将资源请求发送到自己的https的前端服务，通过代理转发到http的静态资源服务器上，然后将拿到的资源以https的形式返给浏览器。A 拿到后端返回的静态资源地址后，不要直接请求，也不会请求成功，因为你前端是https的。C 进行代理配置，给改完的地址随便加一个“头”，类似"/ditu"，改完之后就变成了这样，

试过在弹窗组件中使用自定义按钮，但是给自定义按钮绑定点击事件的时候，突然发现不知道怎么关闭弹窗，尴尬了！解决方法是由之前的设置：maxWidth: "200px",改为maxWidth: "100%"。1、以上是常见参数，今天做项目因为maxWidth属性设置问题，导致弹窗的叉号没有在右侧。3、想实现不同的类型弹窗，有的显示关闭按钮，有的不显示。以上判断了当弹窗内容是视频的时候，才显示关闭按钮。最后只能是在设置弹窗的时候进行判断了。2、修改弹窗关闭按钮颜色。

通常情况下，浏览器的显示比例为100%不变，想要你的图片保持清晰。要么增加图片的原始尺寸，要么减小代码中设置的样式尺寸。3、缩放比例：浏览器的缩放倍数，通过window.devicePixelRatio可以获取。当原始尺寸>=样式尺寸*缩放比例时，图片处于清晰的状态。当原始尺寸<=样式尺寸*缩放比例时，图片处于模糊的状态。1、原始尺寸：图片设计出来时的尺寸，如下84*85。只要满足以上公式，你的图片在网页中就会保持清晰。2、样式尺寸：你在代码中设置的尺寸80*60。

3.布局：根据样式计算每个树节点的尺寸和相对于包含块的位置。一般情况下，dom树和布局树不一样。例子：head，link在dom树中，但是不在布局树中。4.分层：将布局树的内容分成不同的图层，以便将来发生变化的时候，提升渲染效率 （可设置will-change属性分层，但不推荐）1.解析HTML：将html字符串变为对象树结构，并可以通过js进行操作。7、光栅化：将每个块变成位图（类似二维数组，存储每个像素点的颜色）6、分块：启用多个线程，将每一层分为多个小块。8、画：将画面呈现到屏幕上。

第五步，前端将用户名、密码、证书、签名值传给应用后端，后端一次进行用户名、密码校验，证书校验（因为每个项目证书唯一，事先将证书作为一个字段存在用户表里了）。第六步，效验完用户名、密码和证书后，后端拿着前端传来的签名值，调用加密机服务去验证签名值。第四步，前端拿到随机数后，js将证书、随机数、用户名、密码作为参数调用前端服务Server，生成签名值。第二步，插入U盘，里面存着证书，客户端可读取。第三步，前端调用后端随机数接口，后端接到请求后调用加密机服务获取随机数，将结果返给应用前端。

场景：在实际的开发中，我们经常使用console.log在控制台中进行调试，但是调试完了之后，经常忘记了清除。项目开发久了，打开控制台发现一大堆console.log打印结果，其中不乏一些隐私信息，如登录密码等。面对开发时大量的console.log,我们该如何清除呢，一个一个的删掉？webpack提供了一个配置，可在项目打包时自动移除console.log。3、在configureWebpack中加入配置。2、在vue.config.js文件中引入。

如果请求依然是通过nginx代理，那么浏览器向nginx发起请求后，nginx应该转发到哪呢，是127.0.0.1吗？答案是否定的，因为nginx转发到127.0.0.1并不是用户本地服务地址，而是nginx所在服务器的IP地址。浏览器不直接向后端要数据，而是由用户浏览器发给nginx，因为nginx配置了代理，所以又将该请求转发到了后端。答案是我们不用通过nginx去代理请求，而是直接通过浏览器向本地服务发起请求。以上，直接调用本地服务显然出现了跨域问题，但至少我们已经请求到了本地服务。

以上代码作为案例，传入一个文字和一张图片，生成一张新的图片，且生成图片的大小跟文字的长短有关，最终转换为base64格式，并用promise包裹返回。以上是调用方式，res即为base64图片地址。

因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。当直接给formData.planTime赋值是 formData.planTime= value ， 界面没有变化。原文链接：https://blog.youkuaiyun.com/qq_43120764/article/details/122045550。value-format=“yyyy-MM-dd HH:mm:ss” range-separator=“至”

3、指定a标签的download属性，作为文件下载后的名字。1、通过http请求，拿到字节流res。8、触发a标签的点击事件，去下载。7、将a标签插入到DOM中。9、从DOM中移除a标签。

注意：添加滚动事件会使列表（.el-table__body）和‘假盒子’（this.vEle）一起滚动，而我们要保持列表不动，更新渲染数据，造成列表滚动的假象，就要逆向移动列表（.el-table__body）。计算列表（.el-table__body）中所有数据应占得高度height,创建一个div并设置高度为height用于撑开容器（.el-table__body-wrapper），出现滚动条，暂且称这个div为‘假盒子’（this.vEle）。需要全量展示列表数据，但数据量极大，会导致页面超级卡顿。

城安项目单点登录开发记录

js的隐式类型转换

1.同源策略，跨域 同源策略：为了2.es6模块化和commonjs规范，循环引用3.两种web开发模式4.两种身份验证机制

1.v-show和v-if的区别：v-show的本质是改变DOM元素的display属性，不改变DOM树的结构v-if的本质是添加或删除DOM树的节点，改变DOM树的结构2.客户端渲染和服务器端渲染客户端渲染服务器端渲染3.vue使用虚拟DOM的特点虚拟DOM的定义：本质上是一个对象，能代表DOM树，通常含有标签名，标签上的属性，事件监听和子元素，以及它们的属性。虚拟DOM有什么优点：能减少不必要的DOM操作:如向DOM中一次性插入多个元...

1.let变量的暂时性死区问题本题中在{}内部的作用域中，因为有let的声明let x=20;但是在console.log(x);之后，此时，x还没有被初始化，因此会报错referenceError。注意：与var不同，let变量的声明可以提升，但是初始化不能被提升（var x=20；会变量提升为var x，并且给x一个undefined初值。而let x=20;会被提升为let x；并没有给x初值，因此就会出现let的暂时性死区问题）2.CSS和JS对DOM树解析和渲染的阻塞问题CSS

1.在网页加载完成后，想要动态的改变网页标题，要调用document.title()方法。2.Object.defineProperty(obj,prop,descr)方法的使用：给对象定义一个属性，并进行描述第一个参数：obj，需要定义属性的对象第二个参数：prop，需要定义的属性第三个参数：descr，属性的描述返回值：返回此对象其中第三个参数的描述分为数据描述符和访问描述符数据描述符包括：configurable：表示该属性能否通过delete删除，能否修改属性的特性或

1.delete的用法：删除对象的属性，不能直接删除变量和原型链中的变量2.变量提升和函数提升js引擎在正式执行之前会进行一次预编译，将变量声明和函数声明提升至当前作用域的最顶端，其他代码的执行顺序不变。（函数提升优于变量提升，函数提升的本质可以理解为变量提升,即function a(){}可以理解为var a;a=function a(){}）预编译之后相当于function hoistFunction(){ var foo; foo=funct...

电脑的显示设置中：分辨率和缩放比例弄明白了吗？本文带你了解。

会话技术会话：一次会话包含多次请求和响应，直到客户端或服务器关闭会话结束。产生背景：http协议是无状态的，客户的每个请求和响应是作为分离事务处理，服务器无法知道每次的请求来自一个用户还是多个用户。作用：在一次会话间实现数据共享（主要靠session实现数据共享，而cookie主要起到在不登录的情况下完成身份识别的作用）。cookie客户端会话技术：将数据保存到客户端，存储数据少，安全性差。步骤： ...

三层架构在软件开发的过程中，为了实现“高内聚，低耦合”的目的，将各功能模块划分为 界面层（UI），业务逻辑层（BLL），数据访问层（DAL）。各层之间通过接口访问，并通过对象模型的实体类（Model）作为数据传递的载体。对象模型的实体类一般对应数据库中的表，实体类的属性对应数据库表中的各字段。MVCM（Model 业务模型），V（View 用户界面），C（Controller 控制器），使用MVC的目的是将M和V的代码分离，从而使同一个程序可以使用不同的形式。最典...