Vue技术栈
文章平均质量分 66
用来记录Vue的精通之路,包括源码阅读笔记,面试题,实战技巧等
铁锤妹妹@
日日行,不怕千万里;常常做,不怕千万事。
展开
-
Vue源码学习 - 模版编译 和 组件渲染/更新过程
平时开发写的 以及里面的变量、表达式、指令等,不是html语法,是浏览器识别不出来的。所以需要将 template 转化成一个 JS 函数,这样浏览器就可以执行这一个函数并渲染出对应的 HTML 元素,就可以让视图跑起来了,这一个转化的过程,就成为模板编译。原创 2023-08-02 14:32:59 · 1372 阅读 · 2 评论 -
Vue源码学习 - 虚拟Dom 和 diff算法
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再去看Diff 算法原理,循循渐进会更好些。渲染真实的 DOM 时,并不是暴力覆盖原有的 DOM ,而是比对新旧两个vnode(虚拟节点),如果不是同一个节点,删除老的,替换成新的;如果是同一个节点,就复用老节点,增加新节点的属性。原创 2023-07-31 10:34:58 · 600 阅读 · 0 评论 -
Vue源码学习 - 异步更新队列 和 nextTick原理
在我们使用Vue的过程中,基本大部分的 `watcher` 更新都需要经过 `异步更新` 的处理。而 `nextTick` 则是异步更新的核心。原创 2023-07-27 17:40:29 · 970 阅读 · 0 评论 -
从Vue层面 - 解析发布订阅模式和观察者模式区别
观察者模式和发布订阅模式作为日常开发中经常使用到的模式,我一直不能做到很好的区分。最近在看Vue的源码,里面设计到了观察者模式,比较感兴趣,就去学习了下,这里做个总结吧。原创 2023-07-26 17:31:29 · 2508 阅读 · 2 评论 -
Vue源码学习 - 数据响应式原理
Vue的数据响应式原理核心就是通过 Object.defineProperty 来拦截对数据的获取和设置。主要分为两类:对象和数组。原创 2023-07-25 16:49:42 · 702 阅读 · 1 评论 -
Vue源码学习 - new Vue初始化都做了什么?
如果觉得直接看源码很枯燥,可以结合前人总结的文章或者视频来看,相信会事半功倍。源码这个东西,一定要多看多思考,要想精通,一遍两遍肯定是不够的。有的时候可能看着一个问题就会想通之前看过但是不明白的另个问题。原创 2023-07-25 16:39:10 · 567 阅读 · 2 评论 -
vue中子组件间接修改父组件传递过来的值
父组件传递值给子组件是单向数据绑定; 子组件不能直接修改父组件的数据,但是可以间接修改数据。原创 2023-02-26 18:52:23 · 7797 阅读 · 3 评论 -
vue中实现后台系统权限管理的功能
后台管理系统的权限控制对于前端来说是经常用到的知识点,也比较重要,最近梳理一下写成文章,方便以后查阅。项目中实现菜单的动态权限控制使用到了两种技术,一种是Vue Router,另一种是vue3官方推荐使用的专属状态管理库Pinia。原创 2023-01-19 17:09:56 · 6074 阅读 · 3 评论 -
js将后端返回的文件流导出为excel,并自定义下载文件名
后台管理系统,常会出现导出excel表格功能;点击导出按钮,请求后端接口,需要将接口返回的`文件流`导出为excel,实现前端下载excel文件。原创 2022-12-13 10:11:58 · 10959 阅读 · 1 评论 -
vue路由传参当刷新页面时,参数变成“[object Object]”
如果传参是一个`对象`,点击进入页面路由可以获取对象的值;但是刷新页面会导致获取不到对象值,被强制转换为字符串 `"[object Object]"`,导致数据不能使用。转载 2022-11-25 16:32:03 · 5263 阅读 · 3 评论 -
uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)
在做vue项目或者uniapp开发微信小程序时,经常会用到组件之间传值,因此想总结记录下。原创 2022-10-31 14:47:55 · 10633 阅读 · 0 评论 -
vue3全局自定义指令实现按钮权限控制
在很多后台管理系统中,常常需要针对某个页面的按钮进行权限控制。比如说,角色A用户拥有该页面的新增,编辑,删除权限;角色B用户拥有该页面编辑权限。那么对于角色B用户来说,该页面新增,删除按钮应该是不可见的。这就需要我们自定义指令来控制按钮的显示和隐藏。...原创 2022-07-17 18:19:35 · 7543 阅读 · 6 评论 -
vue获取上一个页面路由地址
项目需求是需要在当前页面获取上一个路由地址,并根据不同地址进行请求不同接口和页面样式调整的操作。记录一下:需要用到vue-router的beforeRouterEnter钩子其实也就是一个路由守卫<script>export default { data() { return { fromPath: "", }; }, beforeRouteEnter (to, from, next) { next(vm => { cons原创 2022-05-03 22:25:23 · 26058 阅读 · 8 评论 -
vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案
1.介绍amfe-flexibleamfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。2.介绍postcss-pxtorempostcss-pxtorem是postcss的插件,用于将像素(px)单元生成rem单位。具体步骤:1. 安装两个插件npm install amfe-flexible --savenpm install postcss-pxtorem --save2. 在main.js导入amfe-flexibleimport 'a.原创 2022-03-18 10:01:10 · 5772 阅读 · 2 评论 -
删除数组(对象)中的某一项
场景项目中有个订单列表,提交订单之后用户可以选择取消订单,既然要取消订单,前端这边就得想办法把这个订单请求后端删除接口,在不刷新订单列表的情况下从前台删除,不刷新列表个人感觉体验更好。 // 确认取消订单 confirmOrder(order_id) { uni.showLoading({ title: '加载中', }) xxxApi['cancelOrder']({ order_sn: order_id }) .then((原创 2021-12-20 21:35:03 · 10724 阅读 · 0 评论 -
vant-list组件瀑布流滚动加载展示数据长列表
介绍:瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。基础用法:List 组件通过loading和 finished两个变量控制加载状态,当组件滚动到底部时,会触发 load事件并将loading 设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可。若数据已全部加载完毕,则直接将finished 设置成 true 即可。html...原创 2021-03-21 21:44:44 · 6757 阅读 · 9 评论 -
学习笔记之Vuex总结(Vue状态管理)
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。原创 2021-11-05 17:00:05 · 1881 阅读 · 1 评论 -
vue中使用watch监听数组和对象变化的总结
watch深度监听 deep: true原创 2021-09-29 11:44:34 · 20369 阅读 · 2 评论 -
vue中时间戳转日期格式化的方法(一看就会)
一. 利用vue的filter过滤器这里用到的是局部过滤器首先需要安装moment时间插件 moment文档npm install moment然后在需要过滤的文件中引入moment时间插件import moment from 'moment';代码如下<template><div> <div class="admin-apply-time">{{content.create_time | timeFilter}}</div><原创 2021-09-17 15:47:56 · 1259 阅读 · 0 评论 -
vue使用el-select下拉框匹配不到值的优化方案
一. 问题描述点击编辑弹窗里从上面列表行数据里取到的乙方名称变成了乙方id15,产生的原因是因为弹窗里的甲乙方列表是从接口请求来的,比如后期某个乙方公司关停了,这条数据就会被删除,导致我们取不到这条数据查看接口返回的列表,发现少了行数据中的乙方这条数据二. 解决思路findIndex() 返回值判断编辑当前行数据取到的id和甲乙方列表里的id是否有一样的; 如果有相同id的话,返回第一个符合条件的数组成员位置,都不符合条件,则返回 -1如果返回数组成员位置 < 0 的话,从列表行数原创 2021-09-15 11:15:00 · 5196 阅读 · 0 评论 -
vue中插槽,具名插槽及其缩写的使用
什么是插槽< slot />?插槽是给组件预留的空间,当封装组件时往往会给组件使用插槽,插槽如何使用由父组件决定,插槽中的内容如果没有在该组件中插入其他任何内容,就默认显示插槽中的内容。简单的来说就是将写在父组件里的内容插入到子组件里需求: 在子组件中显示 ‘学习插槽’ 几个字首先在父组件中引入Dialog子组件,并在中间写入内容//这是父组件里的代码,引入子组件Dialog<Dialog> <P>学习插槽</P></Dialog&原创 2021-08-10 11:01:51 · 1686 阅读 · 0 评论 -
如何在vue中优雅地使用v-if判断
情况一:做vue项目,有的时候会遇到有几个元素都使用同一个v-if条件。下面这种方法虽然可以实现,但是整体代码看起来有点笨拙,我们可以用<template>标签进行优化一下。<template> <div class="card"> <img src="../../assets/image/background frame.png" /> <h3 v-if="expanded">123</h3> <原创 2021-07-28 14:38:40 · 11783 阅读 · 0 评论 -
vue中实现大转盘抽奖灯光闪烁
在 Vue 中使用安装插件npm install vue-luck-draw找到 main.js 全局引入插件并 use,或者在组件中按需引入插件。// 完整加载import LuckDraw from 'vue-luck-draw'Vue.use(LuckDraw)// 按需引入import { LuckyWheel } from 'vue-luck-draw'Vue.components('LuckyWheel', LuckyWheel)最后在组件内使用 <Lu原创 2021-07-18 20:45:41 · 1969 阅读 · 0 评论 -
RSA对数据进行加签和验签
rsa有两个非常重要的作用:加密和加签加密时用公钥加密,私钥解密。加签时用私钥加签,公钥验证签名。加签的目的:验证信息的发送方是否正确,信息是否被其他人篡改。加密的目的:保证信息的隐私,不被别人看到,只能让接收方看到正确的信息理解:私钥用来解密和签名,是给自己用的。公钥由本人公开,用于加密和验证签名,是给别人用的。当该用户发送文件时,用私钥签名,别人用它给的公钥验证签名,可以保证该信息是由他发送的。当该用户接收文件时,别人用它的公钥加密,他用私钥解密,可以保证信息只能由他接转载 2021-06-22 11:01:20 · 773 阅读 · 0 评论 -
vue中如何使用canvas循环生成多张海报?
一. 需求背景长按分享图片,图片中含有自己分享链接生成的二维码,需要把二维码和背景图合成一张海报,项目需求是循环生成多张海报二. canvas画布的生成条件要生成画布的html元素不能是隐藏状态。如果不想页面显示出来的话,可以给个 margin-top: -999999999px;生成画布方法需要在页面渲染结束之后执行。三. 如何生成单个画布 ?思路:根据自己的分享链接通过vue-qr生成一个二维码;获取要生成画布的容器,比如通过id或者that.$refs获取页面元素外原创 2021-05-31 22:06:41 · 2624 阅读 · 0 评论 -
vue中如何添加自定义环境变量 ,process.env取值报错undefined
一. 前言我们在做vue单页应用的时候,会发现配置文件里有procsss.env字段如果手动修改代码中加载配置文件的路径也可以,但是太麻烦,最重要的是很low依靠环境变量,标记服务器,这样就可以根据不同的环境,配置不同环境下我们所需要的东西。例如:后端接口的域名。二. process.env(环境变量)console.log(process.env);// 可以自己打印试试process.env属性会返回包含用户环境的对象。通俗来讲,该属性可以返回项目运行环境的信息。三. 配置环境变原创 2021-05-31 16:04:05 · 14503 阅读 · 11 评论 -
微信h5如何自定义内容分享到朋友圈和朋友功能实现
一、需求分享的是当前页面,可自定义标题,副标题,图片,链接url;这里最好让后端出个接口,直接请求后端接口把当前页面url作为参数传给接口,获取微信配置参数比较快,也不容易出错。并且官方也说了出于安全考虑,开发者必须在服务器端实现签名的逻辑二、思路安装微信JSSDK向后台接口请求微信配置参数初始化微信分享配置API;这里只分享到朋友,QQ,朋友圈,QQ空间main.js 全局配置分享三、过程安装weixin-js-sdknpm install weixin-js-sdk原创 2021-05-30 18:24:55 · 2238 阅读 · 4 评论 -
vue中如何使用crypto-js,进行3DES的加密解密(实践好用)
需求背景项目中后端要求前端请求后台接口时对请求参数进行加密处理。因为我的需求是加密可逆,后端要求使用3DES加解密,最后返回返回base64格式加密过得,传给后端,后端再进行解密。什么是3DES??3DES(即Triple DES)是DES向AES过渡的加密算法,它使用3条56位的密钥对数据进行三次加密。是DES的一个更安全的变形。原版DES容易被破解,新的3DES出现,增加了加密安全性,避免被暴力破解。它同样是对称性加密,同样涉及到加密编码方式,及填充方式。它以DES为基本模块,通过组合分组方原创 2021-05-30 00:21:08 · 2448 阅读 · 9 评论 -
vue中如何使用better-scroll实现横向滚动?
一、滚动的实现原理better-scroll的滚动原理和浏览器原生滚动原理是一样的,当子盒子的高度大于父盒子的高度,就会出现纵向滚动;同理,如果子盒子的宽度大于父盒子的宽度,那么就会出现横向滚动。二、better-scroll的 html 结构先来看一下 better-scroll 常见的 html 结构:<div class="wrapper"> <ul class="content"> <li>...</li> <li&g原创 2021-05-29 22:24:21 · 3040 阅读 · 9 评论 -
微信h5缓存清理技巧
问题背景H5移动端开发,尤其是基于微信的公号开发,往往伴随着很严重的缓存问题,很影响开发心情,自己用过了比较好用,希望能帮助到大家安卓清除缓存在微信搜索框中输入http://debugx5.qq.com 清除缓存ios清除缓存点击微信右上角三个点在弹窗里选择刷新页面...原创 2021-05-27 17:32:22 · 1368 阅读 · 0 评论 -
如何在vue的html中写js代码
如题所示,v-if的写法大家都知道,但是如果要在html的class或者其他属性里面写js判断该如何写呢?1. 使用三元表达式判断属性 :readonly="xxx ? true : false"2. js根据条件判断使用不同的class//如果xxx变量含有+号,则使用 red_money 类名// 否则使用 money 类名<p :class="item.xxx.indexOf('+') >= 0 ? 'red_money' : 'money'">原创 2021-05-12 23:05:01 · 4124 阅读 · 0 评论 -
npm run serve 运行报错 Cannot read property ‘prefix_exceptions‘ of undefined 需要先清除缓存数据
问题npm run serve 运行后报错原因node_module文件缓存导致解决方案第一步:npm指令清除npm缓存npm cache clean --force第二步:删除node_module包第三步:再使用npm install就可以了原创 2021-05-10 15:17:23 · 877 阅读 · 1 评论 -
vue中获取当前时间日期
实现效果:通过计算属性来获取当前时间 <div class="mounth"> <div class="datatime" @click="showTimePopup(userCheckMonth ? userCheckMonth : current_date)" > <span class="time">{{ userCheckMonth ? us原创 2021-05-09 20:12:28 · 3942 阅读 · 0 评论 -
vue中点击按钮变色,选中按钮后字体变色效果实现
类似下图中的一个效果默认按钮为全部,点击其他按钮时候按钮变成绿色并且文字变成白色html模板 <div class="typeBox"> <span class="type_item" v-for="(item, index) in typeList" :key="index" :class="current_type === index ? 'typeActi原创 2021-04-29 11:54:02 · 8913 阅读 · 2 评论 -
vue中给对象添加属性(使用this.$set())
项目需求:项目中需要判断当c_type ==3,在原来对象sendData基础上多传一个pinkId参数,有pinkId就传没有就传空值具体办法使用this.$set(a,b,c)添加新属性这里有a,b,c三个参数a:对象b:属性名c:属性值例:sendData是一个对象,给sendData对象添加一个pinkId属性,值为有值的话就传,没有的话传空 this.$set(sendData,‘pinkId’,this.pinkId ? this.pinkId : ‘’)object.ass原创 2021-04-13 15:30:52 · 2357 阅读 · 0 评论 -
vue中局部过滤器和全局过滤器的使用
关于 vue 过滤器在vue1.0的时候其实是内置了过滤器的,但是考虑到好多过滤器并不一定会被开发所调用,所以把原本内置的过滤器就给去掉了,但是过滤器还是比较普遍的,所以我们从vue2.0之后就需要自己定义过滤器以上是vue官方对于过滤器的介绍,它通常被用在插值表达式或属性绑定上。vue 过滤器分类过滤器分为两种,一种是局部过滤器,一种全局过滤器。所有的过滤器都是函数,并且参数为要过滤的数据。局部过滤器:只允许在当前组件中使用全局过滤器:所有组件都可以使用局部过滤器 //转载 2021-04-09 15:25:14 · 1061 阅读 · 0 评论 -
vue 中使用axios请求拦截器和响应拦截器
前言在使用一些前后端会话时,需要在请求头中携带一些特殊请求头,这样,就需要设置请求拦截器和响应拦截器开发项目时,由于后端使用了token令牌,登录后在前端保存,然后每次请求都要携带token,将这些配置写在main.js文件中是很乱的不易于阅读,额外配置了axios请求配置模块 这样在以后对于请求响应都能更好的配置而不会影响其他配置如果不使用请求拦截,那么对每一条请求每一个状态都要特殊处理,如果请求特殊状态有数十个,每个页面有很多请求,那么页面会变得很长很臃肿,不好维护。参考:https://bl转载 2021-03-31 11:50:11 · 625 阅读 · 0 评论 -
vue项目中编辑和新增用的是同一个弹窗,如何判断用户点击是编辑还是新增?
1. 前言最近在做后台管理,一个页面中会用到多个弹窗,所以整合成一个弹窗就好,另外需要判断用户点击是编辑还是新增,相应的进行一些操作,这个问题也挺常见的,记录一下吧~新增弹窗编辑弹窗2. 问题首先,这里有两个问题1. 编辑所在的这个组件和新增所在的这个组件这是两个子组件,怎么让编辑和新增同时使用一个弹窗2. 点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的3. 解决问题针对问题一:绑定title,在data里面定义dialogTitle为空,然后点击新增或者编辑弹窗之前给他赋值原创 2021-03-25 14:15:38 · 8674 阅读 · 20 评论 -
vue中将后台返回的数字转换成对应的文字,通过动态绑定类名修改文字颜色
前言:项目中有展示订单状态这样一个需求,后端数据返我的是数字,但前端展示的是文字‘已购买’,‘退卡中’,‘未购买’;后端要求是数字为10表示‘已购买’颜色为绿,11或者12代表‘退卡中’颜色为橙,null代表‘未购买’颜色为红;基于这个需求,来记录一下这里用到了vue的动态绑定类名思路:先在样式里定义好用到的几个颜色vue的动态绑定类名,如果item.earn_profit_type == '10'为true,class类名就是green,如果item.earn_profit_type ==原创 2021-03-18 16:05:10 · 3179 阅读 · 1 评论 -
vue设置元素style 颜色样式
项目中由于卡片背景颜色是变化的,为了美观要使卡片上文字颜色也会变;需要通过接口获取颜色值本质上和普通添加style方式是一样的<div class="number" :style="{ color: color }"> {{ $route.query.card_id ? $route.query.card_id : "" }} </div>export default { data() { return { color: ""原创 2021-02-25 18:00:55 · 13289 阅读 · 0 评论