酌白楼-CSDN博客

原创这段时间面试遇到的问题

一是通过数组下标改变数组中的值的时候，二是给data中定义的对象添加新的属性，需要使用到 $set(target,key,value),这里面vue.set是挂载到vue1上，this.set是挂载到vue的原型对象上，源码里数组改变是用splice(index,1,value)实现的响应式。自定义封装的组件，在子组件中配置model对象，prop是穿过来的值，event是值改变触发的函数，在props里接收数据，在子组件身上绑定函数。vue双向绑定改变数组的7个方法，reserve会改变原数组吗。

2022-09-14 14:58:39 407 1

转载在vue中使用event事件

在 jquery 中，我们传入到 bind 方法中的回调，只能是一个函数类型的变量或者一个匿名函数，传递的时候，还不能执行它（在后面加上一堆圆括号），否则就变成了取这一个函数的返回值作为事件回调。我们知道，相比于 jquery，vue 的事件绑定可以显得更加直观和便捷，我们只需要在模板上添加一个 v-on 指令（还可以简写为 @），即可完成类似于 $(‘xxx’).bind 的效果，少了一个利用选择器查询元素的操作。既没有传入实参，也没有接收的形参，这个 event 对象的来源，要么是上级作用链，要么。..

2022-08-16 16:48:29 6037 1

原创前端开发中，实现动态改变css样式的几种方式

动态展示css样式

2022-08-10 17:58:54 3506

原创使用aggird组件实现下滑请求分页从而实现无限滚动的效果

我们弄清楚了getRow里面的逻辑，现在我们来实现滚动分页，代码太多，大家的场景也可能不同，我就说一下思路。设定pagesize=1，pageindex=100，startRow=0，endRow=10，截取的范围是10条，然后在getRow里面让this.startRow+=10，this.endRow+=10，this.pagesize++通过vue的双向绑定原理实现startRow，endRow，pagesize动态变化，重点来了，当我们的endRow为100时，就触发了判断。...

2022-08-04 18:10:34 1807

转载 vue 文本输入框只允许输入字母、数字、不允许输入特殊字符

一、基本结构<input type="text" v-model="note" maxlength="18"><script>export default { data () { return { note: '', } }}</script>二、监听表单输入的内容（1）只允许输入字母 watch: { note (newValue, oldValue) { console.log(newVal

2022-05-11 15:38:53 3936

转载浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）

postMessage 是 html5 引入的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。一、Window postMessage() 方法介绍postMessage() 方法用于安全地实现跨源通信。（只有同源脚本才能相互通信，window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。）1、语法：o

2022-04-29 14:39:25 19030 2

原创 vue项目仓库迁移，快速修改仓库地址

打开项目文件夹，找到.git里面的config文件，用记事本打开。可以看到一行url，url这个地址就是你拉取代码和推送代码的仓库地址。在新仓库中的克隆命令中复制新仓库的地址，去修改url的地址，这样就可以正常的推送和拉取啦...

2022-04-20 09:27:42 900

原创 vue中在mounted中v _this=this作用及案例解析

v_this只是一个变量名，this代表父函数，如果在子函数还用this，this的指向就变成子函数了，v_this就是用来存储指向的。普通函数中的this表示调用此函数时的对象，箭头函数里面的this会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind普通函数的this指向调用它的那个对象举个例子在开发中遇到了这样的问题，需要点击

2022-04-20 09:19:52 977

原创 JS错误 Uncaught SyntaxError: Unexpected token u in JSON at position 0

这个错误是由于JSON.parse解析了undefined我们只需要在JSON.parse()前加一层判断，let key=localStorage.getItem('key')if(key!="undefined"&&key!=null&&key){JSON.parse(key)}这样就不会报错了

2022-04-19 18:28:35 1239

原创解决vue项目npm run bulid打包后index.html打开空白的问题

解决vue项目npm run bulid打包后index.html打开空白的问题通过vue cli 创建项目，并npm run build 打包后，在文件夹 dist 中点击index.html出现空白页面，且在终端中报错了解决方法新建一个文件vue.config.js与src文件同级module.exports={publicPath:'./'}这样设置就可以了，再去打包去试试看吧...

2022-04-15 09:20:51 1280

原创以vue为例，前端配置环境变量

为什么要配置环境变量？一般项目分有开发环境、测试环境、正式环境，所使用的接口域名都是不同的，可能还分别部署三个或更多前端服务。每次切换环境或者打包的时候都需要手动更改配置，比较麻烦也容易出错，所以用脚本自动化方式直接配置不同的开发环境。1.创建各环境文件以vue为例，直接创建.env.xxxx，与src同级，xxxx后缀可以任意取.env（本地开发环境）// 用来区分本地开发和线上打包环境NODE_ENV = 'development'// 开发环境接口VUE_APP_SERVER .

2022-04-15 09:08:52 414

原创 vue通过监听浏览器窗口大小实现控制根节点的font-size

// 直接来吧，啊哈哈哈哈<template><div :style="{fontSize:fontSizeVal+'px'}">内容--------------------------</div></template><script>data(){screenwidth:null}computed:{// 动态值判断fontSizeVal在不同页面宽度下的大小fontSizeVal:function(){if(thi

2022-04-14 14:25:47 1041

原创 vue中使用echarts出现警告There is a chart instance already initialized on the echarts.js解决办法，亲测有效

一、解释出现该警告的原因是我们通常使用echarts图表是用来展示动态的数据，每次数据变化就是重新生成图表的过程，这个时候图表重复获取dom元素就会出现该报错，那怎么解决呢。二、解决方法echarts图表生成需要dom容器来承载。我们可以进行判断，如果已经获取到dom就不用再重复获取了，这样问题就解决了，代码如下if(Object.keys(this.myecharts).length==0){ this.myecharts=echarts.init(this.$ref.echart.

2022-03-30 09:29:53 3268

原创 echarts柱折混合图的一些常需设置的属性

echarts设置网格线颜色xAxis: { type: 'value', //设置网格线颜色 splitLine: { show: true, lineStyle:{ color: ['#315070'], width: 1, type: 'solid' }　　}}去掉ECHarts折线图中图例的圆点在图例的配置项里，设置itemStyle的opaci.

2022-03-12 22:11:15 1137

原创 js数组的splice方法

今天做力扣翻转数组时用到了这个方法给你一个数组，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。示例 1:输入: nums = [1,2,3,4,5,6,7], k = 3输出: [5,6,7,1,2,3,4]解释:向右轮转 1 步: [7,1,2,3,4,5,6]向右轮转 2 步: [6,7,1,2,3,4,5]向右轮转 3 步: [5,6,7,1,2,3,4]可以用splice方法var rotate = function(nums, k) { k = k

2022-03-04 17:13:49 359

原创通过git rebase命令捋顺分支图的思路

在多人协作开发中，我们经常遇到这样的问题。在本地分支开发的过程中，主分支上又多了很多次提交。开发完毕后，这时候我们不能直接合并到主分支。我们可以这样举例说明本地分支：caim 本地主分支 release 远程主分支 origin release先切换到本地的主分支，把远程的主分支代码拉取下来git checkout releasegit pull origin release然后切回到自己开发的分支上，git checkout caim把本地主分支接到我们新的提交之前。git reba

2022-02-23 14:03:02 191

转载解决iframe标签嵌入一个现有的网站无法登录的问题

以iframe标签嵌入一个现有的网站到项目中，嵌入的网站无法正常登录，直接在浏览器地址栏输入url并登录是正常的。于是开始探索…问题分析由于后续接口提示401，判断是登录接口鉴权失败导致的，于是观察登录接口的请求响应，发现了端倪：翻译为大白话就是：写入Cookie失败。原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！这个提示包含了两个信息：设置cookie时有个连带的SameSite属性top-level-na

2022-01-25 10:38:13 5953

原创对象数组根据对象中的属性来查找数组中的对象

比如我们有这样的一个对象数组Array=[{name:'小王',...},{name:'小里',...},{name:'小力',...},{name:'小李',...},{name:'小犁',...},{name:'小粒',...}]现在我们要依据name属性来过滤掉相应的对象，留下剩余的对象在数组里。我们可以这样做// push name in arrlet name=[]Array.forEach((item)=>{ name.push(item.name)})// chose

2021-12-27 09:44:57 1520

原创使用antdesign vue select 组件需要多选时取消组件自带的搜索功能

这个我也在网上找了好久，没有找到正确的答案，自己研究了一下，其实很简单的，我主要说一下思路select组件多选情款下没有取消搜索的这个选项，所以我们自己想想办法，我发现搜索是要以搜索框能获取到焦点为前提的，所以我们可以朝这个方向入手。首先我注意到官网上的change事件和blur事件，怎么调用它们呢，一开始我用document和jq来找走了很多弯路。后来我发现，用refs可以找到它的blur方法，所以我们可以在点击select框时调用blur方法，失去焦点，这就没办法搜索了。但是这会产生新的问题就

2021-12-23 16:03:20 2211

原创用Object.keys处理后端数据

一般用这个方法处理后台数据，它可以把后台返回的对象中的索引提取出来变成数组形式，然后再forEach进行数据处理。上代码let list=[]Object.keys(res.data).forEach(key=>{ list.push({ code:key, text:res.data[key] })})然后就可以把这样的后台数据res={lal:0,pp:1,data:{m1:“dd”,m2:“qq”,m3:“m4”}}转化为

2021-12-03 16:40:10 293

原创 Git 修改已提交的commit注释嘎嘎好用

分两种情况：1.已经将代码push到远程仓库2.还没将代码push到远程仓库，还在本地的仓库中已经将代码push到远程仓库一、修改最近一次的注释(就是最新的一次提交) : 这个好操作// 先保证你的分支是代码最新，先$ git pull$ git commit --amend修改完了，查看git status ,根据命令提示去操作去:git pull (拉取合并到本地)，再去git push。二、修改前几次的commit 注释：1.用git pull 拉取最新代码，1.1. git

2021-12-03 09:44:54 1941

原创 js递归实现深拷贝简单易懂

deepClone(obj){ const newObj=Array.isArray(obj)?[]:{}; if(obj&&typeof obj ==="object"){ for(const key in obj){ if(Object.prototype.hasOwnpropetry.call(obj,key)){ if(obj[key]&&typeof obj[key]==="object"){ newO

2021-11-30 10:17:08 270

原创 git的一写常用指令

checkout fetch和pull rebase /rebase -i merge /merge --squash push /push --force-with-lease originstash（多种选择）， log ， diff ， reset（多种选择）和revert，rebase如何解决冲突 git commit --amend①git pull rebasegit pull --rebase == git fetch+git rebase origin/master②git fet

2021-11-30 10:04:38 57

原创使用gitlab创建和合并分支流程

第一次使用gitlab参与多人协作的项目，我们首先应该做什么呢。当我们第一次拉取项目代码时我们要新建一个分支来进行开发下载代码git clone xxx新建本地分支git checkout -b xxx开发完后进行提交git add .git commit -b ‘xxx’这时候就会产生一个问题，因为是多人开发。我在本地修改好后，发现远程分支已经被改动了，此时我本地也被改动了就造成了冲突，无法push或者pull。就是说你在开发分支的同时主分支也有人再推送commit的点，这样就会使你的

2021-11-19 16:42:26 3201

原创 JS 可选链操作符?. 空值合并运算符??

可选链操作符与空值合并操作符，是ECMAScript官方提出的新语法，更精简的安全取值与默认值设置小技巧1.JS 可选链操作符?.?.的含义也很好理解，判断左侧是否为真（是否有数据），为真再进行右边的操作。凡是数据来源带有查找性质，我们做安全取值判断会减少Bug，过去我们用if()或者&&来进行判断数据// arr来源是通过其它查找行为所生成，可能是数组也可能是nullarr && arr.forEach((e)=>console.log(e))// obj

2021-10-05 22:24:06 265

原创前端常见面试题

清除浮动的方式清除浮动就是为了解决父元素因为子元素不占用空间而互相重叠并且父元素高度变成零的问题1overflow hidden优点：通俗易懂，方便缺点：超出的元素的内容会被隐藏2.clear both 额外标签法，优点：通俗易懂，方便缺点：添加无意义标签，语义化差3.使用after伪元素清除浮动ie6-7不支持伪元素:after，所以用*zoom:1来触发hasLayout(布局)zoom(IE专有属性，设置或检索对象的缩放比例) .clearfix:after{/*伪元素是行

2021-10-05 21:45:42 312

原创 vue项目中商品规格判断是否可以选取

★规格组件-SKU&SPU概念官方话术：SPU（Standard Product Unit）：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位，可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。总结一下：spu代表一种商品，拥有很

2021-09-24 16:16:28 545

原创 vue3写省市镇三级联动组件

<template> <div class="xtx-city" ref="target"> <div class="select" @click="toggle" :class="{active:isShow}"> <span v-if='!fullLocation' class="placeholder">请选择配送地址</span> <span v-else class="value">{{fu

2021-09-22 22:52:06 976

原创 vue3面包屑组件

顶级类目-面包屑组件终极版，使用render函数自己进行拼接创建。createElement render render选项与h函数指定组件显示的内容：new Vue({选项})el 选项，通过一个选择器找到容器，容器内容就是组件内容template 选项，<div>组件内容</div> 作为组件内容render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。

2021-09-18 22:48:33 654

原创 vue3实现图片的懒加载

实现数据懒加载在前面文章有写。实现图片懒加载，思路是监听图片进入视口区域时给图片src添加图片地址，注册vue3的自定义属性来传递图片地址的值。现在开始写敲代码。// 图片加载不出来时显示的图片import defaultImg from '@/assets/images/200.png'const defineDirective = (app) => { // 扩展自定义指令 app.directive('lazyload', { // Vue2规则：vue.direct

2021-09-16 20:13:08 1628 1

原创在vue3中用原生js写一个轮播图组件

<template> <div class='xtx-carousel' @mouseenter="stop()" @mouseleave="start()"> <ul class="carousel-body"> <li class="carousel-item" v-for="(item,i) in sliders" :key="i" :class="{fade:index===i}"> <RouterLink

2021-09-15 23:48:04 453

原创做vue3项目中如何实现数据的懒加载

写在前面目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下我们做vue3时如何实现数据的懒加载我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。大致步骤：理解 useIntersectionObserver 的使用，各个参数的含义改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法

2021-09-15 23:12:27 950

原创 vue3中computed计算属性函数

写在前面目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进computed中，computed是用来定义计算属性的。1. 基本使用：只读<template> <div> <div>计算属性</div> <hr> <button

2021-09-14 00:05:14 18172

原创 vue3中v-model语法糖

v-model语法糖写在前面目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中v-model语法糖的使用,想了解vue2中的v-model可以去看我之前的文章。Vue2中v-model的应用场景<template> <div> <div>v-model指令用法</div> <hr> <div>{{uname}}</div> 用户名：&

2021-09-12 12:12:41 1201

原创 vue3中侦听器的使用

写在前面现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中侦听器的使用。监听ref定义的响应式数据// 1、侦听器-基本类型const count = ref(10)// 侦听普通值基本使用watch(count, (newValue, oldValue) => { console.log(newValue, oldValue)})总结：侦听普通数据可以获取修改前后的值；被侦听的数据必须是响应式的。监听reactive定义的响应式数据

2021-09-10 20:49:42 1765

原创 this.$listeners在vue项目中的使用

写在前面在我们写项目的过程中，经常碰到要做增删改查的功能，这些其中像添加，修改，预览这些功能弹出的界面简单就直接写，但一般情况下我们都需要单独封装一个子组件，并将其引入主页面也就是父组件中使用。我发现这些功能最后在提交确认时都需要有关闭弹窗并且重新渲染数据的过程，一般我们会使用子传父this.$emit(‘xxxx’,xxxx)来调用父组件中的关闭弹窗和重新渲染页面的功能，就很麻烦,所以我们来看看this.$listeners在vue项目中的使用this.$listeners: 自动会收集所有加在这

2021-09-09 00:34:57 3116

空空如也

空空如也