- 博客(71)
- 收藏
- 关注
RSS订阅原创 VUE.js组件通信精髓归纳（基础篇）
前言文章涉及的内容可能不全面，但量很多，需要慢慢看。我花了很长的时间整理，用心分享心得，希望对大家有所帮助。但是难免会有打字的错误或理解的错误点，希望发现的可以邮箱告诉我1163675970@qq.com，我会及时的进行修改，只希望对你有所帮助，谢谢。vue 何为组件化？我们可以很直观的将一个复杂的页面分割成若干个独立组件每个组件包含自己的逻辑和样式再将这些独立组件组合完成一个复杂的页面。...
2019-10-15 16:30:44
246
原创 【Vue原理】Vue源码阅读总结大会 - 终
写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧【Vue原理】Vue源码阅读总结大会 - 终终于啊终于啊，把 Vue 系列的文章发完了了，如释重负的感jio啊，今天就打算总结下，我这段时间...
2019-10-15 16:30:07
231
原创 Vue 开发必须知道的 36 个技巧【近1W字】
前言Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;所以应该趁还没出来加紧打好 Vue2.x 的基础;Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;后续 Vue 3.x 出来后持续更新.1.require.context(...
2019-10-15 16:29:25
322
原创 Vue 关于移动端的那些事情（一）
想法最近公司项目可能会用到vue的技术，趁现在有时间，就开始搞移动端的适配，为了方便开发，我的想法是(viewport+rem+flex)。rem那块需要进行一个换算需要做一个适配处理，为了方便最好是根据规定的图(本文采用iPhone6)编写px，然后通过工具对px进行转换成rem(px2rem)。好了，需求已经理清了，开搞！！！。行动关于适配问题的解决方案第一种适配方案在网上查看资料，...
2019-10-15 16:28:33
301
原创 「数据可视化库王者」D3.js 极速上手到Vue应用
前言D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的维护下，前景依然无量，至少现在没有能打的:D3与众多其他库的区别在于无限定制的能力（直接操作SVG）。它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。...
2019-09-29 15:37:57
436
原创 Vue生命周期详解
文章目录一. Vue生命周期介绍**生命周期的含义：**从Vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些时间统称为生命周期**常见叫法：**生命周期钩子 == 生命周期函数 == 生命周期事件1.1 生命周期分类下面，将从这三个阶段，依次来学习Vue的生命周期1.2 创建阶段beforeCreate：实例刚在内存中创建出来，还没有初始化 data和 methods，...
2019-09-29 15:37:03
113
原创 近两万字小程序攻略发布了
该内容由银科控股融汇研发部曹俊及其团队授权提供。该团队拥有 10 多名小程序开发，深耕小程序领域，总结出了本篇优质长文。同时本篇内容也已经合并入我的 开源项目 中，目前项目内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等内容，无论是基础还是进阶，亦或是源码解读，你都能在本图谱中得到满意的答案，希望这个面试图谱能够帮助到大家更好的准备面试。小程序-登录union...
2019-09-29 15:36:31
365
原创 使用webpack配置一个小型vue-cli脚手架
简介使用vue的朋友都是知道vue-cli，他是一个基于webpack的vue脚手架，通过vue-cli配置好一整套环境可以更快的开发，从而提高了工作效率。而我们可以学习它的一些配置可以熟悉webpack的构建流程，从而更好的开发，本文讲述了如何配置一个小型的vue-cli脚手架。项目地址: mini-vue-cliwebpack开发环境基本配置项目初始化参考webpack文档npm ...
2019-09-29 15:35:27
213
原创 Webpack 打包太慢? 试试 Dllplugin
webpack在build包的时候，有时候会遇到打包时间很长的问题，这里提供了一个解决方案，让打包如丝般顺滑~介绍在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案CommonsChunkPluginDLLPlugin对于 CommonsChunkPlugin，webpa...
2019-09-27 14:50:14
241
原创 这可能是你见过的最便捷的Vue i18n Vscode插件
契子vue项目国际化非常的繁琐:将所有出现的要国际化的汉字复制取名配置在vue/js文件中找到汉字位置，区分是在template中标签的label或者其他property中，或者{{}}中script，又或者script中的，手动将一层一层的国际化key拷贝，粘贴。就算是相同的汉子，由于在vue中的语法不同，需要重复的拷贝，粘贴碰到一堆汉字拼接的简直要了老命/(ㄒoㄒ)/~~快速开始...
2019-09-27 14:47:41
2392
原创 vue 数据更新却不render？
以下都基于数据已经渲染到 dom 上后再对数据进行修改，console 出来的数据更新了，但绑定的 dom 不更新的问题更新对象的属性不renderdata() {return {detail: {}}}created() {this.detail = {a: ‘1’, // 更新b: ‘2’ // 更新}}mounted () {this.detail.c = ‘...
2019-09-27 14:46:45
1325
原创 Vue 实现前端权限控制
登录&&权限流程图前言首先我们确定的权限控制分为三大部分，其中根据粒度大小分的更细：登录权限控制页面权限控制菜单中的页面是否可以被访问页面中的按钮 (增、删、改、查)的权限控制是否显示接口权限控制一、登录权限控制登录访问权限控制是对用户的校验。在用户登录成功之后，后台将返回一个token，之后前端每次进行接口请求的时候，都要带上这个token。后台拿到这个toke...
2019-09-26 16:42:59
387
原创 Vue项目优化方案
经过对项目结构 / 开发方式 / 技术架构的研究，再次提出部分可以优化的点。刚加入新公司之后，在学习来新公司的开发技术之后，就迫不及待的想要将自己过往的开发方式和技巧融合到现在的项目中，下面是针对目前项目的中一些技术点的改进思路此方案主要由如下几点组成：代码编写规范Api层抽离Request工具更高效封装路由分离配置方案目录结构整理数据请求优化Mock数据配置方案在不断的编写过...
2019-09-26 16:42:23
601
原创 这几天国外关于 Vue 新 API 的一些争论
本文只是翻译 ???? 掘金的排版比知乎好太多了。首先是 Reddit 上有人发帖。标题：Vue 3 将大变——目前的语法会被弃用，组合函数将最终作为创建组件的唯一方式内容：尤雨溪几天前发布了一篇 RFC（意见征求稿），介绍了 Vue 3 里基于函数的 API。许多我们正在使用的特性都会被弃用，诸如 data、computed、methods、watch、mixin、extends 和生命周期...
2019-09-26 16:41:48
193
原创 基于Vue CLI3 搭建五脏俱全的移动端H5应用
前言之前开发vue项目，一直是自己搭建脚手架，并没有使用配套的Vue-CLI。一、是3.0之前的CLI无明显优势，配置繁琐；二、是觉得自己从零配置项目可控性更强。Vue-CLI 3.0 于去年8月份就已发布，却一直没去了解。近日，有新Vue H5项目开发，就想着用Vue CLI3.0脚手架构建项目。并记录一下构建使用过程。使用脚手架最好的参考就是官方文档，官方文档整体还是比较清晰明了的，更新...
2019-09-26 16:40:55
1891
原创 [手把手系列之]Docker 部署 vue 项目
Docker 部署 vue 项目1.写在前面：Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖...
2019-09-25 15:51:08
1308
原创 富文本原理了解一下？
缘起最近产品想让我在富文本里加个旋转图片的功能，我一想????，就觉得事情并不简单，因为印象中好像没见过这种操作。果然，经过一番百度之后，确实没怎么看到相关信息，这也就意味着要自己动手丰衣足食了????。但我自己对富文本又没什么了解，所以顺带稍微看了下富文本的实现方式，特此来沉淀一下，还是那句话不喜勿喷哈????。ok，这里先简要说下为什么会有富文本这种东西吧????！大概可能也许是因为有一天产品用着用着 texta...
2019-09-25 15:50:16
301
原创 你要的Vue面试题都在这里。
Vue.js介绍Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；Vue.js是一个构建数据驱动的Web界面的库。Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue生...
2019-09-25 15:49:39
205
原创 vue项目整合Eslint和stylelint规范代码
前言最近在搭建项目框架，想着上一个项目代码风格各异，就想着在新项目中引入Eslint来规范团队成员代码风格，保持统一，也方便大家维护代码，减少不必要的错误。前端应用愈加复杂，代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索出的一些配置，各取所需。Eslint配置在用vue-cli3搭建项目的过程中就会问你是否需要Eslint，选择就好来。如果没有选择后期又想加入eslint，可以手...
2019-09-25 15:48:55
1751
原创 这些Web API真的有用吗? 别问，问就是有用
本文列举了一些列比较不常见的Web API，内容较多，所以有关兼容性的内容在本文不会出现，大家可以自己去查阅。 以下案例能配动图的我尽量去配了，以免内容枯草乏味，但是如果内容有误，也请大家亲喷或者纠正????方法列表querySelector（元素向下查询，返回一个）querySelectorAll（元素向下查询，返回多个）closest（元素向上查询）dataset（获取元素以"data-"...
2019-09-24 17:02:16
304
原创 零基础的前端开发初学者应如何系统地学习？
回想四年前我刚入行的时候，那时候很多人对于前端的看法是“切图，画页面，有个编辑器+浏览器就能干，门槛低”，现在已经完全不是那样了，可以说现在的前端这个职业的门槛虽然还是没怎么变，但是整个行业的门槛提升了，换句话说就是整个行业对于前端这个职位要求更高了，对于前端小白的需求量降低，对于高级前端的需求量还在上升，甚至是供小于求的局面。从市场经济学角度上讲你只有进入到高级级别，才能真正吃到行业的红利。 因...
2019-09-24 17:01:41
151
原创 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
本文是内部的一次分享沉淀，偏向基础但是涉及了一些有意思的细节，文笔有限，才疏学浅，文中若有不正之处，万望告知。前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。而本文的主题 – 移动端开发的兼容适配与性能优化，就是希望能从一些常见的移动端开发问题出发，厘清 Web 移动端开发的前前后后，一些技术的发展过程，一些问题...
2019-09-24 17:01:10
371
原创 手写算法并记住它：快速排序（5行代码简单版）
对于经典算法，你是否也遇到这样的情形：学时觉得很清楚，可过阵子就忘了？本系列文章就尝试解决这个问题。研读那些排序算法，细品它们的名字，其实都很贴切。比如快速排序，一个快字就能体现出其价值，因而它是用得最多的。因为它相对难一些，本系列将分两篇文章讲解它。本篇是一种简单实现版本，与归并排序做对比，摸清快排的总体思路。下一篇才是常见于各教程中的原地排序算法。快速排序这个名字是针对其性能来起的...
2019-09-24 17:00:16
507
原创 Dio 3.0发布，支持Flutter Web 和 Http/2.0
Flutter 一周前发布了1.9 版本，其中最大特性是将Flutter Web合入了主分支。而今天，Dio 也正式发布了3.0.0，该版本最大的特性是支持Flutter Web 和 Http/2.0。升级提示：由于Dio 3.0需要支持Flutter Web，需要对代码进行较大的重构，所以并不能完全向下兼容，2.1版本用户可参考 3.0升级指南 。支持Flutter Web开发者只需要将F...
2019-09-23 16:07:31
839
原创 很好用的 UI 调试技巧
在业务开发过程中，想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS，因此就会频繁使用到 DevTools 中的选择元素功能。其实我们可以使用一个 CSS 技巧给所有元素加上 outline，这样就能迅速了解自己所需的元素位置信息，无须再选择元素查看了。我们只需要添加以下 CSS 就能为任何网站添加这样的效果html * {outline: 1px solid red}复制代...
2019-09-23 16:05:55
221
原创 前端工程实践之可视化搭建系统
原创不易，希望能关注下我们，再顺手点个赞~~本文首发于政采云前端团队博客： 前端工程实践之可视化搭建系统（一）背景随公司业务不断发展，营销活动、广告、页面改版等需求日益倍增，靠纯人工撸代码已经无法跟上需求增长速度。加班？招人？显得不够明智，也不够前端，提效也就成为了关键。如何提效？从何入手？那不得不提的就是前端提效神器 —— 搭建系统，下文将从多个方面，向大家简单介绍政采云前端团队 ZooT...
2019-09-23 16:05:15
3559
原创 收下这波 JS 技巧，从此少加班
各种业务开发都离不开对数据的处理，然而遇到的很多数据都是不好处理的。这个时候就需要寻求搜索引擎的帮助。这种方法效率是非常低下的，而且根据作者的个性不能保证其对自己的口味。因此这篇文字包含了一份 JS 常用业务函数手册，例如时间格式的处理、用的是哪个手机浏览器，手机号、邮箱的验证，以此来提高你的开发效率常用 JS 函数1.时间格式化界面展示的时间千变万化, 所以一个处理时间的函数，它的重要性就...
2019-09-22 15:12:12
110
原创 从vue-loader源码分析CSS Scoped的实现
本文同步在个人博客shymean.com上，欢迎关注虽然写了很长一段时间的Vue了，对于CSS Scoped的原理也大致了解，但一直未曾关注过其实现细节。最近在重新学习webpack，因此查看了vue-loader源码，顺便从vue-loader的源码中整理CSS Scoped的实现。本文展示了vue-loader中的一些源码片段，为了便于理解，稍作删减。参考Vue CSS SCOPED实现...
2019-09-22 15:11:31
792
原创 使用 Proxy 构建响应式系统
????本篇博文可能学到的知识点更好的理解 Vue 响应式工作原理学习 Vue 的设计模式学习 Proxy API使用 Proxy 实现观察者模式现代前端开发必不可少会用到的 Vue、React 等框架，这些框架的共同之处在于都提供了响应式（Reactive）和组件化（Composable）的视图组件，组件化开发重新定义了前端开发技术栈。结合前端构建工具以及基于框架出现的各种经过精心设计的UI...
2019-09-22 15:10:31
250
原创 promise笔记-自己实现一个简易promise
Promise干嘛用一个异步解决方案例如 多个setTimeout()嵌套造成回调地狱setTimeout(function() {// do something…setTimeout(function() {// do something…}, 1000)}, 1000)复制代码可以用Promise解决new Promise(function(resolve, reject...
2019-09-22 15:09:42
183
原创 观众老爷们，来试试这个用 Vue 撸的数据可视化后台吧
国际惯例： 项目Github地址，欢迎 Star✨✨dongsuo/vue-data-board✨✨首先放个线上地址大家感受一下(由于后端用的是 leancloud 的免费套餐，因此可能会比较慢)：vue-data-boardP.S. 建议大家尽量自己注册一个账号(可以随便填一个密码)，如果用默认的测试账号，不要乱改东西，否则别人进来就没得看了，因为你做的任何改动都会保存到后端数据库里。...
2019-09-19 15:35:41
529
原创 【源码解析】vue-create-api作者黄轶
vue-create-api 是干嘛的？在 README.md 中这样介绍的，一个能够让 Vue 组件通过 API 方式调用的插件。( vue-create-api 源码地址 )安装使用目前提供两种安装，通过 npm install vue-create-api, 或者引入js静态资源文件。在 README.md 中提供了使用示例，如下：import CreateAPI from ‘vu...
2019-09-19 15:34:57
3254
1
原创 仿肯德基宅急送App-Vue实战
前言Vue学习有一段时间了，就想着用Vue来写个项目练练手，弄了半个月，到今天为止也算勉强能看了。由于不知道怎么拿手机App的接口，并且KFC电脑端官网真的…一言难尽，所以项目所有数据都是我截图然后写在EasyMock里的，有需要的同学可以自取首页 商品页 外卖页技术栈vue + webpack + vuex + axios文件目录│ App.vue│ main.js│├─...
2019-09-19 15:33:16
738
原创 面试官：自己搭建过vue开发环境吗？
开篇原文地址：www.ccode.live/lentoo/list…项目代码：github.com/lentoo/vue-…前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。但是对项目里的...
2019-09-19 15:31:52
380
原创 vue-cli3 从搭建到优化
前言github地址： github.com/LeeStaySmal… (完整分支：optimize分支)demo地址： vue-project-demo.eloco.cn安装与初始化架构安装node >= 8.9 推荐：8.11.0 +安装：npm install -g @vue/cli检查：vue --version如果已安装旧版本，需要先npm uninstall vu...
2019-09-18 16:14:27
404
原创 7个有用的Vue开发技巧
1 状态共享随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。如下这个例子，我们将在组件外创建一个store，然后在App.vue组件里面使用s...
2019-09-18 16:13:03
105
原创 Vue nextTick 机制
背景我们先来看一段Vue的执行代码：export default {data () {return {msg: 0}},mounted () {this.msg = 1this.msg = 2this.msg = 3},watch: {msg () {console.log(this.msg)}}}复制代码这段脚本执行我们猜测会依次打印：1、2、3。但是实际...
2019-09-18 16:12:19
181
原创 Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~感兴趣的同学可以加文末的微信群，一起讨论吧～多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：...
2019-09-18 16:11:28
108
原创 嘿，不要给 async 函数写那么多 try/catch 了
前言在开发中，你是否会为了系统健壮性，亦或者是为了捕获异步的错误，而频繁的在 async 函数中写 try/catch 的逻辑？async function func() {try {let res = await asyncFunc()} catch (e) {//…}}复制代码曾经我在《一个合格的中级前端工程师必须要掌握的 28 个 JavaScript 技巧》中提到过一个...
2019-09-17 16:25:57
202
原创 webpack4 的30个步骤打造优化到极致的 react 开发环境，如约而至
上一篇记录了一下webpack4使用的一些基础使用小技巧,确实没有想到能收获这么大的反响,还是非常感谢各位的错爱，没有看过的关于webpack4的14个知识点,童叟无欺这一篇文章将react和webpack4进行结合,集webpack的优势于一身,从0开始构建一个强大的react开发环境本篇所有代码线上代码react-webpack4-cook,翻译过来叫：webpack4和react的乱炖，...
2019-09-17 16:25:00
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人