背包Boy-CSDN博客

原创 vue中使用quill-editor并配合七牛云上传图片后回显

在开发项目时不可能所有的资源都存放在一个服务器中，这样造成资源加载慢，许多带宽都被图片或者视频的加载占用；七牛云是一个不错的对象存储服务商；使用我是配合iview的upload组件使用 <div class="edit_container"> <quill-editor v-model="articleForm.content" ref=...

2020-02-20 20:52:51 1494 2

原创解决vuex页面刷新重新赋值问题

每次刷新就会发现vuex里面的值并没有改变。解决：利用vuex-along保持持久化。安装：npm install vuex-along -save使用：在stroe的文件中引入import createVuexAlong from 'vuex-along'，代码如下export default new Vuex.Store({ state: {}, mutations: {}, ...

2020-02-10 11:16:20 1330

原创基于Vue+iview的头像剪切上传vue-cropper

写项目的时候遇到了一个头像的更改，也就是要对要上传的图片进行裁剪，然后再上传；默认已经安装了iview安装npm install vue-cropper -Save使用在要使用的页面的template中引入 <Modal v-model="modal1" title="操作图片" :loading="loading" @...

2020-02-04 11:35:36 2626 15

原创解决Vue中iview ui的导航栏刷新状态保持不变

iview的Menu 导航菜单中active-name为激活的name值。要想刷新不变，可以设置:active-name="$route.path，还有每个MenuItem 的name值等于to的值就行。这样就可以实现刷新保持状态不变。当然你也可以利用Vuex来保存状态。相关代码如下 <Menu mode="horizontal" :active-name="$route.path...

2020-01-10 19:47:03 2007

原创原生JavaScript获取某一段时间内的所有日期列表

原生JavaScript处理某段时间的所有日期列表

2022-10-21 13:50:50 697 1

原创 uni-app图片选择转base64问题，H5与APP端相关实现

前言本文章是基于uni-app的uView去实现的。<u-upload ref="uUpload" :max-size="5 * 1024 * 1024" action="/" max-count="1" :before-upload="beforeUpload"></u-upload>H5beforeUpload(index, list) { return new Promise((resolve, reject) => { // li

2021-04-23 14:00:16 2133 1

原创 Vue的v-model实现原理

<input v-model="inputValue" /><input :value="inputValue" @input="inputValue = $event.target.value" />第二行是第一行的语法糖。原生JS实现v-model<body> <input type="text" id="inputModel"> <p id="p"></p></body><script&g

2021-04-02 14:45:24 251

原创 JS判断一个数是不是整数

let a = 1,b = 1.1ES6的Number.isIntegerNumber.isInteger(a) //trueNumber.isInteger(b) // falseparseIntparseInt(a) == a // trueparseInt(b) == b // falseString+indexOfString(a).indexOf('.') == -1 // trueString(b).indexOf('.') == -1 // falseNumber

2021-04-02 11:08:55 369

原创 vue路由守卫与自定义命令

// 组件内守卫beforeRouteEnter(to,from) // 在渲染该组件的对应路由被验证前调用beforeRouteUpdate(to,from) // 在当前路由改变，但是该组件被复用时调用beforeRouteLeave(to,from) // 在导航离开渲染该组件的对应路由时调用// vue自定义指令vue.directive(‘pin’,{//钩子函数})created(el,binding,vnode,prevNode)beforeMountmountedbe

2021-04-02 10:50:03 137

原创 JS手写数组map、filter、reduce方法

// reduceArray.prototype.myReduce = function(fn,initValue) { let acc = initValue || this[0] let startIndex = initValue ? 0 : 1 for(let i = startIndex; i < this.length; i++) { acc = fn(acc,this[i],i,this) } return acc}// mapArray.prototype.myM

2021-03-29 19:25:59 440

原创 JS函数链式调用，实现一下task().eat().sleep(2000).eat().sleep(2000)函数

let index = 0 let stack = [] function next(){ let fn = stack[index] index++ if(typeof fn === 'function') { fn() } } function T(name) { stack.push(function() { console.log('Hi! This is' + name) next() }) }

2021-03-26 15:45:56 728

原创 JS数组去重

function uniqueArr(arr) { // es6 Set return [...new Set(arr)] // sort + splice arr.sort((a,b) => a - b) for(let i = 1; i < arr.length; i++) { if(arr[i] == arr[i - 1]) { arr.splice(i,1) i-- } } // indexOf + splice

2021-03-25 16:01:01 788

原创排序算法

快速排序const quickSort = (arr,left,right) =>{ if(left < right){ let piv = getPiv(arr,left,right) quickSort(arr,left,piv - 1) quickSort(arr,piv + 1,right) } } const getPiv = (arr,left,right) =>{ let piv = arr[left] while(

2021-03-25 15:34:57 95

原创两栏布局和三栏布局

两列布局：左固定、右适应<body> <div class="box"> <div class="aside"></div> <div class="main"></div> </div></body>float + BFC.aside{ float: left; width: 200px; height: 200px; background-co

2021-03-22 18:28:46 74

原创 JS实现矩阵的顺序打印与换原

输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。示例：输入：matrix = [[1,2,3],[4,5,6],[7,8,9]]输出：[1,2,3,6,9,8,7,4,5]function spiralOrder( matrix ) { if(!matrix.length) return [] // write code here let ans = [],t = 0,l = 0,r = matrix[0].length - 1, b = matrix.le

2021-03-22 11:03:54 522

原创 JS设计模式

/* JS 单例模式只能有一个实例，已经有实例则返回该实例，否则创建一个实例并返回 */ class SignleObject { constructor(name) { this.name =name } getName() { console.log(this.name) } static getInstance(name) { if(this.instance) return this.instance t.

2021-03-18 12:23:58 105 4

原创手写Promise.all、new、instanceof、深拷贝、call/apply/bind、防抖/节流、JSONP、Object.create、继承、ajax

// promise.allfunction PromiseAll(promises) { return new Promise((resolve, reject) => { if (!Array.isArray(promises)) throw new Error('arguments must be an array') let promisesNum = promises.length let resValue = new Array(promisesNum)

2021-03-17 12:06:05 158

原创 JS实现不用运算符“+“,“-“,“*“,“/“实现加减乘除运算

// 相加 function add(a, b) { // 相加 a，b异或 while (b) { var c = (a & b) << 1 a = a ^ b b = c } return a } // 相减 function subtract(a, b) { // a - b 等于 a + (-b); -b等于 b取反加1 var tmpB = add(~b, 1) ret.

2021-03-15 11:54:17 1176

原创记修改ElementUI的时间控件DateTimePicker样式踩坑日记

前言需求是这样的，时间只能选择之后的时间，并且日期时间只要求精确到小时，也就是不用选分钟和小时。根据ElementUI的代码复制粘贴过来。 <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH"> </el-date-pi

2021-01-16 14:42:30 7323 2

原创 React函数组件性能优化之useEffect、useMemo、useCallback、React.memo

前言react函数组件不想类组件那样有生命周期函数，以及state。但是我们可以通过hook来优化我们的性能。一个组件重新重新渲染，一般三种情况：要么是组件自己的状态改变要么是父组件重新渲染，导致子组件重新渲染，但是父组件的 props 没有改变要么是父组件重新渲染，导致子组件重新渲染，但是父组件传递的 props 改变React.memofunction Test() { const [value,setValue] = useState(0) return ( &

2020-12-26 16:05:59 3536 1

原创 React类组件性能优化之shouldComponentUpdate、React.PureComponent

前言这两个性能优化方法是对与类组件来说的。有些时候我们setState时，状态值并没有改变，但是相关的组件还是渲染了。比如如下代码的执行class Test extends React.Component { state = { value:0 } componentWillUpdate() { console.log('Test 渲染了') } render() { return <div>

2020-12-26 14:45:23 458

原创 Vue中的nextTick

在Vue中涉及DOM的异步更新，也就是nextTick;Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。nextTick会在DOM更新后调用回调函数。this.$nextTick(function () { // Code that will run only after the // entire view has been rendered})相关源码解读/* @flow *//* globals MutationObse

2020-12-22 11:54:36 93

原创腾讯前端一面面经（IVWEB）

面试官很和蔼，都是对简历的深挖，重基础。问答（45min）自我介绍Vue通信机制有哪些水平垂直居中实现实现一个左边固定，右边自适应布局跨域是啥？跨域有哪些？Vue父子组件的执行流程浏览器一帧发生了啥？原生Ajax实现let，const，var区别怎么实现const里面的属性不能修改？Promise.all() 怎么实现？原型链是啥？new的原理this的指向有哪些？怎么改变this的指向？call、bind()、apply() 区别Vue数据响应式原理css盒子模型、

2020-11-23 22:50:57 363

原创 200多行代码带你实现一个简单Vue

我们都知道Vue是响应式的，Vue就是基于数据劫持+发布者-订阅者模式实现的数据响应式，数据变化驱动视图更新，而通过操作视图也能改变数据。数据劫持是通过Object.defineProperty把Vue中的data转化成getter和setter实现，ES6中也有Proxy对数据进行拦截处理。首先来着一个图，大概总结一个流程。代码开始class MyVue{ constructor(options){ this.$el = options.el this.$data = options.

2020-08-15 19:36:25 237

原创一文带你了解CSS盒模型和BFC

前言在读此文章之后也可以逛逛本人的博客，会持续更新文章的。基本概念所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。

2020-07-23 12:57:12 135

原创一文带你了解JavaScript深拷贝

深拷贝之前的文章我也写过，今天就来重新了解一下JavaScript的深拷贝吧。拷贝是啥？顾名思义也就是复制，我们知道在JavaScript中基本数据类型都是保存在栈中的，而复杂数据类型（object）是保存在堆中的，在栈中不过是保存了堆的地址（引用）。浅拷贝与深拷贝浅深拷贝都是对引用类型的数据而言的，基本数据类型一赋值就开辟了独立的栈空间，互不影响。浅拷贝：当我们对基本数据类型复制，会把值全部复制过去的。如果是引用类型，也是把值复制过去，不过这个值是地址引用。这样如果其中一个对象改变了这个地址，

2020-07-20 15:12:24 139

原创 Vue开发指南之深入了解组件

前言这篇文章是上一篇文章的续文，让我们一起了解组件吧。组件注册全局组件与局部组件组件名称首字母大写命名（MyComponentName）或者短横线分隔命名（my-component-name）全局组件：Vue.component('my-component-name', { /* ... */ })局部组件注意一点：局部注册的组件在其子组件中不可用(也就是说局部组件只在当前注册的组件中可用，当前注册的组件的子组件不可用，要在子组件重新注册)。var ComponentA = { /* .

2020-07-18 17:16:42 201

原创 Vue开发指南之基础篇

前言博主博客，欢迎来访http://lawsan.xyz写这编文章也是为了回顾之前学的Vue，查漏补缺。此篇文章涵盖Vue的基本知识以及开发技巧等。这篇文章不讲Vue的相关原理，只会讲Vue 2.0在开发中常见的知识点。你准备好了吗？安装CDN引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>NPMnpm install vue命令行工具（CLI）安装Vue-cli np

2020-07-14 18:21:07 298

原创关于hexo使用gitalk一直报enable错的问题

本来想导出gitalk插件使用gitalk评论，却一直报错themes.valine.enable ;Cannot read property 'enable' of undefined；这个报错缩进一律2个空格解决hexo主题的_config.yml的配置如下在这里提示一下配置gitalk的时候不要再前面加空格了,加了空格就会报错的。...

2020-07-02 10:49:28 502

原创一次Github+Hexo搭建个人博客的踩坑

起步安装Node.js、Gitnode.js直接上官网下载就好。测试node安装是否是否node自带npm，一测试就知道npm也有了Git安装，上官网下载安装就好。git配置1.检查SSH keys的设置；如果没有显示“No such file or directory”，说明这是你第一次使用 git；2. 生成新的 SSH Key：$ ssh-keygen -t rsa -C "邮件地址@youremail.com"；ssh-keygen -t rsa -C "Github的注册邮

2020-06-30 22:07:57 583

原创 css处理文字过长

文字过长就用... 代替，css代码如下.ellipsis{ display: block;//块状显示 overflow: hidden;//隐藏文字 text-overflow: ellipsis;//显示... white-space: nowrap; //不换行 width:100px;//超过100px就截取}

2020-06-29 09:02:06 691

原创手机端页面自适应解决方案—rem布局

加入以下原生js代码即可。(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!cli

2020-06-29 08:46:20 165

原创浅谈JavaScript数组去重

在开发时总会遇到这样的需求，就是不要保存重复的数据，要不然会造成数据多余，内存浪费。所以要去重1、ES6的Set基本思路：利用Set对象的去重function unique(arr){// return Array.from(new Set(arr)) return [...new Set(arr)];}2、filter过滤基本思路：利用filter对数组进行过滤，过滤条件就是第一次出现的值和它的索引相对应。第二次出现该值时，arr.indexOf(item)还是第一次的index，所以去

2020-05-22 14:31:39 114

原创浅谈vue组件通信

以下文章浅谈以下vue组件之间的通信，propsprops主要是父组件向子组件传值，以下为使用方法//父组件Home 子组件S1 //父组件通过绑定属性的方式向子组件传递数据//子组件通过props来接收//以下为父组件Home的代码<template> <div class="home"> 以下为组件S1的内容 <S1 :s1Dat...

2020-03-28 21:44:36 83

原创 Vue通过render渲染$Notice

主要是通过vue的render函数实时渲染$Notice的内容，基于iview UI的Notice通知提醒。通过直接调用以下方法来使用组件：this.$Notice.open(config)this.$Notice.info(config)this.$Notice.success(config)this.$Notice.warning(config)this.$Notice.erro...

2020-03-25 13:47:08 1594

原创 opencv学习1之图像写入、显示和保存

此系列的opencv学习是基于python的安装pip install opencv-python使用import cv2cv2.namedWindow("Image") # 创建窗口img = cv2.imread('e:/downloads/timg.jpg')cv2.imshow("Image", img) #显示图片cv2.waitKey(0)cv2.dest...

2020-03-18 18:02:41 114

原创 Promise

Promise是什么？抽象表单：Promise是JS异步编程的新解决方案（旧的是回调）具体表达：从语法上来说:Promise是一个构造函数从功能上来说：promise对象是用来封装一个异步操作并可以获取其结果promise状态改变初始为pendingpending变为resolvedpending变为rejected说明：只有这两种改变，且一个promise对象只能...

2020-03-11 15:32:52 100

原创手写JavaScript代码

实现一个new首先说说new操作符的作用new操作符会返回一个对象，所以我们需要在内部创建一个对象。这个对象，也就是构造函数中的this，可以访问到挂载在this上的任意属性。这个对象可以访问到构造函数原型上的属性，所以需要将对象与构造函数链接起来。返回原始值需要忽略，返回对象需要正常处理。//第一种写法function _new(){ let obj = {} let Co...

2020-03-07 13:46:32 165

原创一文弄懂JavaScript事件循环Event Loop

单线程我们知道JavaScript是一门单线程语言，一个页面所有的JavaScript代码都是一行一行的执行，如果中间出现错误，那么下面的代码就不会执行，就行alert()一样，如果没有点击确定，alert下面的代码就不会执行。JavaScript单线程也符合了页面的交互逻辑，不能对同一个DOM元素进行同时更改。任务队列任务可以分为同步任务和异步任务同步任务：在主线程上排队执行的任务；同步...

2020-03-03 17:00:40 137

原创 JavaScript防抖、节流以及深拷贝

防抖在一些事件中，可能会频繁的触发，这样操作内存使用效率低，就比如拉到页面底部加载时，scroll事件就会触发很多次，我们只希望它触发一次ajax请求；实现：function debounce(fn,delay){ let timeout = null return function(){ if(timeout) clearTimeout(timeout) //如果还在滚动，清除计时...

2020-03-01 20:37:19 141