风雨过后见彩虹

对web前端的爱好与兴趣而来，收集、发表有意义的文章随笔问题，让知识沉淀积累，方便自己查阅，方便网友交流。

CSS基础篇--快速使用CSS Grid布局，实现响应式设计

风雨后见彩虹 2018年03月30日发布
14 收藏

CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

CSS基础篇--CSS3图片翻转动画技术详解

风雨后见彩虹 2018年03月29日发布
6 收藏

CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果，能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介...

CSS效果篇--CSS3实现全景图特效

风雨后见彩虹 2018年03月22日发布
收藏

background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高，并且水平方向自动，即图片最左边贴着容器左侧。

vue+vuecli+webapck2实现多页面应用

风雨后见彩虹 2018年03月21日发布
7 收藏

这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加一个依赖,后面会用到。

vue+vuecli+webapck2项目配置文件详解

风雨后见彩虹 2018年03月21日发布
7 收藏

运行”npm run dev”：执行build/dev-server.js文件运行”npm run build”：执行build/build.js文件

JS基础篇--replace替换全部的正确应用

风雨后见彩虹 2018年03月09日发布
收藏

如下这种情况，表情标签的替换，我们需要正常的字符串替换，例如结合 while + indexOf 实现。

CSS基础篇--使用position:sticky 实现粘性布局

风雨后见彩虹 2018年01月31日发布
20 收藏

sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

jQuery与vue分别实现超级简单的绿色拖动验证码功能

风雨后见彩虹 2018年01月30日发布
48 收藏

jquery的绿色拖动验证功能在网上看到了一个这样的问题：那种像拖动滑块匹配图形的验证方式是怎么实现的？。突然想到实现一个简单绿色拖动验证码的功能，在网上搜了下，有一个用jquery实现的该功能代码。体验地...

vue从入门到进阶：Vuex状态管理（十）

风雨后见彩虹 2018年01月24日发布
7 收藏

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vue从入门到进阶：vue-router路由功能（九）

风雨后见彩虹 2018年01月24日发布
8 收藏

通过注入路由，我们可以用 this.$router 来访问它，就像在任何组件里用 this.$router 访问当前路有一样。

vue从入门到进阶：渲染函数 & JSX（八）

风雨后见彩虹 2018年01月14日发布
5 收藏

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

风雨后见彩虹 2018年01月13日发布
20 收藏

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到...

vue从入门到进阶：组件Component详解（六）

风雨后见彩虹 2018年01月13日发布
20 收藏

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行...

vue从入门到进阶：过滤器filters（五）

风雨后见彩虹 2018年01月12日发布
7 收藏

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

vue从入门到进阶：Class 与 Style 绑定（四）

风雨后见彩虹 2018年01月12日发布
3 收藏

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive为真还是假。

vue从入门到进阶：计算属性computed与侦听器watch（三）

风雨后见彩虹 2018年01月12日发布
4 收藏

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

vue从入门到进阶：指令与事件（二）

风雨后见彩虹 2018年01月12日发布
5 收藏

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

vue从入门到进阶：简介（一）

风雨后见彩虹 2018年01月10日发布
7 收藏

首先，Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。下面总结的内容是在2.x的版本。

CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

风雨后见彩虹 2018年01月08日发布
1 收藏

在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》.这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框：大致的html代码都如下所示： {代码...} 那么对应的css代码： {代...

CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

风雨后见彩虹 2018年01月08日发布
13 收藏

checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结。