当你陪着家人嗑着瓜子，和家人一起看着春晚，顺便拿着手淘参与春晚抽奖互动的时候，杭州还有两百多程序员还奋战在一线当中。现在年也过完了，奖也抽了，红包也拿了。也该好好回来工作的时候了。这次很荣幸，自己能参与手淘过年项目（红包开光和春晚互动项目）的项目中，虽然仅仅参与其中的部分工作，但事后感觉有些东西还是应该总结总结的，为之后的项目做准备。那么简单的来总结一下，我自己在参与项目中用到的一些前端技术。

今天是回来上班的第一天，在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么奇怪的事情，不过对于一个段落的每一行实现一个文本渐变填充的效果。估计还是会令很多人感到好奇。如果你是其中好奇的一员，请继续往下阅读，一探其中之究竟！

通过上一节中的学习，咱们了解了在Vue中怎么创建组件和使用组件。在项目中使用组件，目的一般就是提高代码复用率，增强模块化，从而降低开发成本。在文章结尾处，我们提到了Vue中组合组件，就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？这就是这一节将要了解和学习的内容。

最近在Medium上看到一个设计理念正在兴起，这个设计方法逐渐被国外一些大公司运用于创建有层次和成熟规范的设计系统中。笔者很兴奋地读了相关的外文文章，准备把这个非常棒的独角兽设计流程分享给大家。

在上一节中，咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例，了解了怎么注册全局组件和局部组件。并且通过这些基础知识，可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋，和我们想像的组件相差甚远。那么今天我们来看看，怎么在Vue中创建一个按钮组件。

从这一节开始正式进入对Vue 2.0组件的系统学习。在Vue中，组件是最强大的功能之一。而且Vue组件涉及到的知识点也非常的多，比如组件的使用，prop、事件、slots以及动态动组等等。在一节的内容中无法全部涵盖这些知识点。所以将会分几节内容来整理Vue组件中的学习笔记。

CSS Paint API是W3C规范中之一，目前的版本是Level1。它也被称为CSS Custom Paint或者Houdini's Paint Worklet。对于开发者而言，有一个值得高兴的是，Chrome65将会支持该API。也就是说，可以使用CSS Paint API提供的registerPaint(name, paintCtor)做一些事情。那么CSS Paint API是什么？你能用它做什么？它又是如何工作的呢？带着一系列的为什么，我们开启对CSS Paint API的初探。

你是否还记得小时候剪过杂志上的照片，把它们粘在纸上，用来制作自己的拼贴画？这篇文章是关于使用CSS的clip-path属性，用来实现Web上裁剪图片的效果。将讨论如何进行切割，以及如何使用这些镂空部件来制作一些有趣的效果。

Modal弹框在Web应用或者Web页面上非常常见，很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒，思考了一下，能不能写一个组件，比如说使用Vue创建一个组件，一个Modal组件，让其能在各个Web页面或者应用上使用。在这篇文章中，学习一下如何使用transition和slots来创建可重用的Modal组件。

在上一节中，学习了怎么利用SVG的stroke-dasharray和stroke-dashoffset来制作进度条。记得在文章末尾留了一个悬念，说这一节中，要聊聊怎么用Vue来把这个SVG的进度封装成组件。咱们先不聊Vue怎么把这个封装成组件（我搜索了一下，有现在所这方面组件，而且做得蛮好的，接下来先学习一下）。今天接着聊上一节中的进度条怎么来实现。不过略有不同。不同点来自于网上一位朋友向我提的一个问题。