![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
文章平均质量分 62
天猫精灵998
这个作者很懒,什么都没留下…
展开
-
React 引入 @vue/reactivity 实现响应式状态管理
看了 ssh 大佬的一篇文章,觉得挺有意思,刚好最近也在研究全局数据流方案,因此根据大佬的思路自己也尝试了一下。vue-next 是 Vue3 的源码仓库,Vue3 采用 lerna 做 package 的划分,而响应式能力 @vue/reactivity 被划分到了单独的一个 package 中。这个包提供了几个核心 api :effecteffect 是一个观察函数,它的作用是 收集依赖 。effect 接受一个函数,这个函数内部对于响应式数据的访问都可以收集依赖,在响应式数据更新之后,就会触发原创 2021-09-10 13:14:37 · 1548 阅读 · 0 评论 -
在 vscode 中使用 Cascadia Code 字体
经常看到别人的 VS Code 字体样式非常炫酷,特别是 => 和 === 有特殊效果。后来查了下原来是用了 Cascadia Code 字体,这边介绍一下怎么安装这个字体。首先到 GitHub 上下载这个字体:https://github.com/microsoft/cascadia-code/releases下载之后双击 .ttf 文件安装即可。这边说明一下怎么在 VS Code 中配置。打开 settings.json ,把 Cascadia Code 字体添加到 editor.f原创 2021-08-07 09:44:11 · 4151 阅读 · 0 评论 -
关于 Webpack 和 Vite 的一点思考
最近基于 ES module 的 bundleless 构建工具很火,特别是尤大在到处推广 Vite ,号称“下一代前端构建工具”,在前不久的 VueConf 2021 上,尤大可谓狠狠地宣传了一下。以至于一度有很多人认为,有了 Vite 之后就不再需要 Webpack 了。虽然 Vite 现在确实很火,也有很多人在尝鲜,但现实恰好与大家的观念相反,目前几乎没人把 Vite 用于实际的项目开发。首先先要先明确一个问题,为什么 Webpack 需要打包?个人认为主要有两点原因:第一,在过去由于 HTTP/1原创 2021-06-07 16:43:27 · 1423 阅读 · 1 评论 -
egg.js 使用 mongoose 读取数据返回空数组的问题
egg-mongoose 有一个官方示例:module.exports = app => { const mongoose = app.mongoose; const Schema = mongoose.Schema; const UserSchema = new Schema({ userName: { type: String }, password: { type: String }, }); return mongoose.model('Use原创 2021-02-10 18:20:25 · 379 阅读 · 0 评论 -
egg.js 项目初始化
初始化 egg.js 项目的时候,即使把 npm registry 设置为淘宝源,egg.js 内部默认还是会从 npm 官方源拉取依赖,连接经常会 timeout ,导致初始化项目失败。解决方法:手动指定 egg.js 的 npm 源首先全局配置npm源:$ npm config set registry https://registry,npm.taobao.org全局安装 egg-init 工具:$ npm i egg-init -g初始化项目并配置npm源:$ egg-init e原创 2021-02-10 11:45:21 · 343 阅读 · 0 评论 -
Vue3.0 + Vite 初体验(一)项目配置
Vue3.0 已经发布一段时间了,特别是还发布了一个打包构建工具 Vite,据说是可以干掉 webpack 的,趁这段时间有空,本人也体验了一下。想使用 Vue3.0 不一定要用 Vite,vue-cli 也可以构建。$ npm install -g @vue/cli确保已经升级到最新的版本:$ npm update -g @vue/cli$ vue --version然后创建项目:$ vue create vue3-demo选择第二个 Vue 3 Preview,或者自定义安装使原创 2021-01-17 22:31:24 · 9098 阅读 · 1 评论 -
后端返回二进制文件流,前端如何下载文件
项目中有一个download接口,这个接口直接返回二进制文件流。之前如果下载文件,一般后端传一个加密串过来,然后前端进行解密,拼接成URL再去下载。现在等于直接把文件发给前端,这种情况下怎么下载文件?问了下同事,他们也没遇到过这种情况,好在网上有不少资料可以参考。下面先给出解决问题的思路,最后再给链接。二进制流接收首先需要接收后端传过来的二进制流。默认情况下axios不会处理二进制数据,即请求可以正常被浏览器接收,但是axios不会去处理。需要在请求的时候设置responseType: 'blob'才可原创 2020-11-10 20:57:20 · 24499 阅读 · 4 评论 -
vxe-table使用遇到的问题
项目中用到了vxe-table,昨天在用的时候遇到了一些问题,这里总结一下。prop和label弃用项目中有这样一段代码:<vxe-table ref="xTable" border :data="tableData" @toggle-row-expand="toggleExpandChangeEvent"> <vxe-table-column prop="name" label="姓名"></vxe-table-column> <vx原创 2020-11-03 11:46:07 · 8672 阅读 · 0 评论 -
Vue中template的相关注意点
使用template进行条件渲染如下所示,有一段内容:<h1>尊贵的年费会员</h1><div>此处内容仅年费会员可见!</div><h1>亲爱的普通用户</h1><div>您不是年费会员无权访问,请前往用户中心充值!</div>这段内容如果想要加v-if进行条件渲染,一种做法是在外面套一个<div>,代码如下:<div v-if="hasAuthority"> <原创 2020-10-03 15:12:07 · 1473 阅读 · 0 评论 -
antd的anchor组件点击锚点导致路由发生变化
测试的同学反映,antd的anchor组件在点击锚点后会修改URL,而单页应用中如果使用哈希模式的路由,当URL被修改后,刷新页面会导致请求的资源不存在而出现404的情况。原本的路由是http://localhost:8066/#/home由于锚点上有href="#"属性,点击之后URL就变成了这样http://localhost:8066/#/项目模板这样的路由刷新之后肯定就会出现404的情况,那么需要怎么解决呢?看了下antd的文档,发现有个click事件这个事件的回调函数第一个原创 2020-09-29 18:54:15 · 3468 阅读 · 2 评论 -
Vue动态获取浏览器窗口宽度
项目中有一个需求,搜索框需要根据页面宽度动态变化,例如宽度小于等于1280时搜索框的宽度为280px,大于1920时宽度为360px,在1280和1920之间则根据比例缩放。由于页面是flex布局,并且靠两端对齐的,所以min-width和max-width基本上是排不上用场了。当时首先想到的是媒体查询,但是媒体查询不能实现按比例缩放的效果。后来想到通过JS获取页面宽度,然后根据宽度来判断搜索框应该取多少宽度。那么这个逻辑应该放在什么位置呢?先在计算属性里面试了下,代码如下:<template&原创 2020-09-28 17:10:25 · 10262 阅读 · 1 评论 -
position: fixed如何相对父元素定位
在项目中遇到一个问题,项目中有一个弹框,弹框中有一个anchor组件,弹框中的内容可以滚动,而anchor组件需要相对于弹框保持固定。我们知道,position: fixed是相对于浏览器窗口进行定位,而弹框宽度是固定的,浏览器窗口的宽度则是不确定的,所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢?查了下资料发现,虽然position:fixed是对于浏览器窗口定位的,但是只要不设置fixed元素的top,bottom,left,right,此时该元素就是相对于父元素进原创 2020-09-27 20:33:19 · 8417 阅读 · 6 评论 -
vue-router两种路由模式
前端路由路由这个概念最先是后端出现的,简单来说就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内原创 2020-09-21 22:47:30 · 443 阅读 · 0 评论 -
Vue中使用v-for不能用index作为key值
今天在改一个项目,有一个<el-tabs>的列表循环,需要根据权限控制列表项的显示,代码如下:<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in accessTabs" :key="index" :label="item.label" :name="i原创 2020-09-17 22:00:49 · 1239 阅读 · 0 评论 -
Vue 父子组件生命周期顺序
Vue中父子组件生命周期顺序如下:可以看到父组件在渲染完成之后并不是马上挂载,而是先等待子组件创建、渲染、挂载完成之后再去挂载。父组件先初始化 => 父组件渲染完毕 => 子组件开始初始化 => 子组件挂载完毕 => 父组件挂载完毕那么在子组件中怎么知道父组件是否挂载完成呢?可以使用EventBus作为事件总线。在main.js中定义Vue.prototype.$bus = new Vue(),将$bus变量挂载到Vue的原型上,这样Vue实例就可以访问到这个变量。在原创 2020-09-15 23:20:11 · 1304 阅读 · 0 评论 -
详解Vue中的样式穿透>>>
如果想在一个组件中覆盖插件的样式,就需要用到样式穿透。发现问题:组件无法覆盖插件的样式如下所示,下面是一个分页器插件,默认的颜色是蓝色,定义在.swiper-pagination-bullet-active中。如果想要覆盖插件默认的样式,在组件中直接设置样式是不会生效的。这是因为组件自己的样式出现在前面,而插件的样式会从后面进来。如图所示,可以看到head标签中有多个style,组件样式定义在最上面,而插件的样式在下面。由于两处地方都设置了同一个属性,后面设置的属性优先级更高,因此插件的样式胜原创 2020-08-31 23:29:57 · 9058 阅读 · 2 评论 -
Vue中keep-alive的用法以及activated,deactivated
keep-alive的用法在vue中切换组件的时候会自动销毁之前的组件,这样的话再切回之前的组件就要重新加载,数据什么的要重新请求接口,状态不能保留。如图,从任务切换到缺陷,任务的列表就被销毁了,再次切到任务会重新加载组件。<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。在路由中可以在meta中设置需要被缓存的组件。import Vue from 'vue'import Router from 'vue-router' V原创 2020-08-26 16:55:42 · 906 阅读 · 0 评论 -
Vue组件间通信 - 非常全面
父子组件通信1. 使用props和$emit()父组件 -> 子组件:父组件使用v-bind(冒号是简写)传参,子组件通过props接收子组件 -> 父组件:子组件使用$emit()向外传递自定义事件,父组件通过v-on(@是简写)监听,可以使用$event接收参数,也可通过定义一个method接收参数这应该是项目中最常用的方法,不多说了吧。父组件代码如下:<template> <div> <h1>这是父组件</h1>原创 2020-08-24 23:20:38 · 183 阅读 · 0 评论 -
报错replace of undefined导致页面加载阻塞
今天登录项目主页的时候发现项目列表一直在loading。看了下接口请求都是正常的,但是控制台报了一个错误Cannot read property “replace” of undefined。根据报错的提示,找到了出错的代码。把这段代码注释掉,然后再加载页面,显示就正常了,说明是这里执行出现错误,阻塞了页面加载。很奇怪,之前都是正常的,为什么突然就报错了呢?<el-col :span="4"> <div class="creat-time"> {{ item.cre原创 2020-08-20 10:47:06 · 2761 阅读 · 0 评论 -
Vue中props一定就是只读吗
项目中遇到很多父子组件嵌套的场景,比如父组件中有一些概览信息,子组件中是详情数据,例如表格。数据由父组件通过xhr请求获取,然后传参给子组件,在子组件中通过props接收,然后通过监听props的变化,将该值传给data。在很多业务场景中,子组件的详情数据都需要支持编辑操作,编辑操作通常是做两件事,一个是通过接口向后端发送更新的数据,二是更新组件的data,以更新视图。但是如果只更新子组件自己的data,那就无法与父组件保持同步,概览信息无法更新。为使父子组件之间能够同步数据,通常的做法包括:子组件向父组件原创 2020-07-31 22:45:22 · 4017 阅读 · 1 评论 -
Vue组件嵌套传值
在项目中遇到这样一个场景,有5个层层嵌套的组件,最里面的组件要传一个id到最外面的组件。解决思路:首先找到最外面的组件,通过组件注册关系,一层一层找到子组件task.vue组件内容如下:import taskTable from '@/components/task/taskTable'import createTaskDialog from "@/components/task/createTaskDialog";components: { 'task-table': taskTabl原创 2020-07-24 20:45:05 · 1109 阅读 · 0 评论 -
Vue.js视频播放事件
vue.js 视频播放原创 2020-06-25 09:41:24 · 1892 阅读 · 0 评论 -
隐藏横向滚动条
在一些项目列表中又是会出现横向滚动条,在css中设置如下属性即可隐藏:overflow-x: hidden;另外使用 v-if 指令不能只判断数组,因为有时后端可能传过来空数组,所以还要判断一下数组的长度 <section id="videos" ref="videos"> <course-player v-if="course.videoList && course.videoList.length" :video-li原创 2020-06-23 18:02:50 · 972 阅读 · 0 评论 -
Vue 实现组件之间的通信
在项目中遇到了这样一个需求,在一个组件中要改变另一个组件里 data 下面数据,下面就来看看怎么实现。在本篇教程中,主要通过 props/$emit 实现传递,还有很多别的方法,以及 vuex 都可以实现,后面再慢慢总结吧。1.组件的嵌套关系在项目中有两个平级的组件 KitRecords.vue 和 KitDrawer.vue ,它们都包含在父组件 ResearchContent.vue 下面,需要通过 KitRecords.vue 组件去改变 KitDrawer.vue 组件的 drawerShow原创 2020-06-20 11:55:04 · 181 阅读 · 0 评论