qq_41709082的博客

基于 vue-cropper 库 实现的 图片裁剪组件（含vue2.x/vue3.x/vue3.x+ts 写法）// 代码地址 https://gitee.com/zhong-wenkai/cropper-image-upload.git内含3个文件夹：cropper-image-upload2.x || cropper-image-upload3.x || cropper-image-upload3.x+ts说明：cropper-image-upload2.x 为 vue2.x 版本

带着问题看源码——为何vue中filters访问不了vue实例?前言：我们

实现虚拟滚动表格（无限滚动）背景：项目组中，原来使用的element UI 中的table组件当一页数据量多了之后页面渐显卡顿，不满足要求，所以就决定自己开发一个table组件，当然解决这个问题，不一定要自己开发一个table组件，可以有其他的现成的库直接用，或者可以用分段式（切片）加载的方式来解决这个问题。因为正好年底，时间稍微宽裕些，所以就打算自己开发一个，正好也能了解到整个table组件的实现方式。正文：代码我直接上传到gite上了，要使用或者想了解一下自己开发一个table组件的思路的可以自行p

vue删除Keep-alive缓存keep-alive简单介绍：我们项目中为了用户有更好的体验/页面性能，大多数地方都会使用到keep-alive，这个是vue提供的组件，它会将它的子组件进行数据缓存/行为缓存。大致原理就是当离开当前组件时，组件并不会被销毁，而是保存的了内存中，下次再次访问的时候，不会重新创建新的组件实例，直接从内存中通过特定的key取出缓存的组件实例，进行渲染。问题：**最近我们项目提了一个用户体验的需求，希望同一个页面有些场景有缓存，但是有些场景不希望缓存。**

navicat连接不上服务器mysql**背景：**在自己搭建部署项目的过程中，安装mysql之后，想通过本地电脑navicat软件来操作数据库，然后发现连接不上，后面查资料说是因为mysql默认root用户是不允许外部访问的，所以我们需要进行修改。步骤：首先我们可以通过grep “password” /var/log/mysqld.log 命令获取初始密码grep "password" /var/log/mysqld.log # 拿到密码 登录mysqlmysql -uroot -p

前端项目部署流程1.首先我们需要有一台服务器，这里我用的是阿里云ecs服务器。选择的服务器操作系统是linux，下面我们开始从0开始部署一个前端项目到服务器上。步骤：一、链接服务器(1). 我们需要先在自己电脑链接上我们的服务器，我使用的是xshell工具。# 通过ssh @root[ipaddress] 来链接你的服务器#（将ipaddress替换成你服务器的公网IP地址）ssh @root[ipaddress]二、部署一个简单的静态页面登录成功之后，我们先来部署一个简单的html静态

$attrs 和 $listeners一、概念：$attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外）这个属性有什么作用呢？当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下：// parent.vue<m-child :data-s

前文 ：最近项目中需要新增一个灰度环境，所以要新增运行环境配置。太久没复习vue-cli的配置知识有点忘记了，后面查询资料配置完成，此文章作为记录以防后面忘记。正文：我们使用vue-cli构建完项目后，会有一个package.json文件，里面有scripts属性，如下："scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", },这是默认配置，当我们项目需要进行分环境时(

1.## indexedDB 前端缓存实战业务场景：最近项目组接触一个H5的项目，里面有一个课程学习的功能，里面基本都是一些比较大的gif 图片或者是一些高清的 jpg /png 图片，这个时候如果每次通过用户学习的过程中点击下一步再去下载对应的图片，如果刚好下载的图片比较大就会导致用户交互体验极差的问题，所以当时就想在学习课程之前让用户提前下载资源并缓存在前端，这时需要在前端做一个缓存，前端缓存使用比较多的是localStorage/sessionStorage ,但是应该很明显不符合我们的业务场景（

element-ui form表单嵌套校验记录一次使用 element-ui form 表单嵌套校验的需求数据结构： formData:{id:1,type:'test数据',input_info:[...]}上述formData 中的 input_info 数组就是我们需要渲染成表单的数据具体使用： <div class="form"> <el-form label-position="right" label-width="145px" ref

微信小程序 ---- 自定义顶部导航栏需要使用到 微信小程序中的 wx.getSystemInfoSync 方法 和 wx.getMenuButtonBoundingClientRect 方法。方法作用：wx.getSystemInfoSync(): 获取 手机系统信息。wx.getMenuButtonBoundingClientRect():获取 胶囊按钮的尺寸，以及位置信息。首先需要知道的是 导航栏 距离屏幕顶部 的距离就是 状态栏的高度。具体计算见下代码块：//app.jsApp({

实现一个简易的 vue router1.vue-router 有2种模式 hash 与 history 模式，hash模式就是利用锚点的原理实现跳转（通过修改window.location.hash 值），而history 通过修改浏览器访问历史栈来实现（该模式需要后端支持）。2.由于History 需要后端支持，这里就不做实现，这里主要实现一下hash 模式路由。// 这里先引入 vue 库的 cdn <script crossorigin="anonymous" integrity="sh

MySql索引剖析1.最近朋友问我一个问题，一时把我给问懵了。MySql 索引的本质是什么？我当时是以我自己对索引的理解回答：类似于书中的目录，可以快速查询到指定的数据，主要用于加速查询速度。后面得知这个答案只能给 30分，所以我也特地去查询资料深入的学习了一番。2.数据库索引的本质：分散存储的数据结构在RDBMS 系统中数据索引都是硬盘级索引*下图是索引的工作机制：3.MySQL中索引类型：（1）.hash索引：优势： 查询速度快劣势：不支持范围查询，hash冲突。由于in

vue-自定义指令1.简单记录一下 vue-自定义指令的使用方法// html 部分<div id="app"> <h3>vue directive</h3> <div> <p> <input type="text" v-focus v-model="info" /> </p> ...

bind,call,apply方法的实现1.call 方法：第一个参数为 this 指向，第二个参数及以后 为传入执行函数的参数。function myCall(context){ const arg = [...arguments].slice(1); //复制第二个以后的参数 用于传入执行函数 ，此处arguments 为类数组所以不具有数组的一些操作方法，所以需要先进行转换 co...

实现Promise

手动实现vue数据双向绑定1.看了vue 数据双向绑定的源码决定 根据自己的理解 实现一个简单版的 vue双向绑定首先根据用法 new Vue({…}) 可以知道 vue 构造函数接收一个 对象参数class Vue { constructor(options){ }}其次 数据双向绑定的原理 是使用了观察者模式 和 Object.defineProper...

微信小程序 懒加载1.需要使用到 wx小程序中的 createIntersectionObserver ， relativeToViewport ，observe 等一系列 API ，API使用方法详情 官网: https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html...

微信小程序 bindtap 传参//index.wxml<view bindtap="changeIndex" data-src="我固定参数"> </view>//index.jspage({ data:{ }, changeIndex(e){ console.log(e.currentTarget.dataset.src); //我...

React-错误边界错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展示一个回退的 UI 的 React 组件，而不是整个组件树的异常。错误边界在渲染期间、生命周期方法内、以及整个组件树构造函数内捕获错误.注意: 错误边界无法捕获以下几个错误。(1).事件处理(2).错误边界组件自身的错误(3).异步代码(setTimeout 或 requestAnimati...