Vue-成长之路
文章平均质量分 63
坏丶毛病
一只努力学习的web前端小菜鸟,欢迎大家一起学习进步。
展开
-
vue计算属性传参
最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢?针对这个问题,我们来看下下面的示例:<template> <p>{{ getCallerName }}</p> </template><script>export default { props: { callRecord: { type: Object, default: () => ({}), } }, comp原创 2022-04-17 23:37:59 · 14623 阅读 · 8 评论 -
监听localStorage中值的变化实现跨页面通信
本次分享一个之前困扰很久的,跨页面之间的通信方式。以前跨页面通信,就拿我们之前vue项目中多页面为例,每个页面都是一个独立的vue实例,通过main.js初始化,各个页面之间的数据不互通,而通信方式最常见的方式是往缓存中存储值,其他需要得到这个值的页面通过定时器去实时查询缓存中该值的变化,然后进行通信。但是定时器终究不是一个好的实现方式,而定时器的时间长短设置多少都很有考究,时间太短太耗性能,时间太长的话,又会存在一段时间拿不到最新值的情况。现在有一个很方便的方式,那就是 监听,其他页面正常像以前一样原创 2021-06-15 23:31:26 · 3620 阅读 · 6 评论 -
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 · 1488 阅读 · 4 评论 -
utc时间处理
需求:起初是为了处理不同地区的项目(如:迪拜项目),可能和我们东八区存在时区问题,导致项目部署到现场展示的是我们东八区的数据时间,如东八区数据入库的时间是 " 2020-12-29 12:38:33 ",但是放到迪拜实际这条数据对应的时间应该是 " 2020-12-29 08:38:33 "。所以为了避免这种情况,处理时间格式化之前就得首先设置时区。而每次人为配置时区比较麻烦,所以使用了moment自带的guess方法去获取当前所在的时区。但是为了适配后期需要修改时区的问题,所以抽离配置后可以人为去..原创 2021-05-09 20:22:54 · 761 阅读 · 0 评论 -
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 · 6728 阅读 · 6 评论 -
vue项目性能优化方案
背景:项目采用vue cli3搭建,集成前端组件以及地图效果,导致项目打包后资源包文件特别大,打包速度慢,首屏渲染耗时长,甚至出现左右界面图表数据不渲染的问题。优化前准备:首先我们需要先排查影响性能、导致打包资源文件过大的原因,以及代码的使用率webpack-bundle-analyzer:npm install webpack-bundle-analyzer// vue.config.js文件(vue cli3根目录下的文件,如果没有,可创建此文件,用于webpack配置)modul原创 2020-10-17 15:44:43 · 2510 阅读 · 0 评论 -
vue静态资源打包
vue项目打包后,可能大家会注意到,会把一些文件都编译压缩到一起,但是打包后我们通常很难再去修改某些东西。场景一:单点登录。当我们需要把部署包部署到不同的环境,但是有些环境往往不需要登陆的操作,那常规操作的情况下,我们就需要不开启登录的打包一份,然后开启登录后再打包一份场景二:logo / 标题。当我们需要把部署包部署到不同的现场,每个地方可能对于的标题不一样,那我们不可能根据每个现场的标题去打包一份部署包。类似的应用场景还有很多。所以,vue官网为我们提供了一份应急手段,public文件夹(v原创 2020-09-02 17:31:41 · 3535 阅读 · 0 评论 -
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 · 25068 阅读 · 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 · 3295 阅读 · 0 评论 -
Vue中修改组件库(如element ui)样式的可行方案
如何在vue中修改组件库的样式?vue中我们经常会使用一些第三方的组件库,可以达到快速搭建项目界面布局的效果,无非就是用什么组件库的问题。但是,不管我们使用element ui、vuetify或是别的什么组件库,修改样式是必不可少的一个工作。针对公司自己的风格或是ui的设计,组件库默认的样式、配色等并不一定符合所有人的要求,那么修改组件库的样式就成了必不可少的一部分。就拿element ui组件举例,这里描述几种经测试有效的解决方案:deep :这里参考以前自己写过的一篇博文 浅析deep。原创 2020-05-21 10:03:16 · 9966 阅读 · 0 评论 -
vue过滤器
过滤数据是我们日常开发中必然会用到的。常见的场景:当我们从后端请求到数据列表时,我们需要对其中符合条件的数据进行筛选、当我们拿到数据,我们希望把英文首字母大写,等等。js常用的操作方法是filter:array.filter(function(currentValue,index,arr), thisValue)我们一起来看个示例:const arr = [ { n...原创 2020-04-17 16:41:37 · 12143 阅读 · 7 评论 -
vue动态样式绑定改变伪元素等特殊样式(css var函数)
改变样式是我们实际开发中最常做的事情。诸如在css中,我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中,我们根据某个条件,或者触发某个方法,去动态改变某个样式。那么,在vue中,我们更能很轻松的达到这点。看下常见的几种情景:情景一:我们需要根据某个变量是否存在(触发),去动态添加样式描述:当我们点击按钮触发了某个条件,我们需要给对应的元素添加激活效果<div ...原创 2020-01-21 11:24:49 · 22044 阅读 · 8 评论 -
vue使用命名视图实现同一路由拆分
何为命名视图?有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default通俗点说:正常的一个网页,你想把当前页面拆分成多个部分,例如:左中右,那么...原创 2020-01-06 13:07:10 · 419 阅读 · 0 评论 -
vue的vuex监听
vue如何在非vue文件中监听vuex数据的变更?通常我们在vue文件中监听数据的变更,尤其是vuex中数据的变更非常方便,通过watch函数可以很便捷的拿到数据变更前后的值,并作出相应的处理。但是,当我们需要在诸如js等文件中监听到数据的变更就会很不容易,所幸,vue官网提供了解决思路watch(fn: Function, callback: Function, options?: Obj...原创 2020-01-03 10:38:20 · 1680 阅读 · 0 评论 -
vue的vuex订阅
vue本身内置了watch函数,可以很方便的用来监听数据的变更,包括vuex数据的变更.但是,这都是基于vue文件的前提下。如果我们想要在js等其他文件监听vuex数据的变更,该如何进行?这里提供两种思路方法,本章介绍第一种,第二种方式请查阅本章:vue的vuex监听subscribe subscribe(handler: Function): Function 订阅 s...原创 2020-01-02 14:42:48 · 2901 阅读 · 0 评论 -
vue中vuex添加Logger插件
vue中的vuex是一个全局的公共仓库,用来保存我们各个组件共用的一些数据但是我们在像vuex通过mutations保存数据时,并不知道数据变更的情况,除非我们在需要的组件中监听对应的vuex数据。当然了,万物都有解决方案,vuex提供了一种插件机制,其中内置了一种logger插件。作用如下:Vuex 自带一个日志插件用于一般的调试,生成状态快照,对比出改变前后不同的值。注:log...原创 2019-12-31 16:02:42 · 7365 阅读 · 0 评论 -
Vue中v-for循环数组,在方法中splice删除数组元素爬坑
之前博客记录过普通for循环中,针对对应符合条件的元素,使用splice删除导致出现的问题附上博客地址:js数组splice删除某个元素爬坑这里填一下在vue中v-for中使用splice删除元素的坑。众所周知,我们使用v-for循环dom/组件,它有两个属性,item:当前循环的每一个元素,index:当前循环元素所对应的下标个人习惯,平时绑定key值的时候,都习惯采用如下写法,...原创 2019-11-05 10:13:50 · 18406 阅读 · 3 评论 -
vue动态绑定ref(使用变量)以及获取
正常情况,我们需要在vue中获得某个dom或者组件,我们会通过绑定 ref 然后通过绑定后的名字来获取这个dom 。但是,如果我们在v-for中绑定ref的话,那么这个ref就会存在多个,比如我们点击事件让对应的显示/隐藏的话,我们很难找到这个对应的元素。那么,这时我们需要动态绑定不一样的ref(比如 Arr1、Arr2、Arr3这种),那么我们如何实现呢?一起来看下代码吧:&l...原创 2019-11-04 10:08:08 · 47826 阅读 · 17 评论 -
vue实现本地解决跨域 nginx实现部署解决跨域
这里就不解释什么是跨域了。跨域是前端最头疼的事情,它阻止了我们向后端请求数据,使之我们无法拿到数据去渲染。当然,后端可以解决跨域,而且相当简单。但是如果再后端没办法的情况下,前端如果处理这种问题呢?一:开发环境下(就是vue项目本地开发,没打包部署前)1、vue cli2.x (npm run dev运行的项目):我们可以在config文件夹中找到webpack的配置文件,其中...原创 2019-10-18 15:17:07 · 3847 阅读 · 1 评论 -
vue中axios设置公共请求地址
先描述一下场景:vue项目,后台请求地址在配置文件中已经设置为全局的,每次变动只需修改一次即可,然后要部署到三台服务器。然后:修改服务器地址,打包,部署 -->修改服务器地址,打包,部署 -->修改服务器地址,打包,部署 (3次 " for循环 ")那么当我们需要部署多台服务器的时候,怎么避免减少重复性的工作呢?下面介绍一种方法来减少任务量:1、新建配置文件(con...原创 2019-07-17 11:00:08 · 10001 阅读 · 0 评论 -
vue中路由激活效果
导航栏是场景的网页效果,那么在vue中导航栏一般使用<router-link>通过循环实现,然后实现的效果是点击每一个元素,跳转到对应路由,以此来显示不同的页面那么点击元素怎么让它添加一个选中状态呢。类似上面这样,启动网站,首页选中,然后点击 消息,消息选中呢?如下提供2种方法:1、class :查看控制台,发现vue给router-link中当前点击的元素...原创 2019-07-16 10:44:00 · 2089 阅读 · 0 评论 -
vue子路由跳转实现tab选项卡
现在很多的后台管理系统都采用tab选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再切换,而vue要做tab选项卡,推荐使用<router-link></router-link>实现a标签的效果,然后使用<router-view></router-view>实现插槽的效果,把对应的页面 "塞" 进去,具体实...原创 2019-03-06 10:44:38 · 11549 阅读 · 5 评论 -
Vue中获取当前的元素
在开发中,我们可能会遇到这样的问题:文本框聚焦、元素点击等,然后操作事件中的dom或者它的其他父节点或兄弟节点,单独的话,可以用ref " 抽离 "出dom元素,然后通过 this.$ref获取,但是当有多个同样的元素需要实现同样的效果的话,ref就不能满足我们的需求,绑定同一个ref只会获取最后一个元素,有人会说可以通过循环然后使用this,但是这样就会涉及到this指向问题,如果使用箭头函数,...原创 2019-03-09 09:51:42 · 10099 阅读 · 0 评论 -
浅析deep深度选择器
之前在开发中遇到一个问题,vue项目结合element ui使用。但是element ui的样式不一定符合我们的需求,这时我们就需要改变它的样式。比如博主使用到了element ui的表格,但是表格有默认的背景色,鼠标滑过还有默认的高亮颜色。我想要改变这个鼠标滑过的样式,所以我需要在页面中审查元素找到对应的标签。但是当我找到并且复制,然后试图去改变它的样式时,怎么都没办法改变。...原创 2019-03-14 09:44:53 · 14288 阅读 · 7 评论 -
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢?以下是常用的三种方法:1、jQuery操作dom(推荐指数:★☆☆☆☆):只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元...原创 2019-03-07 09:55:27 · 80693 阅读 · 7 评论 -
vue使用代理解决请求跨域问题
在日常开发中,我们前端必不可少的需要像后端请求数据。但是一般前后端分离,所以域名、端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制。在一般情况下,后端都会设置请求跨域允许的来源、方法等。但是也保不准后端疏忽而忘记这个问题。那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题。其实,我们前端也可以解决跨域问题,那就是使用代理。举个例子:我请求的地址是这...原创 2019-03-15 09:37:35 · 4856 阅读 · 0 评论 -
Vue父组件获取子组件中的变量
在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题。之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看。案例一:点击父组件的按钮,操作子组件显示注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用。介绍:这里通过给...原创 2019-03-21 09:35:04 · 13827 阅读 · 2 评论 -
vue结合axios实现restful风格的四种请求详解
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,基本请求有5种:get:多用来获取数据 post:多用来新增数据 put:多用来修改数据(需要传递所有字段,相当于全部更新) patch:多用来修改数据,是在put的基础上新增改进的,适用于局部更新,比如我只想修改用户名,只传用户名的字段就ok了,而不需要像put一样把所有字段传过去 del...原创 2019-03-13 10:36:58 · 16695 阅读 · 5 评论 -
vue+mock.js实现前后端分离
之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离。安装:npm install mockjs这里先写个小案例介绍一下具体使用,写法不规范,仅供参考。然后案例讲完后我们讲具体的规范使用那么一起来看看这个案例吧:<script> import Mock from "mockjs" expo...原创 2019-03-30 09:57:07 · 2553 阅读 · 3 评论 -
element ui-table爬坑
之前在vue中使用element-ui的表格,都是固定的key值,也就是这种情况。所以我们只要在table的data传入这个数组,然后在column的prop中传入key即可实现渲染表格,行数是数组的长度,每一列是传入的key<el-table :data="tableData" style="width: 100%"> <el-table-colu...原创 2019-04-02 10:07:46 · 1883 阅读 · 0 评论 -
Vue路由跳转+路由传参
之前在原生JS的开发中,我们经常会用到根据某一状态进行页面的跳转。比如:登录成功跳到首页,点击商品列表的某个商品跳转商品详情等。而常见的写法就是:location.href("index.html")那么vue是基于路由的,那么怎么进行页面的跳转?路由。大家都知道vue的每个页面级组件需要配置路由才可以使用,那么跳转页面也就是控制路由的切换。例如:点击登录按钮,跳转到...原创 2019-04-08 10:07:47 · 3412 阅读 · 1 评论 -
element ui中使用第三方字体小图标(亲测有效)
element ui我就不过多介绍了,它是基于vue的ui组件库,相信使用vue开发的人,难免离不开它们。那么在日常使用中,我们也可能会发现element ui中的内置小图标非常少,这时就需要我们结合第三方的小图标库来一起使用了。俗话说 1+1>2 。那么就拿阿里字体小图标来举例,看看怎么结合element ui一起使用。1、进入阿里小图标官网,挑选我们喜欢需要的小图标2...原创 2019-04-03 10:07:31 · 6004 阅读 · 2 评论 -
Vue锚点链接
锚点链接是我们在开发中经常会用到的一个技术点,常见的常见有,页面内容过多,而我们不希望拿鼠标一直来回滚动,就需要用到锚点链接,以 " 目录 " 的方式来进行对应的跳转。而在常见的项目中,锚点链接的使用方法是通过a标签的href属性跳转到某一个元素的id,来找到对应元素的位置,实现效果<!DOCTYPE html><html lang="en"><head...原创 2019-04-09 10:06:04 · 6983 阅读 · 0 评论 -
Vue中的监听机制
在日常开发中,我们可能经常会通过一个变量的值,去控制处理一些逻辑。比如,当我tepm的值为true的时候,我就需要去把某个变量增加1。反之则减一。但是,在js中,代码一般都是从上往下执行的,当我执行到某一行,去判断temp的值的时候,当然可以做到针对性的逻辑处理,但是当我越过这段代码,之后还需要根据temp的状态实时进行操作,就显得有点无力了。那么这时候就需要去监听temp值得变化,当...原创 2019-04-10 09:55:31 · 3847 阅读 · 0 评论 -
Vue中路由变化、父传子的变量为空
问题一:在vue中,父组件传递给子组件的数据,我们在挂载后打印它,会得到一个空的值也有可能报错(未定义),但是我们却可以直接渲染到页面上。那么这是什么原因呢?刚开始组件挂载,数据并没有从父组件传递过来,所以mounted打印不出来之所也页面能渲染,因为vue是数据驱动,当数据实时变更后,页面发生diff算法,会更新视图,所以才可以渲染那么我们想在mounted或其他地方使用它,...原创 2019-04-24 09:56:55 · 1300 阅读 · 0 评论 -
Vue封装的组件全局注册并引用
当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情。每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可。那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入)。如何封装组件就不多赘述...原创 2019-06-26 10:04:47 · 7846 阅读 · 0 评论 -
keep-alive(切换页面,保持状态)
接触过电商网站,大家可能对类似京东的一些方面比较有印象,比如我正在商品列表浏览商品,浏览了很长一段的商品,然后点击切换到其他页面了,再次点击回到商品列表页面,还在之前浏览的地方,类似这种功能是怎么实现的呢?这次就说说在vue中的简单实现。vue官网提供了keep-alive的方法(也算是内部封装好的组件吧)官网介绍中提到,keep-alive只能包裹在封装的组件中,而不能直接包裹在类似...原创 2019-06-24 10:09:59 · 5231 阅读 · 3 评论 -
vue中使用vuex(超详细)
vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。那么,我们一起来看看vue项目怎么使用它吧。(如果你对vuex有一定了解,不是刚接触的小白,请忽略第一步,直接查看第二步)一、适合初学者使用,保存数据以及...原创 2019-07-15 14:23:08 · 179536 阅读 · 74 评论 -
vue项目搭建流程
1、安装node(主要用于使用npm包管理器),配置npm的环境变量安装包下载官网地址:https://nodejs.org/zh-cn/(推荐使用长期LTS版,长期支持,稳定)注意下载的位数,默认是win10的64位,下载mac,win7,32位等可点击官网顶部的下载。直接一直下一步安装即可,可以更改安装路径,但还是建议默认路径安装。node安装包安装完自带node js的...原创 2019-03-05 15:30:51 · 6027 阅读 · 1 评论