Vue2 Element calcTextareaHeight.js 详解

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

2018
03-12

JavaScript 中的 Math.max() 和 Math.min()

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

2018
03-11

Vue2 Element 模仿秀-多选框篇(Checkbox)

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

2018
03-07

Vue2 Element emitter.js 详解

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

2018
03-06

Vue2 组件懒加载

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

2018
03-04

Vue2 Element 模仿秀-单选框篇(Radio)

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

2018
03-02

Vue2 插件编写的完整套路

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

2018
02-27

Vue2 导航守卫(钩子函数)

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

2018
02-26

Vue2 编程式导航

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

2018
02-25

Vue2 导航切换过渡动画

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

2018
02-25

Vue2 百科全书(珍藏版)

前言 为了让学习更加高效,在实战中更加如鱼得水,整理是在所难免的,所以在这里我把 Vue 的一些常用的知识点,整理收藏成篇,前人种树,后人乘凉。这是一篇关于 Vue 的百科全书。你准备好了吗,我们现在就开始! 路由篇 路由跳转 跳转标签尽可能地使用 <router-link to=”/home”></router-link> 的形式来进行跳转。 这样写我们就可以很方便地只需修改 VueRouter 对象中的 mo...

2018
02-24

Vue2 Element 模仿秀-按钮篇(Button)

前言 Element UI 做得还是不错的,我第一次看到时都被征服了。所以我觉得有必需把官方的示例尽可能的自己撸一遍。从中一定可以学到不少东西。 这篇文章是 Vue Element 模仿秀的第一篇:按钮组件。 文件结构 ├── index.html ├── assets │ ├── fonts │ │ ├── yunkus-icons.ttf │ │ └── yunkus-icons.woff │ └── icon.css ├── main.js ├── router │ └── index.js # 路由配置文件 └─...

2018
02-23

Vue2 实现时空穿梭框功能模块

前言 这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能。勾选了的项就会进入到另一个框中。 时空穿梭框之旅 示例演示: 这个时空穿梭框实现了: 1、可以全选、反选 2、没有选中时,不可以点穿梭按钮 3、自动计数(共有多少个,选中了多少个) 4、没有数据时,全选不可点击 这里主要是想通过这个示例来抛砖引玉,更多的功能,你可以根据自己的实践需要来实现。下面我们就来看看这...

2018
02-22

Vue2 实现树形菜单(多级菜单)功能模块

前言 之前博客里分享过一篇用《Angular 实现树形菜单(多级菜单)功能模块》,而在由于战略转移,所以我给 Vue 也来了一份。功能差不多,不过由于这个是第二次做,会对之前的一些不足作一个修正。下面来看看 Vue 树形菜单。 在做这个 DEMO 的时候我是用了vue 的脚手架(vue-cli)的,关于脚手架可以看这里《Vue 脚手架(vue-cli)安装及详解》所以结构看起来就像下面这样: 结构示意图 ├── index.html ├─...

2018
02-15

Vue2 脚手架(vue-cli)安装及详解

生命不停,更新不止。虽说快过年了,但学习还是必须坚持的,之前一段时间比较粗略地学习了下 Angular ,但由于战略有调整,所以现在把研究 Angular 的时候转到了 Vue 身上,我不敢说在 Angular 和 Vue 中,哪一个前端框架比较好,毕竟我对 Angular 也不是很熟悉,至于 Vue 正如你看到的,我才刚刚开始学。所以这个好与不好,只能自己试过了知道,存在即是合理,所以我们在把这两者放在一起来作对比估计也很...

2018
02-13

移动端 H5 开发技巧整理

前言 这篇文章主要是把平时在 H5 开发中遇到的一问题的解决方案整理记录下来,毕竟好记性不如烂笔头。 关于系统字体大小 在测试身上什么事都会发生,比如把手机系统的字体大小设置为超大,此时在不同手机这个设置影响的范围是不一样的,有些手机只会影响到系统本身的字体大小,而不会影响到 H5 中的字体大小。但不幸的是,在一些手机中这个就不是这么一回事了,它会毫不留情地把你 APP 里的字体大小一...

2018
02-08

Angular 2+ 动态表单

前言 这篇文章没什么技术含量,只是把官方的 DEMO 拷贝过来,样式修改了下而已,没有别的。这篇文章的重点是对官方 DEMO 代码注解,把那些我认为很可能让你困惑的地方作一些备注。 动态表单 我们直接上码: app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; impor...

2018
02-06

ES6 中的 super 关键字

前言 关于 ES6 中的 super 关键字估计大家跟我一样还见得比较少,不过没关键,在文我们就来初探下 super 关键字。 super 关键字 在讲 super 关键字之前,我们先来看一段超简单的代码: class parent{ constructor(){} } class children extends parent{ constructor(){} } 其实在上面什么都没有做的类中的 constructor 构造方法我们也可以不写,因为类中如果没有显式地定义构造函数的话...

2018
02-01

ES6 中的构造函数(constructor)详解

前言 ES6 中的构造函数详解,在 ES5 中也已经有类似的实现了,只是在 ES6 这里换了一种方式来实现而已。 构造函数之旅 ES6 之前 在 ES6 以前我们会像下面这样定义构造函数并生成实例的: function Person(p){ this.name = p.name; this.age = p.age; } person.prototype.say = function(){ console.log(this.name,this.age); } // 并通过 new 来创建一个实例 var xiaoming =...

2018
01-30

JavaScript 中的定时器执行机制大解密

前言 JavaScript 中的定时器你一定用了不少,比如 setTimeout、setInterval 等。但我们对他的了解又有多少呢?我承认我以前一直用它只是因为他能为我延迟几秒执行某些操作,它确确实实为我解决了不少问题,还有一些比较“奇葩”(由于技术水平有限,未能找出原来)的问题也是通过定时器来解决的。但我慢慢地发现,我对定时器的了解也只是表面上的,而它的运行机制我却不闻不问,也就是我只看到了它成功的一...

2018
01-28

Angular 2+ 响应式表单

前言 使用响应式表单,我们可以在组件中创建表单控件的对象树,响应式表单可以让使用响应式编程模式、测试和校验变得更容易。 来看看演示效果: Angular 2+ 响应式表单之旅 app.component.html <site-list></site-list> app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', sty...

2018
01-28

Angular 2+ 表单验证

前言 表单验证远处不在,但你知道在 Angular 2+ 中怎么用了吗?或许你早已知道,或许你还一头雾水,知道的可以跳过,不知道的可以留步。 表单验证之旅 在《Angular 2+ 表单》 已经有分享过表单的验证了,但只是模板驱动验证的,本文我们换一种方式来实现同样的功能,这种方式叫做响应式表单的验证,不管叫法如何变,但关键的东西还是一亲的:验证用户输入的合法性。 响应式表单的验证 下面用一个图来...

2018
01-23

Echarts 技巧整理

Echarts 3.x 这篇文章收集了 Echarts 在平时开发中常用的一些配置项,没有过多的语言,直接上码。有了它可以让你更省时,因为这引会更加直接的让你找到你想要的,而不用在官方文档中一个一个点开查找。 容器边距 grid:{ top:100, left:45, right:25, bottom:45 } 渐变 series: [{ name: '销售量', type: 'bar', itemStyle:{ normal:{ col...

2018
01-22

Angular 2+ 表单

前言 在平时的开发中,表单吧说是最常用的了,比如内容的发布页面、登陆页面等,所以在 Angular 2+ 中的表单用法我们必需得会。下面就来看看 Angular 表单。 表单之旅 我们直接来看一个例子,通过这个例子把有关表单的一些常用的东西都融合进去,好例子一个就够! 在做之前,我们不妨先看看效果图: app.component.ts <div class="container"> <div [hidden]="submitted"> <h...

2018
01-22

Angular 2+ 用户输入

前言 事件相信你已经不陌生,比如鼠标事件、键盘事件等,我们可以通过这些事件来触发一些方法以达到我们想要的目的,这再正常不过了,下面我们就来看看有关 Angular 2+ 中的事件。 用户输入 先来看看下面这个简单的事件绑定 <button (click)="clickFn()">Click me!</button> 在 Angular 中我们使用“()” 来绑定事件,等号右边为要执行的方法。 通过 $event 对象取得用户输入 监听keyup事...

2018
01-21

Angular 做一个 SwitchButton (滑动开关)功能模块

什么是 SwitchButton 相信你早已有听闻,在这里就不用多说了,现在我们还是来看看怎么用 Angular 做下个 SwitchButton 。 在做之前,我们先来看看效果图: 效果你都见得多了,下面我们来看看代码,首先我们先来看看这个 SwitchButton 的 .html switch-button.component.html <div class="switch-button" [ngStyle]="myStyle" [ngClass]="{'switch-button-close':trigger.status}" (click)="triggerFn(...

2018
01-21

Angular 实现树形菜单(多级菜单)功能模块

前言 本文要分享的是一个多级菜单效果,也就是传说中的树形结构菜单,理论上支持无限级菜单,当然数据结构要一定的要求,但这都不是什么难事,因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好,但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的,效果的相似度应该达到 99%,本文内容有点多(主要是代码),因为我想把所有的代码都贴出来,尽量不让你幻想缺...

2018
01-18

Angular 2+ 新建项目时报错 cannot-find-module

今天突然来劲想再建个 Angular 项目练练手,谁知道报错了。 报错 E:\study>ng new navMenu create navMenu/e2e/app.e2e-spec.ts (290 bytes) create navMenu/e2e/app.po.ts (208 bytes) create navMenu/e2e/tsconfig.e2e.json (235 bytes) create navMenu/karma.conf.js (923 bytes) create navMenu/package.json (1320 bytes) create navMenu/protractor.conf.js (722 bytes) create navMenu/README.m...

2018
01-15

Angular 2+ 动画

前言 Angular 2+ 动画可以让你写出来的 Angular 2+ 代码显示效果不再那么地生硬,它可以让你在对元素切换时添加一些动画,这不仅仅是好看,因为它确确实实提升了用户体验,让用户感觉这个页面科技感满满的。 基本用法 入门示例 要想使用 Angular 2+ 中的动画效果,你必需做一些准备: 在app.module.ts 中引入 animations 模块 app.module.ts import { BrowserModule } from '@angular/platform-browse...

2018
01-15

Angular 2+ 管道

前言 Angular 2+ 管道的管道与AngularJS 中的管道作用一样,对一些数据处理,让它符合我们的预期展示效果。官方也为我们提示了不少的内置管道,我们可以直接在模板中使用它们。下面我们就来讲讲 Angular 2+ 中的管道。 Angular 2+ 内置管道 内置管道比 AngularJS 的要少,因为在Angular 2+中 去掉了一些管道。Angular 2+ 的内置管道包括但不限于: DatePipe:时间格式化 UpperCasePipe :大写 LowerCa...

2018
01-14