Vue全家桶系列
文章平均质量分 81
以实战为线索,逐步深入Vue开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力,增加项目经验
一百个Chocolate
一个小帅哥和某厂前端搬砖。
频道内容: 前端技术,编程,我的思考。
用心去做自己热爱的事情️
座右铭: 学如逆水行舟,不进则退。
展开
-
「成长之路」挥手2020,Chocolate 同学年度总结,所遇 | 所思 | 所学 | 所悟(年度征文)
挥手2020,Chocolate 同学年度总结,所遇 | 所思 | 所学 | 所悟(年度征文)原创 2020-12-29 20:52:06 · 5600 阅读 · 52 评论 -
【源码篇:总结与思考】虚拟节点与DOM Diff算法源码实现
DOM Diffdom diff 其实就是对比两个虚拟节点,然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异,然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。而对于虚拟节点呢,我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来,通过比较两个新老虚拟节点,得到彼此的差异,形成一个补丁,最后再与真实的 dom 进行匹配,将这些补丁打到真实 dom 上去,最终,我们还是操作了原来的真实 dom,但是我们是用了差异化结果的 最小的代原创 2020-09-27 20:28:39 · 615 阅读 · 2 评论 -
「斑愿称为最肝」小狮子前端知识食谱 / 生日之际,好运分享 / 秋招和你手摸手入大厂【史上最全指北】 | CSDN技术征文
生日之际,记录自己前端拼搏之路~2020年8月12日,破壳的一天,小狮子の21岁。特意在前一周准备了这篇博文,记录自己前端拼搏之路。此外,也入驻了掘金社区,发现了许多优秀前端博主,他们的文章内容输出都非常精致,我觉得有必要好好学习一下。下文会有一部分自己感想,如果大家想要看干货的话,不妨跳到正文处阅读即可。其余部分闲暇时间阅读一下也是不错的嗷。生日愿望:希望拿到一个满意的 offer ,成为一个优秀的前端博主!秋招在即,经过反复思考之后,我想到了一个提高效率的方式。原本的话,我可能会从头开始又把.原创 2020-08-12 00:01:11 · 2505 阅读 · 6 评论 -
字节跳动前端面试准备(一)
拓展什么是原生开发?什么是混合开发?两者有什么区别?原生开发(NativeApp开发):像盖房子一样,先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等,原生APP同理:通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来,一层层,一段段全用代码写出来此种APP的数据都保存在本地,APP能及时调取,所以相应速度及流畅性有保障混合开发(HTML5开发):这个就相当于一种框架开发,说白了就是网页;该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户原创 2020-06-12 10:52:58 · 1966 阅读 · 2 评论 -
字节跳动前端一面面经
投递初春招过去了,面了两次腾讯,两次一面直接gg,但这两份经历对我是有很大帮助的,体会到了一定差距。但在6月份,看了牛客网讨论区,又发现了字节跳动一直在招人,从未停止过,而且正好某天瞧见了内推码,于是乎,我又想尝试一下了,赶紧迭代一下简历,投!投!投!要求1、计算机、软件相关专业;2、熟悉HTML, CSS, JavaScript和HTTP协议基本知识;3、熟悉常用的数据结构以及其使用场景;4、有参与设计和实现的项目(无论大小);5、了解浏览器调试工具;6、有强烈的求知欲和进取心,具有扎实原创 2020-06-12 10:52:04 · 3910 阅读 · 18 评论 -
【前端】那些容易忘掉的前端知识 Vue梳理篇
面试官:你居然还可以这样回答?原创 2020-05-05 16:05:46 · 6000 阅读 · 11 评论 -
【前端】那些容易忘掉的前端知识 webpack梳理篇
一文解锁前端知识,梳理webpack,原来可以这样回答!原创 2020-05-04 22:50:56 · 1027 阅读 · 0 评论 -
2020 vue 美团全栈项目(完结)
Vue全家桶+SSR+Koa2 全栈开发仿美团网☀☀☀项目地址: https://github.com/Chocolate1999/Vue-family-bucket-SSR-Koa2-full-stack-development-from-Meituan学习地址:传送门项目介绍融汇 前端+服务端 全栈项目,提供后端数据接口,源码开放,可进行二次开发与优化。主要业务首页登录/注册...原创 2020-04-18 19:55:16 · 4588 阅读 · 7 评论 -
【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程 整合 学习目录(持续更新中)
Vue全家桶+SSR+Koa2全栈开发仿美团学习笔记,目前达27035字数,提供本次学习源码原创 2020-04-16 13:35:31 · 2830 阅读 · 2 评论 -
【白嫖党】如何把前端学好?看完这篇,直呼:太强了!(历经半个月之作)
很少有文章做到将知识形成一个体系,于是需要翻阅很多资料,但这篇文章做到了!共34815字数。原创 2020-04-04 21:35:42 · 23099 阅读 · 74 评论 -
【再也不怕面试官要你手写排序算法】一文详细解读前后端之各种排序算法及知识拓展(附图示) JS / C / C++
金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门,觉得不错,点个Star★,好运连连,Offer终究鼠于你,持续更新中。原创 2020-03-31 22:21:38 · 1883 阅读 · 4 评论 -
Vue 技术栈 快速学习 前端面试
一直想着要写一定深度的文章,然后觉得学习Vue是一个好的过程,本文将带你走进Vue的世界,支持国内框架! 如果看完本文还不懂Vue是什么的小伙伴,可以随便打博主!长文预警!原创 2020-03-01 09:14:35 · 1048 阅读 · 0 评论 -
来自 菜鸟 的 前端实习面经 大厂 春招实习生
转眼到了该实习的时间,或许还是自己不够优秀把,感觉挺搞心态的,我的第一份投递的公司直接就刷了我,我连面试的资格都没有,当时看到“不匹配”三个字的时候,我顿时有点了难受,心态感觉被搞了一下。或许这就是现实把。然后我独自思考了5分钟后,还是得从自己找找问题,我要想凭什么其它公司就会招我,谁又会愿意找一个萌新然后还要发钱给他呢? 想来还是自己不够优秀。原创 2020-02-28 19:57:45 · 5182 阅读 · 16 评论 -
剖析 Vue 原理 | 实现 双向绑定 MVVM
本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助转载 2020-02-24 17:09:46 · 670 阅读 · 0 评论 -
Vue 3.0 将正式发布,对我们有哪些 改变 ?
众所周知,vue3.0在去年开放了源码,并且今年将发出真正的可用于开发的版本。那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?自身性能的变动一、更快带来更快的改动主要有两方面1、vue3重新审视了 vdom,更改了自身对于 vdom的对比算法。vdom从之前的每次更新,都进行一次完整遍历对比,改为了切分区块树,来进行动态内容更新。也就是只更新 v...原创 2020-02-24 13:57:16 · 2113 阅读 · 0 评论 -
Vue 中 数据劫持 Object.defineProperty()
本文能帮你了解到什么?我们都知道vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,本文将由浅到深带你理解和使用defineProperty转载 2020-02-24 11:24:48 · 3028 阅读 · 0 评论 -
UI层的设计模式—从Script到Code Blocks、Code Behind到MVC、MVP、MVVM
许多时候并不是一种模式不好,而是因为人没办法执行,比如不容易理解,我们就会选择容易理解的方式。`计算机依赖摩尔定律用数量的增长来解决问题,而人是用方式的改变来解决问题的`。同样因为客观原因我们不善于维护多个对象和多个对象之间的关系,所以我们改变了,或者说简化了这种方式。转载 2020-02-23 20:29:18 · 825 阅读 · 0 评论 -
提问!你真的懂 前端框架(framework ) 与 库(library) 怎么区别吗?
本文将带你区别前端框架与库,弄懂总比不懂好对吧?最近被问到这个问题,其实到我被问到这问题之前,都没有认真的考虑过它们的区别,处于学习以及好奇心理,查阅了相关文档,其中包括知乎、stackoverflow等相关问题和文章,总算是略知一二,并以此写下来分享给伙伴们。原创 2020-02-23 19:11:26 · 1861 阅读 · 0 评论 -
Vue源码 阅读前必须知道 javascript 的基础内容
vue目前是前端使用频率较高的一套前端mvvm框架之一,提供了数据的`响应式`、`watch`、`computed`等极为方便的功能及api,那么,vue到底是如何实现这些功能的呢?在探究vue源码之前,必须了解以下几点javascript的基本内容,通过了解这些内容,你可以更加轻松的阅读vue源码。转载 2020-02-23 12:39:31 · 802 阅读 · 0 评论 -
【Netbeans 快捷键】10 个超好用的代码编辑器快捷键
你知道,有多少人在页面上搜索文本时不使用 “Ctrl+F” 吗?IT 热衷于生产率,生产率热衷于快捷键令人惊讶的是,许多开发人员并未养成使用快捷键的习惯。我认识一些非常优秀的程序员,他们只是在努力学习。这就像养成每个习惯一样,我们必须在开始时付出一些努力,一旦我们习惯了,那就会有回报。我们一起回顾下 Netbeans 的快捷键。 为了简单起见,采用 Windows 的命名方式来命名对应...原创 2020-02-08 14:33:11 · 1103 阅读 · 2 评论 -
2020 前端必看 20个最好的 前端 Web开发工具
引言市面上有许多前端开发工具可以加速 Web 开发工作。本文是对一些顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接。1. Novi BuilderNovi Builder 是一个拖放式构建器,它对于经验丰富的 Web 开发人员而言是一个不错的选择。它为开发人员提供了访问源代码的权限,并允许开发人员在 Web 设计中进行多项更改。你能用它完全控制你的 W...原创 2020-02-08 14:11:26 · 6074 阅读 · 3 评论 -
【Vue全家桶】一文 教你 Vu e如何 关闭线上源码 移除console
版本大于等于3.0不会有问题,本文基于Vue CLI 3.0搭建。原创 2020-02-08 12:53:58 · 1107 阅读 · 1 评论 -
一文带你看透Vue前端路由
背景介绍 vue router是vue.js官方的路由管理器,它和vue.js的核心深度集成,让构建单页面应用变得易如反掌,它的功能有:嵌套的路由,或者是,视图表;模块化的,基于组件的路由配置;路由参数,查询,通配符,基于Vue.js过渡系统的视图过渡效果,细粒度的导航控制;带有自动激活的CSS class的链接,HTML5历史模式或者是hash模式,在IE9中自动降级;自定义的滚...原创 2020-02-05 19:07:17 · 626 阅读 · 0 评论 -
【Vue全家桶】站在面试官的角度和面试官交谈 Vue 问题
站在面试官的角度和面试官交谈 Vue 问题,这些问题你造吗原创 2020-02-05 14:53:29 · 986 阅读 · 2 评论 -
【前端】vue前端交互模式-es7的语法结构?async/await
前端发请求,调用后端接口,来获取特定格式的数据,老板问了,你会前后端交互模式吗?vue的那种。异步接口调用,常常使用到的语法,promise的概念是什么呢?调用接口的方式,第一种为,fetch进行接口调用,第二种为,axios进行接口的调用。es7的语法结构?async/await方式调用接口,基于不同接口的调用方式来实现案例。让我们了解一下前后端的交互模式,学习一下promise的语法,来回...原创 2020-02-05 12:45:55 · 593 阅读 · 0 评论 -
熟练掌握 JavaScript 中的 this,call,apply 的原理
文章目录前言1、this的用法 2、call的用法3、apply的用法区别:参数书写方式不同前言为什么要学习在掌握JavaScript中的this,call,apply,因为面试官会问啊!所以我们 必须掌握才能答啊!那么this是什么,Function.prototype.call和Function.prototype.apply这两个方法又是如何使用在JavaScript中的呢。1、th...原创 2020-02-05 09:07:49 · 467 阅读 · 1 评论 -
如何快速提升 JSON.stringify() 的性能?
文章目录1. 熟悉的 `JSON.stringify()`2. 比 stringify 更快的 stringify3. 如何生成“定制化”的方法3.1. fast-json-stringify3.1.1. scheme 的定义方式3.1.2. stringify 方法的生成3.2. slow-json-stringify3.2.1. scheme 的定义方式3.2.2. stringify 方法的...原创 2020-02-04 20:59:28 · 621 阅读 · 0 评论 -
【爱丽丝、鲍勃和马洛里】分分钟让你理解HTTPS
文章目录一、HTTP存在的问题二、HTTPS介绍一、HTTP存在的问题可能被窃听HTTP 本身不具备加密的功能,HTTP 报文使用明文方式发送由于互联网是由联通世界各个地方的网络设施组成,所有发送和接收经过某些设备的数据都可能被截获或窥视。(例如大家都熟悉的抓包工具:Wireshark)认证问题无法确认你发送到的服务器就是真正的目标服务器(可能服务器是伪装的)无法确定返回的客...原创 2020-02-03 19:26:56 · 957 阅读 · 0 评论 -
关于Vue那些事儿—Javascript 传递异步操作 #Promise#
文章目录Promise in js概念Promise 对象有以下两个特点基本的 api我们可以做三件事:1. 封装同步与异步代码2. 捕获同步异常3. 多个异常捕获,更加精准的捕获4. 获取两个 Promise 的返回值5. finally6. bind7. All。非常用于于处理一个动态大小均匀的 Promise 列表8. Join。非常适用于处理多个分离的 Promise9. Props。处理...原创 2020-02-03 19:03:20 · 788 阅读 · 1 评论 -
2020年 前端面试题整理汇总100题【整理】
1.一些开放性题目1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五年的规划是怎样的?position的值, relative和absolute分别是相对于谁进行定位的?absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元...原创 2019-12-25 00:20:15 · 985 阅读 · 0 评论 -
2020 (详)RGB颜色查询大全 #FFFFFF【颜色列表】
颜色名列表颜色名十六进制颜色值颜色AliceBlue#F0F8FFrgb(240, 248, 255)AntiqueWhite#FAEBD7rgb(250, 235, 215)Aqua#00FFFFrgb(0, 255, 255)Aquamarine#7FFFD4rgb(127, 255, 212)Azure#F0FFFFrgb(240, 255, 255)Beige#F5F5DCrgb(24...原创 2020-02-01 18:04:39 · 22486 阅读 · 3 评论 -
2020 必须收藏的vscode主题【清爽的前端配置 vue】
Horla Light Them:浅色主题,非常好学如逆水行舟,不进则退原创 2020-01-26 23:14:38 · 19669 阅读 · 4 评论 -
2020 (已解决)VScode提示安装包损坏,请重新安装 安装background插件成功
文章目录1、引言2、问题3、解决1、引言我终于把vscode那个背景给安装成功了,原来是一个插件原因,导致我出现安装包错误!2、问题出现这个错误是因为安装的插件修改了vscode软件本身的核心文件导致的提示,解决步骤如下,有同样问题的朋友可以参考一下:3、解决安装Fix VSCode Checksums打开命令面板,快捷键 Ctrl + Shift + P输入命令Fix Che...原创 2020-01-26 22:58:46 · 8598 阅读 · 18 评论 -
2020 零基础到快速开发(史上最全百科全书) Vue全家桶开发电商管理系统(基于Element-UI)
文章目录1、引言2、电商后台管理系统的技术选型3、快速入门篇4、电商管理系统开发(百科全书)5、结束语 点击进入Vue❤学习专栏~1、引言又是一个寒假,曾经一个学霸说过:寒假是用来反超的!,所以这个寒假来和我一起学习Vue把,我会把我做的全部整合在这一个目录当中,算是给自己一个学习记录,也方便读者进行查阅。我的项目其实在1月24日正好过除夕的那天完成了,大约是10天左右的时间,边记录边做项目,...原创 2020-01-26 22:28:05 · 1685 阅读 · 11 评论 -
2020 这或许是程序员最真实工作精神状态?
【1】程序员的一周穿搭【2】这个问题我遇到过,小意思... 【3】结对编程选了一个猪队友【4】原本只是想拆分模块、解耦 【5】程序员真实工作精神状态【6】找好工作准备跳槽的你【7】下一站科技软件园,请给有需要的程序员让个座 【8】程序员简历中的自己 【9】当我遇到一个可重现的错误时 【10】想早退,被领导发现了 【11】当实习生修复一个Bug的时候 学...原创 2020-01-25 13:43:17 · 4793 阅读 · 3 评论 -
2020 Vue零基础 基于Element-UI开发 (全)项目优化与部署上线(npm,基于vue ui) 下篇
文章目录1、引言2、承接上篇3、项目上线相关配置4、上线——通过node创建Web服务器5、上线—— 开启 gzip 配置16、结束语及进一步展望 点击进入Vue❤学习专栏~1、引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于我们项目优化与上线,请多指教~2、承接上篇上篇地址:推荐阅读——2020 Vue零基础 基于Element-UI开发 (全)项目优化与部署上线(npm,基于...原创 2020-01-24 14:16:42 · 4150 阅读 · 4 评论 -
2020 Vue零基础 基于Element-UI开发 (全)项目优化与部署上线(npm,基于vue ui) 上篇
文章目录1、引言2、介绍项目优化的策略3、优化——通过nprogress添加进度条效果4、优化——解决serve命令中提示的ESLint语法错误5、优化——在执行build命令期间移除所有的console6、优化——只在发布阶段移除所有的console7、优化——生成打包报告8、优化—— 通过 vue.config.js 修改 webpack 的默认配置9、 为开发模式与发布模式指定不同的打包入口...原创 2020-01-24 11:52:05 · 5445 阅读 · 2 评论 -
2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)数据统计篇
文章目录1、引言2、分类参数篇2.1 通过路由加载数据报表组件2.2 安装Echarts并渲染Demo表图2.3 获取折线图并渲染图表2.4 本篇源码:3、结束语 点击进入Vue❤学习专栏~1、引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于数据统计,请多指教~2、分类参数篇2.1 通过路由加载数据报表组件<!-- --><template> ...原创 2020-01-23 22:50:34 · 1567 阅读 · 2 评论 -
2020 Vue(5分钟上手Echarts)基于Element-UI开发 安装Echarts并渲染Demo表图
文章目录1、引言2、安装Echarts并渲染Demo表图先通过路由加载数据报表组件最终实现效果:项目源码:3、结束语 点击进入Vue❤学习专栏~1、引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于安装Echarts并渲染Demo表图,请多指教~2、安装Echarts并渲染Demo表图安装这里提供两种方式: 第一种:npm指令:npm install echarts --s...原创 2020-01-23 22:33:50 · 2912 阅读 · 2 评论 -
2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)订单管理篇
文章目录1、引言2、分类参数篇2.1 通过路由渲染订单列表页面2.2 根据分页获取订单数据列表2.3 渲染订单table表格2.4 实现分页功能2.5 实现省市区县数据联动效果2.6 展示物流进度对话框并获取物流信息2.7 手动导入并使用Timeline组件3、结束语 点击进入Vue❤学习专栏~1、引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于订单管理,请多指教~2、分类参数篇2...原创 2020-01-23 21:59:39 · 3579 阅读 · 2 评论