前言 其实这篇文章没什么可分享的，不是写给前端大牛，当然本博客也没有这种魅力能引来前端大牛。所以这篇文章是写给前端小白的。 怎么定义小白，其实像这种也不好说，我们不能拿在前端的工作年限来划分，因为很多人虽然在前端打拼了好多年，但水平依旧一般般，比如：我。 差点又跑题了，还是回到 momentjs 的介绍上来吧！ 官方网址：http://momentjs.com/ 为了让这篇文章看起来不那么寒酸，在这里截个图...

前言 Vue $nextTick 的用法在网上可以搜索出一大堆，基本都是大同小异，把官方的话搬过来改改，或者把 Vue $nextTick 的源码实现分析一遍，然后，然后你就很容易被带走了，在不归路上起走起远。在这里没有针对谁，也不是说分析源码没有，或者没必要。我觉得源码分析分析到了点上就 OK，点到为止，不然很容易让初学者找不到北，越想越多，还没开始学他就已经想跑路了。 关于 $nextTick 比如官方这么一句话...

前言 JavaScript 是单线程，这个地球人都知道，但 JavaScript 却可以做到类似多线程的感觉，这是怎么实现的呢，比如：你的程序中通过 ajax 发起了一个请求，此时你会发现，即使请求还没有返回结果，程序竟然继续往下执行了，JavaScript 的魅力就在于此，虽然我是单线程，但我可以让你有“多线程”的感觉。 上面说到的“多线程”的感觉其实就是通过 JavaScript 的事件循环机制实现的。这也就是事件循环在 Java...

前言 正如标题所说的，本文主要是分享一些关于 Vue 中的为为什么，但标题中的十万个有点夸张了，不过这也不重要，重要的是本文会持续更新，把 Vue 中的一些容易产生疑问的知识点收录进来。 vue-cli 创建的项目为什么会有两个 id=”app”？ index.html是html文件的模板，将来启动项目后要把动态生成的模板都会放在id为app这个div中。 在App.vue中也有一个id为app的div，这并不冲突，可以看下m...

前言 上传一些项目到 Github 已经成为了程序员的一份副业了，上传代码到 Github 仓库不仅仅只是为了分享，更重要的是让自己的代码有一个归宿，也大大地方便了自己管理代码。这篇文章不分享什么有用的技术，只想默默地分享下怎么我们的代码上传到 Github 仓库，有用收藏，无用勿喷。 首先要想有一个仓库，你先得有个 Github 帐号，如果还没有，那就偷偷打开 https://github.com/，我不会笑你的，因为虽然...

前言 koa 2 是一个基于 Node.js 开发的 web 框架，跟 Express 作用差不多，也是同一个团队打造的，只不过 koa 使用了更加新的语法（ES6），去掉了重复繁琐的回调函数嵌套，你可以使用，async 配合 await 来实现异步调用的同步写法，并且还极大地提升常用错误处理效率。这就让我们可以使用新语法来完成我们的工作。 官方网址：https://koajs.com/ koa 2 安装 koa 2 的安装有两种方法，一种是按照官方给...

前言 首先，为什么会有这篇文章？原因是我想学学 Linux ，所以就用起了虚拟机来练手。而 虚拟机的使用又基本离不开 VMware Workstation ，所以本文就诞生了。不篇文章没有什么技术含量，都是一些只是用来说明过程的截图。本文文字很少，图片居多，因为想让你看得更明白。好下面我们开始吧！ VMware Workstation Pro 安装 说明到安装，肯定得先下载， 官方下载地址：https://www.centos.org/ 官方下载页...

前言 本来这是一个很简单的问题，直接引入第三方插件，然后安装第三方插件的教程写几行代码就可以了，但这是理想的状态，在实际开发中，肯定会遇到各种情况，导致代码没有亮度。 基于 highlight.js 实现 安装 highlinght.js npm install highlight.js 下面我们先来基本按照 highlight.js 官方教程来实践一下。 引入 js 库 highlight.js 和样式表 github.css，官方提供了很多种主题，所有的主题样式文...

前言 之前分享过一篇《Vue+Express+MongoDB 搭建极简版个人博客（增删改查）》，但没有怎么细说如何搭建 Vue+Express 开发环境。所以在这里就分享下。也算是一个记录吧！ Vue+Express 项目开发环境搭建之旅 首先我们依次执行如下命令行， 安装 vue 环境 // 安装 vue-cli 脚手架 npm install -g vue-cli // 创建并初始化一个项目目录 vue init webpack myapp // 切换到项目目录 cd myapp // 安...

前言 上一篇博文中分享了Vue+Express+MongoDB 搭建极简版个人博客（增删改查），从中接触到了 Egg.js 所以也顺便把 Egg.js 也先简单地玩一下，同样的，接下来要展示的示例也是数据的增删改查，非常地简单，只是想通过这些简单的过程来粗略地认识下 Egg.js。 个人博客搭建之旅 这个也没什么好说的，直接进入主题。 涉及到的技术栈： Egg.js MongoDB mongoose ejs 文件结构 ├── app │ ├── controll...

前言 这个示例没有过多的修饰，没有好看的界面，只是从功能实现出发，不保证好看，但保证能用，这个示例通过 vue+express+ mongodb 搭建极简版个人博客，实现博客文章管理中简单的增删改查。 个人博客搭建之旅 简单的文件结构 ├── server │ ├── modules │ │ └── index.js // mongooes 模型 │ ├── api.js // 后台的所有接器都放在这里 │ ├── db.js // 数据库连接信息...

前言 在 Vue 中有一个统一管理状态的地方，没错它就是将要出场的 vuex ，vuex 是用来管理状态的，状态是什么？说得接地气点就是一些变量，这些变量可以通过特定的方式在全局中调用，让不同组件之间的数据通信变得如鱼得水。 vuex 状态管理之旅 vuex 是什么 官方有这么一小段话： 官方定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应...

前言 组件通信，在 Vue 中非常地常见，我们必需得会，不仅仅如，我们还得会父子组件间通信的各种套路，所以本文要分享的就是这个，一步一步来解开父子组件通信的奥秘。 父子组件通信之旅 说起父子组件之间的数据父互，我想你脑中已经有了不二仁选，比如在父组件中添加属性来跟子组件进行单向数据传递，并在子组件中通过props 来接收。这种方式接收到的数据你不能直接修改，不然会毫不客气地给你报错 ...

前言 样式表的引入相信你已经不陌生，link 姿势引入你早已用得炉火纯青，虽然这样，但关于 link 和 import 之间的关系或者说区别你又知道多少？这篇文章就是要把它们之间的细微差别给挑出来，让你过目的。 link 是 html 中的语法，而 import 是样式表中的语法，两者虽然作用一样，但使用的场景有所不同。 还有一个就是加载时机的不同，如果 import 是写在样式表中的，那么 impot 命令就会等到父样式表加...

前言 页面过渡效果现在的 APP 一抓一大把，比如：微信，QQ。个人认为页面的过渡效果对于提高用户体验来说，有很大的作用。谁不喜欢看到一个活生生的应用，谁又会喜欢古董级的应用？所以这篇文章就是让你体验下页面平滑过渡的那种细腻的，如丝般顺滑的感觉，感觉有了什么都好说。 这里说的 IOS 版本不是说只适用于 IOS ，而是页面效果切换是类 IOS 的切换动画效果。 Vue 页面过渡之旅 那我们就开始吧，...

前言 不管是 Angualr 还是 Vue，都会有自己的生命周期勾子，有了这些勾子函数，我们就可以很容易地云在特定的时刻执行一些相关的操作。比如在数据更时，在组件销毁时等等。 下面我们先来看一个官方给我们提供的一个生命周期勾子的显示图： 看完这个图我相信你已经知道 Vue 的生命周期有了大概的认识。为了让你更直观地知道这些生命周期勾子函数都是什么时候触发的，下面我写了一个简单的示例，运行下面...

前言 这篇文章主要是对第一次阅读 《ES6 标准入门》 完了之后一些疏漏或者遗忘的知识点进行查缺补漏，尽管这一次也不可能把所有的知识都都补上，那至少补上了一些。本文不会一次更新完，时间也不允许，只能在空闲的琐碎时间一章一章地回味。并且像这种也不可以操作之过急，得一步一个脚印。 第2章：let 和 const 命令 1、关于 let , 在 for 循环中，循环变量部分为一个父作用域，循环体内部是一个单独...

一个 dom.js 模块功能比较简单，把一些常用的 dom 操作封装在这里。比如：类的添加删除，样式的设置等。 dom.js /* istanbul ignore next */ import Vue from 'vue'; // 运行环境 const isServer = Vue.prototype.$isServer; // 匹配 “:”，“-”，“_” 中的任意一个，但每一个都可以重复，并且连带后面的一个字符（用于改为大写） const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g; // 匹配 moz开头...

前方 这里文章主要分享Element 对 input 输入框在组件封装。但是本文没有把关于 input 的输入框所有组件都模仿一遍，原因有二：1、官方介绍 input 类组件中包括了其它组件相对较复杂的组件，比如：select 组件、autocomplete 组件，在这里我打算把它分开来模仿。2、如果都放在一篇文章中，代码会很多，不便于阅读理解。 文件结构 ├── index.html ├── mixins │ └── emitter.js ├── utils │ ├── cal...

前言 是想使用 axios 我们不可避免地要跟数据打交道，所以在这里我们得做一些请求接口来模拟数据的请求，这里我们使用 easy-mock，类似的工具还有 JSONPlaceholder 不过 JSONPlaceholder 相对来说会比较麻烦一些，我也没有用过，easy-mock 非常容易上手，你只需要到官方网站中注册一个帐号，然后就可以新建一些接口了。至于怎么新建可以看官方文档教程，在这里不多说。 vue axios 之旅 首先在使用 axio...

前言 这是在模仿 input 的 textarea 的时候遇到的一个文件，这个文件主要的作用就是实现 textarea 的高度可自适应的功能，代码量不多，但也有必要解释下里面的代码是什么意思。下面直接把代码贴出来。代码中含有注释。 calcTextareaHeight.js 深入浅出 calcTextareaHeight.js let hiddenTextarea; // 预置一些样式，供后面直接使用 const HIDDEN_STYLE = ` height:0 !important; visibility:h...

前言 在 JS 中，求最大值或者最小值在平时的前端开发中极其地常见，所以这个技能我们不能没有，除了在平时撸码中很常用，在面试中也是时有出现。那么下面我们就来看看怎么求，本文主要是分享 JavaScript 中原生的方法 Math.max() 和 Math.min() ，除此之面的其它方法在这里就不说了，比如：第三方框架提示的方法，毕竟原生有的方法，我们为什么不用？ 首先我们先来看看 Math.max() 和 Math.min() 的定义...

前言 这篇主要是介绍 Vue Element 中的多选框，没有太多的言语，放都放在了代码的字里行间中，下面我们就来看看 Element 官方组件库是怎么实现 checkbox 组件的。代码比较多，建议要有针对性地看。比如，你在看源码的时候没看懂，那么你看到这篇文章就再好不过了。 在开始之前我们先来简单的看看代码文件结构： ├── index.html ├── assets │ ├── fonts │ │ ├── yunkus-icons.ttf │ │ └── yunksu...

最近在学习 Vue Element 组件库的时候，遇到了一个 emitter.js，一开始不是很理解它的作用，后面慢慢地就明白了其中的奥秘，所以在这里记录下来，分享有需要的朋友，如果你是大神，那么请跳过，以免浪费你宝贵的时间。毕竟人生苦短，流年似水，韶华难再。 emitter.js function broadcast(componentName, eventName, params) { this.$children.forEach(child => { var name = child.$options.co...

前言 相信你之前已经听说过图片懒加载，对其中的实现原理也可能已经略知一二，如果是的话，那么本文所说的 vue 组件懒加载中的懒加载也是差不多的原理，只不过触发的条件和要显示的东西有区别罢了。图片懒加载：当图片滚动到页面中时才会被加载，vue 组件懒加载：当路由被访问时，对应的组件才会被加载。 vue 组件懒加载之旅 旧写法 要想做到 vue 组件的懒加载非常地简单，只需要在路由配置中添加一...

前言 这里 Vue Element 模仿秀的第二篇：单选框。经过第一篇的洗礼，对 Element 组件库有了基本的了解，并慢慢地爱上了 Element 模仿秀，在模仿的过程当中，真的可以学到很多东西，有一种豁然开朗，柳暗花明又一村的感觉，下面进入正题。 在开始之前，我们不妨先来看看模仿秀的示例演示： 效果图跟官方的基本保持一致，功能也非常接近。下面我们就来深入代码内部，看看 Element 源码的大致实现思路，代码...

前言 这篇文章主要是分享下如何编写一个 Vue 插件，就像官方提供的路由插件一样，我们可以通过根实例对象的 use() 方法来把插件挂载到根实例身上，其实说白了就是把一个对象（含有属性或方法）根实例的原型上。让其它继承于根实例的实例可以直接使用这个对象的属性或者方法。我们把本地缓存做成一个插件，下面就是完成这个插件的步骤： Vue 插件编写之旅 步骤一： 这一些就是从无到有，创造一个本地缓...

前言 所谓的 Vue 路由导航守卫，也就是我们常说的生命周期钩子函数，导航守卫只是官方的称呼，在这里我们不妨把它叫做钩子函数，钩子函数的意思就是在特定的时刻 Vue 会自动触发这个方法，我们可以通过这些个钩子函数，实现一些功能，比如，某些页面需要登录后才可以访问、某些页面需要用户达到什么等级才可以访问，又或者是跳转页面后修改一些信息等等，我们就可以通过路由导航守卫来拦截并作相应的处理...

前言 编程式导航，其实就是把浏览器的一些前进，后退按钮放到页面中实现而已，不过利用它，我们就可以很方便地对路由的前进后退进行跳转了。这个功能对于用户来说还是挺实用的，因为很多时候用户都会去点浏览器里的前进后退按钮，就看你想不想把它放到页面中了，假设我们要这么做，那么我们就来看看要怎么才能实现这个效果。 这个示例我们用了 Bootstrap 框架的一些样式，所以如果你是拷贝这个示例代码并...

前言 Vue 导航切换过渡动画很常用，页面使用上了过渡动画，用户体验更上一层楼，Vue 的过渡动画内容不多，但是我们可以通过它来实现很多不同的动画效果，它主要是配合 CSS 样式来实现动画效果的。下面我们就来看看 Vue 的导航切换时的过渡动画。 Vue 动画之旅 首先们来先来看一个比较简的示例，我们直接在App.vue 根组件中写代码： App.vue <template> <div id="app"> <ul>...