前端,VUE
Arden Zhao
这个作者很懒,什么都没留下…
展开
-
Day 245/300 JS forEach 多层嵌套后数据无法更新到对象中
新增对象和编辑对象,对于业务场景下面的属性的值的默认值要区分,设置不同的默认值。一开始尝试,是在获取异步请求后,直接进行数据处理的,但是失败了,在另一边选择不同的业务场景下,一直无法更新。心情略崩溃,就是不行;发现是在选业务场景后,数据会有重新赋值的情况; 而选择重新赋值使用的旧有的对象。虽然到现在还是不大明白,为什么,数据渲染后,还是没有渲染到原始的对象中,这里先记录下。之后再补充。写在最后的话学习路上,常常会懈怠《有想学技术需要监督的同学嘛~》https://mp.weixin.qq.com/原创 2022-06-02 21:25:41 · 613 阅读 · 0 评论 -
Day 214/300 Vue3 Ref和Reactive区别
(一)需求被问到,Ref和Reactive区别,不会。这里小结记录下。(二)介绍1、共同点:都是用来创建响应式数据的;都可以创建对象类型的响应数据;2、不同点:(1)Ref主要用来创建基础数据类型的响应数据;<!-- 模板语法> <template> <div>{{state}}</div></template> //js 脚本setup(){ let state = ref(10) s原创 2022-04-24 17:29:10 · 369 阅读 · 0 评论 -
Day 213/300 Vue3 Options API 和Composition API区别
(一)需求面试时,被问到。Options API 和Composition API区别,没答上来。这里小结记录下。(二)介绍这俩可以归属到Vue2和Vue3的在写法层面的区别。1、Options API选项API是Vue2用法2、Composition API组合API是Vue3用法Demo 如下<template> <div id="app"> <input type="text" v-model="val" @keyup.ent原创 2022-04-23 21:49:58 · 1389 阅读 · 0 评论 -
Day 212/300 Vue this.$set原理
(一)需求Vue 在非响应式的时候会有新增属性但并没有新增属性的情况。解决方案是$set 重新设置下。(二)介绍1、Demo<script> const app = new Vue({ el: "#app", data: { user: { name: "test", }, }, mounted() {}, methods: { addAge() { // this.user.原创 2022-04-22 15:11:25 · 251 阅读 · 0 评论 -
Day 195/200 Vue3 项目使用CDN加速
(一)需求项目首屏加载慢,低峰时段8.7s,高峰时段甚至有60s+ 以上的反馈。(二)原因Vue-cli 本身是有对webpack 打包优化的。慢,是因为项目做了负载均衡 + nginx 做了限流。(起因是防止DDOS攻击,这里仍需优化)。由于打包后是静态文件,所以想到了使用CDN来加速的办法。(三)步骤1、修改vue.config.js文件导出文件路径之前服务器上使用的是相对路径。再次打包后,需要将项目路径,添加上CDN的绝对路径。module.exports = { publi原创 2022-02-23 16:35:24 · 1897 阅读 · 1 评论 -
Day 194/200 Vue-cli 改为 Vite2.0
1、需求Vue3项目开发时,随着项目模块的变多启动很慢,HRM的更新也挺慢的。想变快一些。2、Vue-cli 改为 Vite使用webpack-to-vite将webpack 转为vite的方式。1)安装及转化命令npm install @originjs/webpack-to-vite -gwebpack-to-vite <project path>2)安装后cd ocrnpm installnpm run serve-vite3、title报错需要在配置文件.en原创 2022-02-22 17:04:31 · 412 阅读 · 0 评论 -
Vue3.x中使用Clipboard.js
今天在项目中遇到了写入剪切板的需求,首先想到了在之前学习jquery时使用过的Clipboard.js,接下来就来记录一下使用方法及踩过的坑与解决办法。1.Clipboard.js介绍现代化的“复制到剪切板”插件。不依赖 Flash,不依赖任何框架。gzip 压缩后仅 3kb。 --翻译自官网由于是在Vue3环境下,所以这里使用插件:vue-clipboard3 将 Clipboard.js 支持 composition API2.安装因为是在Vue中使用 所以这里只介绍包管理工具安装方式npm转载 2022-02-18 18:44:36 · 1983 阅读 · 0 评论 -
Day 189/200 前端Table 表头及列表内容动态生成
1、需求Table表格的表头,以及列表数据根据接口返回的数据动态生成列表。2、分析1)动态生成表头中间的表头使用子组件的形式,根据返回来的数据,动态拼接生成列表的表头。将左右两边的表头拼接生成一个大的表头对象。2)动态生成表头以及对应的列表内容数据需要将第几个表头的列表项添加上。3、部分代码1)页面组件<vTable v-if="categorySum.length > 0" :tableColumn="columns" :tableData="categorySum"原创 2022-01-29 18:26:20 · 1876 阅读 · 0 评论 -
Day 188/200 前端实现Table导出表格Excel
(一)需求后端过年请假回家了,但是要做导出功能。Emm… 还要做Table表单各列数据的合计 。Demo截图如下(二)调研我做了调研,xlsx 可行。看资料是支持动态多列表表头的。着急上线,我就只实现了单列表头数据。发现,前端现在可以做的事情越来越多了。(三)实现步骤1、安装并导入包1)安装包npm install xlsx2)导入包import XLSX from 'xlsx'安装及简介详解可以看上一篇https://segmentfault.com/a/11900000原创 2022-01-29 10:01:10 · 1131 阅读 · 0 评论 -
Day 172/200 前端实现解析Excel等文件
前言突然来了需求,要求前端解析出上传文件中的数据,回显到页面上。以前一直是借助后端的帮忙,查了下资料发现前端有插件可以实现,备忘下~1、可解析文件2、支持框架3、安装包npm install xlsx4、相关代码1)HTML部分<div > {{ upload_file || "导入" }} <input type="file" accept=".xls,.xlsx" class="upload_file" @change="readExcel($event)"原创 2021-12-02 17:38:55 · 712 阅读 · 0 评论 -
Day 169/200 Vue3 如何设置定时器以及清除定时器?
前言搜了一堆,是支持Vue2 的this.$once,试了有报错,发现Vue3 被移除了,伤心,记录下解决方案。1、data 中生命data () { return { timer: null, } },2、mounted 钩子中定义方案及处理函数mounted () { this.timer = setInterval(()=>{ //处理部分 },3000) },3、beforeUnmount或unmounted的钩子中销毁原创 2021-11-25 11:03:55 · 3200 阅读 · 2 评论 -
Day161/200 Vue3 兄弟组件之间传值
前言以前总是被面试题,今儿遇到了问题可以用这个来解决,就自己写了下,还蛮好使~我遇到的问题是ant design+Vue3右侧页面改变,但左侧菜单没有改变,所以想了这个方法。1、安装$ npm install --save vue3-eventbus2、main.js 挂载import eventBus from 'vue3-eventbus'app.use(eventBus)3、使用第一个组件import bus from 'vue3-eventbus'export de原创 2021-10-14 15:37:48 · 234 阅读 · 0 评论 -
Day 145 Vue3 进行PDF展示
找了很多种,都不行,会有Vue2和Vue3 兼容的问题;亲测后,下面这个教程好使。https://www.52pojie.cn/thread-1391808-1-1.htmlhttp://vue3中使用pdfjs-dist预览pdf里面文档能实现,更详细的说明,可以参看超详细的vue3使用pdfjs教程_CherishTheYouth的博客-CSDN博客vue3中如何使用pdfjs来展示pdf文档在项目开发中碰到一个需求是在页面中展示pdf预览功能,本人的项目使用的是vue3,实现pdf预览原创 2021-09-14 16:27:35 · 321 阅读 · 0 评论 -
Day 143/200 Ant-Design 双日历格式校验失效
1、问题是:已经上传了,但是还是报错。(试了好多中办法,最后去掉name属性不报错了)2、如果还是想在表单前面加上红色 * 号怎么办?在单个表单项上添加{require:true} 即可<a-form-item label="起止日期" :rules="{required: true,message: '必填项',trigger: ['change']}"> <a-range-picker v-model:value="form.date...原创 2021-08-30 19:23:21 · 154 阅读 · 0 评论 -
Day125/200 Vue 3 如何使用$router 进行路由跳转
<script>import {useRouter } from 'vue-router'export default defineComponent({ setup() { const router = useRouter(); } //获取页面路由参数 console.log(router.currentRoute.value.params.id); //进行页面跳转 router.push({ name: 'Project' }).原创 2021-06-30 08:59:35 · 134 阅读 · 0 评论 -
Day 123/200 VueX dispatch如何传递和获取参数?
1、请求写法this.$store.dispatch("log/getLog",{params}).then((params) => { let data=this.$store.getters["log/getLog"]})2、接收参数getLog({ commit },params){ return new Promise((resolve, reject) => { axios({ .原创 2021-06-22 08:47:06 · 2622 阅读 · 0 评论 -
Day 120/200 Axios获取不到headers中的Authorization属性怎么办?
写在前面的话本地开发可以获取到服务端headers返回的Authorization,但线上环境获取不到headers中的Authorization很崩溃... 试了很多方法都不好使, 最后是后端同学改了NGINX配置好的解决方案是在NGINX中添加配置:Access-Control-Expose-Headers:Authorization参考链接:https://stackoverflow.com/questions/37897523/axios-get-ac...原创 2021-05-19 10:35:50 · 955 阅读 · 0 评论 -
Day 117/200 PostCSS plugin tailwindcss requires PostCSS 8
1、启动项目报错Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users2、安装包版本问题卸载现有版本npm uninstall tailwindcss postcss autoprefixer安装正确版本原创 2021-04-06 16:24:54 · 887 阅读 · 0 评论 -
Day 115/200 React You may need an appropriate loader to handle this file type, currently no loa...
前面的话新手上路,碰到报错蒙了,后来发现是图片引入失败安装file-loadernpm i -D file-loader在webpack.config.js中的rules数组中添加file-loader的相关配置注意1、图片的支持格式,在rules配置(不要引入不支持的图片格式)2、图片格式前面的标点写错了,是. 不是 ,...原创 2021-04-02 18:05:08 · 1091 阅读 · 0 评论 -
Day 108/200 Vue3+Vue-cli4 生产环境如何设置变量及跨域
写在前面的话今儿项目上测试环境,整了一天踩了不少坑,总结下,分享给大家(一)测试环境部署需要做的事儿1、接口配置,区分本地开发环境和线上环境;2、解决前后端项目分离的跨域问题(二)对应的解决方案1、官网有介绍,基础不好没看懂...https://cn.vuejs.org/v2/guide/deployment.html1)在根目录下新建.env.development.env.production2) 里面分别对应开发和生产环境;VU..原创 2021-03-03 21:59:08 · 205 阅读 · 2 评论 -
Day 105/200 如何去掉浏览器控制台打印出的Vue Warn
写在前面的话以后再也不说自己的擅于解决问题了一个黄黄的Vue Warn提示搞了半天多,都没有搞定,还是靠同学帮忙才弄的(一)先说问题项目启动后,一片warn提示,说明用法不够准确;改代码费劲;想开发快一点,就想去掉Eslint的配置和校验;(二)如何去掉1、发现氛围Vue 2和Vue3 由于页面结构不同,里面的配置文件啥的 都不一样;有点蒙;2、按照当下的Vue-cli4 的配置 找到Vue.config.js里面加了 配置项,不好使,继续懵逼;l.原创 2021-02-20 11:32:08 · 2032 阅读 · 1 评论 -
Day 100/100 Vue3.0 & Vue-cli4.5 跨域问题
写在前端的话除了后端解决跨域问题前端可以解决吗?答案是可以~~~(一)问题遇到了跨域问题,本地的URL是http://localhost:8080/#/接口请求是IP:端口报错,跨域了...(二)解决方案1、后端配置Access-Control-Allow-OriginAccess-Control-Request-Method2、前端解决问题1)在vue.config.js文件加入生产环境代理devServer: { ..原创 2021-02-02 19:45:14 · 323 阅读 · 0 评论 -
Day 99/100 Vue-router辅助搭建页面框架及跳转
写在前面的话在从0到1写项目整体的项目结构比较懵...整了一个下午,终于搭了一个动态的配置(一)项目问题如何进行整体的页面流转?一开始是通过页面v-if判断,加组件流转;但页面一多就扛不住了,这页面一多以后会比较懵逼啊...(二)解决方案是通过Vue-router1、在主框架的content中写<transition name="fade-transform" mode="out-in"> <router-vie...原创 2021-02-01 21:09:57 · 74 阅读 · 0 评论 -
Day 72/100 Vue template 和rander 的区别
写在前面的话今儿是一道面试题~找到的资料1、VUE一般使用template来创建HTML,而使用javascript来创建html要使用render函数。2、template逻辑简单,理解起来相对容易,但灵活性不足;render渲染方式可以将JS发挥到极致,通过createElement的方式创建虚拟DOM。其逻辑性较强,适合复发的组件封装。3、render(高)的性能要比tempate(低)要高。4、render函数的优先级大于template(优先级可能会误导我们的理解,换成原创 2020-11-28 23:39:10 · 131 阅读 · 0 评论 -
Day 67/100 Vue项目上线(Nginx)刷新后,显示空白或404怎么办?
写在前面的话服务器用的是Nginx做的转发;需要配置Nginx的try_files属性网上大多是单条说明,实际用的时候,还是容易错,记录备忘下~(一)配置代码其中Vue项目中的是history 模式核心代码就这一句(二)相关知识1、看着是一句,但生成后,怎么生效呢?需要停止,再启动service nginx stopservice nginx start2、项目如何传到服务器上呢,可以用rz命令见上一篇https://blog...原创 2020-11-13 09:24:24 · 238 阅读 · 0 评论 -
Day 56/100 Vue3.0比2.0优化的点有哪些
写在前面的话Vue也在进化,同样,我们的能力也可以提升~(一)代码和双向绑定原理1、使用TypeScript重构TypeScript包括了 ES5、ES5+ 和其他一些诸如泛型、类型定义、命名空间等特征的集合,而且能够编译成普通的Java 代码;支持任意浏览器,任意环境,任意系统并且是开源的2、使用Proxy API代替defineProperty API 作数据劫持3、默认进行懒观察(lazy observation)在 2.x 版本里,不管数据多大,都会...原创 2020-09-27 18:35:55 · 176 阅读 · 0 评论 -
Day 51/100 Vue双向绑定原理及相关知识链接
写在前面的话面多了,问题五花八门,但也有一些规律,比如,今儿的题就是常考题~(一)Vue的双向绑定原理实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和原创 2020-09-22 21:57:50 · 126 阅读 · 0 评论 -
Day 49/100 Vuex的工作流程
写在前面的话昨儿去看房了~ 今儿补上发现前端岗位的能力要求包括两部分:1、基础知识:JavaScript的基础知识(含算法)2、Vue,没错,就是Vue(大有一统江湖的意思)(一)功能负责Vue中多次复用的状态(主要是异步请求,即与后台交互的接口)(二)流程1)在vue组件里面,通过dispatch来触发actions提交修改数据的操作。2、然后再通过actions的commit来触发mutations来修改数据。3、mutations接收到commit..原创 2020-09-20 08:35:37 · 127 阅读 · 0 评论 -
Git 协作方式
生产与测试分支master 分支的最新提交永远指向当前生产环境的代码 develop 分支的最新提交永远指向当前测试环境的代码 禁止直接在这两个分支上进行开发,各开发者在自己的分支上提交代码,由管理员合并到这两个分支上。禁止直接将自己的代码推送到这两个分支上。 管理员每次部署后需在相应分支上打上标签,方便回滚。 #### 开发分支 每人在自己的分支上进行开发。 精细化提交代码,最好每...原创 2018-07-25 16:28:21 · 203 阅读 · 0 评论 -
指令和组件区别
组件通常都有对应的html代码,表示一快具有特定样式、逻辑和功能的实体,可以为组件添加指令来实现想要的功能;一个应用通常会被切分为各个小的组件。指令通常用于给某已存在DOM添加相应的行为,例如v-if、v-for等,定义指令的时候一般不需要特定的视图;...转载 2018-04-11 21:12:46 · 1512 阅读 · 0 评论 -
使用Nightwatch进行E2E测试中文教程
E2E测试E2E(end to end)测试是指端到端测试又叫功能测试,站在用户视角,使用各种功能、各种交互,是用户的真实使用场景的仿真。在产品高速迭代的现在,有个自动化测试,是重构、迭代的重要保障。对web前端来说,主要的测试就是,表单、动画、页面跳转、dom渲染、Ajax等是否按照期望。E2E测试驱动重构重构代码的目的是什么?是为了使代码质量更高、性能更好、可读性和拓展性更强。在重构时如何保证...转载 2018-03-01 16:32:12 · 478 阅读 · 0 评论