- 博客(72)
- 收藏
- 关注
RSS订阅原创 vue计算属性传参
最近很多小伙伴问到，计算属性怎么做到像普通函数一样传参呢？针对这个问题，我们来看下下面的示例：<template> <p>{{ getCallerName }}</p> </template><script>export default { props: { callRecord: { type: Object, default: () => ({}), } }, comp
2022-04-17 23:37:59
14441
8
原创 监听localStorage中值的变化实现跨页面通信
本次分享一个之前困扰很久的，跨页面之间的通信方式。以前跨页面通信，就拿我们之前vue项目中多页面为例，每个页面都是一个独立的vue实例，通过main.js初始化，各个页面之间的数据不互通，而通信方式最常见的方式是往缓存中存储值，其他需要得到这个值的页面通过定时器去实时查询缓存中该值的变化，然后进行通信。但是定时器终究不是一个好的实现方式，而定时器的时间长短设置多少都很有考究，时间太短太耗性能，时间太长的话，又会存在一段时间拿不到最新值的情况。现在有一个很方便的方式，那就是 监听，其他页面正常像以前一样
2021-06-15 23:31:26
3485
6
原创 处理数组空值
前言：大家是不是经常很头疼数据中存在一些诸如undefined、null等字符的情况呢？本文介绍如果快速过滤掉这些数据用map操作数组一般是很常见的使用方式，但是map需要我们返回一个值，我们通常会判断这个值是否存在，存在才会返回，如下：const cameraData = collect.map(item => { const res = await service.getCameraInfo(item.id); if(res) return res;})但是呢，eslint/snoa
2021-06-05 22:17:59
1798
原创 vue多语言化
随着国际化的趋势，项目中配置多语言切换也越来越有必要，本篇文章将会介绍如何在vue项目中配置多语言化安装：npm i vue-i18n导入注册：(因为后续可能涉及很多配置翻译，所以我们提前把配置抽离为单独的文件)// src/plugins/VueI18n/index.js：import Vue from 'vue';import VueI18n from 'vue-i18n';Vue.use(VueI18n);// 定义各语言的配置const messages = {
2021-05-13 20:18:27
1474
4
原创 utc时间处理
需求：起初是为了处理不同地区的项目（如：迪拜项目），可能和我们东八区存在时区问题，导致项目部署到现场展示的是我们东八区的数据时间，如东八区数据入库的时间是 " 2020-12-29 12:38:33 "，但是放到迪拜实际这条数据对应的时间应该是 " 2020-12-29 08:38:33 "。所以为了避免这种情况，处理时间格式化之前就得首先设置时区。而每次人为配置时区比较麻烦，所以使用了moment自带的guess方法去获取当前所在的时区。但是为了适配后期需要修改时区的问题，所以抽离配置后可以人为去..
2021-05-09 20:22:54
732
原创 vue项目安装babel巧用es2020新语法
操作运算符：??对应babel插件：@babel/plugin-proposal-nullish-coalescing-operator方法介绍：当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。与逻辑或 || 运算符不同的是，逻辑或会在左操作数为 假值 时返回右侧操作数，可能会遇到隐式类型转换造成意外情况（如左侧操作数为 ’ ’ 或 0 时）const foo = null ?? 'default string';console.log(foo);..
2021-05-05 19:54:55
6508
6
原创 多维数组 “ 拉平 “ 实现一维数组
背景：前两天项目中遇到个问题，通过双层map循环+await请求数据最终得到了一个二维数组，但是实际我想要的是二维数组里的那些对象，需要构建成一个一维数组（因为我要通过v-for去循环显示）数据：[ [ { bg_pic: "http://business0.qianqian.com/5c3d586d234b4_292.png", color: "0x21BFA6", count:
2020-12-25 11:06:48
946
原创 vue项目性能优化方案
背景：项目采用vue cli3搭建，集成前端组件以及地图效果，导致项目打包后资源包文件特别大，打包速度慢，首屏渲染耗时长，甚至出现左右界面图表数据不渲染的问题。优化前准备：首先我们需要先排查影响性能、导致打包资源文件过大的原因，以及代码的使用率webpack-bundle-analyzer：npm install webpack-bundle-analyzer// vue.config.js文件（vue cli3根目录下的文件，如果没有，可创建此文件，用于webpack配置）modul
2020-10-17 15:44:43
2487
原创 vue静态资源打包
vue项目打包后，可能大家会注意到，会把一些文件都编译压缩到一起，但是打包后我们通常很难再去修改某些东西。场景一：单点登录。当我们需要把部署包部署到不同的环境，但是有些环境往往不需要登陆的操作，那常规操作的情况下，我们就需要不开启登录的打包一份，然后开启登录后再打包一份场景二：logo / 标题。当我们需要把部署包部署到不同的现场，每个地方可能对于的标题不一样，那我们不可能根据每个现场的标题去打包一份部署包。类似的应用场景还有很多。所以，vue官网为我们提供了一份应急手段，public文件夹(v
2020-09-02 17:31:41
3465
原创 vue打包时gzip压缩的两种方案
开局一张图：可以看出，在项目部署后，我们的资源文件请求都会保持原本大小，如果文件过大，并且很多的情况下，会导致网络请求耗时，严重点可能阻塞后面的进程。所以，此篇介绍两种gzip压缩的方式：1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件；2、浏览器请求xx.js文件时，服务器对xx.js文件进行gzip压缩后传输给浏览器。webpack打包生成gz文件安装插件（compression-webpack-
2020-08-24 11:18:06
24893
3
原创 moment获取自然时间和近期时间
moment：JavaScript 日期处理类库，主要用于处理日期、时间，可以进行所需要的日期格式化，也可以按所需获取相应的时间。此次我们来简单介绍下在vue项目使用moment，以及一些常规操作。安装依赖：npm install moment --save引入(可以直接main.js引入，也可以考虑新建个插件的文件夹，然后写到一个moment.js文件中)：import Vue from 'vue';import moment from 'moment';import 'moment/lo
2020-08-19 12:28:34
3263
原创 “浮空“滚动条
前端界面布局中，滚动条是我们必不可少的东西，当我们容器不足以呈下所有内容时，需要滚动条来支撑我们查看完整的数据。当然了，简单的属性我们就不介绍了，想必大家都很了解和熟悉，我们来看个特殊的属性。场景一：定宽高的容器，不足以放下所有内容时就需要滚动条来进行扩展查看场景二：初始时容器足够放下所有内容，但是点击展开后内容过多无法呈现的情况（例如表格的扩展）这时我们会采取文本溢出呈现滚动条的情况（如纵向的滚动条：overflow-y:auto），但是滚动条出现后会挤压宽度，毕竟它自己占一部分宽度，这就会导致我
2020-08-06 13:09:28
1493
1
原创 Vue中修改组件库(如element ui)样式的可行方案
如何在vue中修改组件库的样式？vue中我们经常会使用一些第三方的组件库，可以达到快速搭建项目界面布局的效果，无非就是用什么组件库的问题。但是，不管我们使用element ui、vuetify或是别的什么组件库，修改样式是必不可少的一个工作。针对公司自己的风格或是ui的设计，组件库默认的样式、配色等并不一定符合所有人的要求，那么修改组件库的样式就成了必不可少的一部分。就拿element ui组件举例，这里描述几种经测试有效的解决方案：deep ：这里参考以前自己写过的一篇博文 浅析deep。
2020-05-21 10:03:16
9685
原创 vue过滤器
过滤数据是我们日常开发中必然会用到的。常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。js常用的操作方法是filter：array.filter(function(currentValue,index,arr), thisValue)我们一起来看个示例：const arr = [ { n...
2020-04-17 16:41:37
12125
7
原创 vue动态样式绑定改变伪元素等特殊样式(css var函数)
改变样式是我们实际开发中最常做的事情。诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。那么，在vue中，我们更能很轻松的达到这点。看下常见的几种情景：情景一：我们需要根据某个变量是否存在（触发），去动态添加样式描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果<div ...
2020-01-21 11:24:49
21667
8
原创 vue使用命名视图实现同一路由拆分
何为命名视图？有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default通俗点说：正常的一个网页，你想把当前页面拆分成多个部分，例如：左中右，那么...
2020-01-06 13:07:10
383
原创 vue的vuex监听
vue如何在非vue文件中监听vuex数据的变更？通常我们在vue文件中监听数据的变更，尤其是vuex中数据的变更非常方便，通过watch函数可以很便捷的拿到数据变更前后的值，并作出相应的处理。但是，当我们需要在诸如js等文件中监听到数据的变更就会很不容易，所幸，vue官网提供了解决思路watch(fn: Function, callback: Function, options?: Obj...
2020-01-03 10:38:20
1670
原创 vue的vuex订阅
vue本身内置了watch函数，可以很方便的用来监听数据的变更，包括vuex数据的变更.但是，这都是基于vue文件的前提下。如果我们想要在js等其他文件监听vuex数据的变更，该如何进行？这里提供两种思路方法，本章介绍第一种，第二种方式请查阅本章：vue的vuex监听subscribe subscribe(handler: Function): Function 订阅 s...
2020-01-02 14:42:48
2789
原创 vue中vuex添加Logger插件
vue中的vuex是一个全局的公共仓库，用来保存我们各个组件共用的一些数据但是我们在像vuex通过mutations保存数据时，并不知道数据变更的情况，除非我们在需要的组件中监听对应的vuex数据。当然了，万物都有解决方案，vuex提供了一种插件机制，其中内置了一种logger插件。作用如下：Vuex 自带一个日志插件用于一般的调试，生成状态快照，对比出改变前后不同的值。注：log...
2019-12-31 16:02:42
7278
原创 sort排序改变数组中的子项顺序
有时候，我们得到的数组并不是按照我们期望的顺序排列的，那么我们需要按照我们的需求把他们进行排序。例如：我们有个数组，我们希望按照从小到大的顺序排列const arr = [1, 3, 6, 768, 11, 42, 56];arr.sort((a,b) => a-b));console.log(arr); // [1, 3, 6, 11, 42, 56, 768]这里看...
2019-11-06 10:00:07
913
原创 Vue中v-for循环数组，在方法中splice删除数组元素爬坑
之前博客记录过普通for循环中，针对对应符合条件的元素，使用splice删除导致出现的问题附上博客地址：js数组splice删除某个元素爬坑这里填一下在vue中v-for中使用splice删除元素的坑。众所周知，我们使用v-for循环dom/组件，它有两个属性，item：当前循环的每一个元素，index：当前循环元素所对应的下标个人习惯，平时绑定key值的时候，都习惯采用如下写法，...
2019-11-05 10:13:50
18260
3
原创 vue动态绑定ref（使用变量）以及获取
正常情况，我们需要在vue中获得某个dom或者组件，我们会通过绑定 ref 然后通过绑定后的名字来获取这个dom 。但是，如果我们在v-for中绑定ref的话，那么这个ref就会存在多个，比如我们点击事件让对应的显示/隐藏的话，我们很难找到这个对应的元素。那么，这时我们需要动态绑定不一样的ref（比如 Arr1、Arr2、Arr3这种），那么我们如何实现呢？一起来看下代码吧：&l...
2019-11-04 10:08:08
46925
17
原创 js/es6判断对象是否为空，并判断对象是否包含某个属性
js判断对象为空以及有好几种方法了，但是个人觉得不是特别方便。比如：1、把对象通过 JSON.stringify 转为字符串，再判断字符串是否等于 " {} "2、for in循环，判断key是否存在3、jq的方法es6已经帮我们很好的解决了此类问题。es6针对对象增加了3个新方法（数组也有）：（1）、Object.keys：返回一个数组，成员是参数对象自身的（不含继承...
2019-10-21 10:25:01
31641
原创 vue实现本地解决跨域 nginx实现部署解决跨域
这里就不解释什么是跨域了。跨域是前端最头疼的事情，它阻止了我们向后端请求数据，使之我们无法拿到数据去渲染。当然，后端可以解决跨域，而且相当简单。但是如果再后端没办法的情况下，前端如果处理这种问题呢？一：开发环境下（就是vue项目本地开发，没打包部署前）1、vue cli2.x (npm run dev运行的项目)：我们可以在config文件夹中找到webpack的配置文件，其中...
2019-10-18 15:17:07
3752
1
原创 数组超实用的常见方法：find、findIndex、some、every
这里介绍几个数组常用的而且超级实用的方法，主要都是用来获取数组中符合条件的某个值1、find：给定条件，返回数组中第一个满足该条件的值，之后的值不再进行检测，当没有找到满足该条件的值时，返回undefinedlet arr = [ { name: '小明', sex: '男', age: 23 }, { name: ...
2019-09-29 12:14:26
16271
3
原创 es6数组新方法
es6提供了3个新方法——entries、keys、values 用于遍历数组，它们都返回一个遍历器对象，可用for-of循环遍历。它们唯一的区别在于：entries：是对键值对的遍历keys：是对键名的遍历values：是对键值的遍历让我们来看下具体操作以及用途：var arr = ['a', 'b']; ...
2019-09-20 10:09:18
680
原创 es6实现伪数组转数组
伪数组：拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)，并且不具有数组所具有的方法我们需要把它转为真正的数组才能使用一些数组的方法。Array.from：该方法用于将两类对象（伪数组）转为真正的数组：类似数组的对象和可遍历对象（包括es6新增的数据结构Set和Map）下面我们看一个类数组对象，并使用es5的方法和...
2019-09-17 10:43:13
2413
原创 js数组复制给另一个空数组，改变其中一个，另一个数组也会改变
场景：在vue中，我在data定义了变量，接收到了后台的数据，数组类型我把它传递给了子组件，但是我并不想直接改变这个数据于是我定义了一个空的数组，把当前数据赋值给了它。但是，我们都知道，数组所指向的是内存地址，直接赋值会使它们指向同一地址。（深拷贝和浅拷贝）那么问题就来了，当我改变其中一个数组的值，另一个数组也会随之发生变化。其实解决办法最简单粗暴的办法就是循环数据数组，然...
2019-09-03 09:50:47
11434
5
原创 js交换数组中2个元素的位置，实现排序功能
原始数据：数组中有三个关于电影的对象数据const movies = [ { title: 'a', year: 2018, rating: 4. 3 }, { title: 'b', year: 2018, rating: 4.7 }, { title: 'c', year: 2018, rating: 4.9 }];需求：需要根据评分（rating）的高低，...
2019-07-25 09:50:01
3713
原创 变量的解构赋值 - 字符串、数值、布尔值、函数参数
一、字符串的解构赋值 // 字符串也能解构赋值，只是因为此时字符串被转换成了一个类似数组的对象（类似于字符串的split方法） let str = 'abcdefg'; let arr = str.split(''); console.log(arr); // [a, b, c, d, e, f, g] const [a, b, c, d, e] = 'hello'; ...
2019-07-22 09:53:38
278
原创 vue中axios设置公共请求地址
先描述一下场景：vue项目，后台请求地址在配置文件中已经设置为全局的，每次变动只需修改一次即可，然后要部署到三台服务器。然后：修改服务器地址，打包，部署 -->修改服务器地址，打包，部署 -->修改服务器地址，打包，部署 （3次 " for循环 "）那么当我们需要部署多台服务器的时候，怎么避免减少重复性的工作呢？下面介绍一种方法来减少任务量：1、新建配置文件（con...
2019-07-17 11:00:08
9964
原创 vue中路由激活效果
导航栏是场景的网页效果，那么在vue中导航栏一般使用<router-link>通过循环实现，然后实现的效果是点击每一个元素，跳转到对应路由，以此来显示不同的页面那么点击元素怎么让它添加一个选中状态呢。类似上面这样，启动网站，首页选中，然后点击 消息，消息选中呢？如下提供2种方法：1、class ：查看控制台，发现vue给router-link中当前点击的元素...
2019-07-16 10:44:00
2060
原创 vue中使用vuex(超详细)
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步）一、适合初学者使用，保存数据以及...
2019-07-15 14:23:08
178302
74
原创 变量的解构赋值 - 对象篇
上次讲了数组的解构赋值，这次来看下对象的解构赋值对象的解构和数组不同之处在于，数组的元素是按次序排列的，变量的取值是由位置决定的，而对象的属性没有次序，变量必须与属性同名才能取到正确的值 let { bar, foo } = { foo: 'aaa', bar: 'bbb'}; console.log(foo, bar); // aaa, bbb let { baz } = ...
2019-07-12 09:57:53
1235
1
原创 变量的解构赋值 - 数组篇
es6作为新一代js的标准，已经被广泛应用于各个场景，所以，熟悉并熟练使用它变得非常有必要。本篇介绍变量的解构赋值中的数组部分，后续会介绍其他部分我们先来了解一下解构赋值：es6允许按照一定的模式从对象或数组中提取值，然后对变量进行赋值，这被称为解构赋值。来看个实际项目中的案例：const server = { ip:127.0.0.1, port:3000}...
2019-07-11 09:51:28
519
原创 js中复制对象的属性值给新的对象
我们有一个对象，且包含很多属性值和方法，但是我们想把它的内部属性复制给一个新的对象时，我们如何去做呢？你可能会说直接 a = b就可以了。no no no，这样两个对象其实指针指向的还是一个内存中的对象，当一个发生变化的时候，另一个也是变化的，这并不是我们想要的结果。那么，以三种方法来看看具体实现过程吧。如下，有一个circle对象，其中包括一个属性值，一个属性方法const...
2019-07-05 17:10:32
16108
原创 Vue封装的组件全局注册并引用
当vue接触的多了之后，你可能也会到自己封装组件的程度，试想每个页面的功能级模块全部拆分成组件，然后后续请求后台数据传入进去或者自己模拟数据，是多么方便的一件事情。每当我们需要修改的时候，只需维护那一个功能性组件即可，不需要这个功能了，只需要从页面中删除这个组件的引用即可。那么废话不多说了，我们来看看如何全局注册并一键引入（类似于element ui的全部引入）。如何封装组件就不多赘述...
2019-06-26 10:04:47
7809
原创 keep-alive(切换页面，保持状态)
接触过电商网站，大家可能对类似京东的一些方面比较有印象，比如我正在商品列表浏览商品，浏览了很长一段的商品，然后点击切换到其他页面了，再次点击回到商品列表页面，还在之前浏览的地方，类似这种功能是怎么实现的呢？这次就说说在vue中的简单实现。vue官网提供了keep-alive的方法（也算是内部封装好的组件吧）官网介绍中提到，keep-alive只能包裹在封装的组件中，而不能直接包裹在类似...
2019-06-24 10:09:59
5180
3
原创 js数组splice删除某个元素爬坑
先来看下几个概念：// splice:返回从原始数组中删除的项（如果没有任何删除，则返回空数组） // 当指定2个参数时，表示删除 // 当指定3个参数，且第2个参数为0时表示插入 // 当指定3个参数，且第2个参数为1时表示替换本次就拿删除举例，本身我们想删除数组中的某个指定元素，我们需要知道它所在数组中的下标，我们可以用 数组.indexOf获取它所在的...
2019-06-12 10:06:21
6227
原创 js中的with语句
学习过js的童鞋都知道js中我们常用的一种类型是对象。let obj = { a:"aa", b:"bb", c:"cc"}而提到对象，我们要获取它中的属性值，可以使用如下方法：// 一：let a = obj.a//二：let b = ojb["b"]好吧，这不是今天要说的重点。我们知道，我们取出对象中的每一个属性值，我们都需要obj.....
2019-05-10 10:00:44
10780
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人