CSS的mask（遮罩），有时也称CSS的蒙层，最早是苹果公司2008年提出的，并且添加到webkit引擎当中。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类型于png24位或png32位中的alpha透明通道的效果。2012年被纳入到W3C的草案中，但这个版本与苹果公司提出的版本是不同的。时至今日，该规范已经有多个版本，现在是CSS Masking Module Level1版本，属于TR阶段。据Caniuse.com统计来讲，该属性得到的支持度还是有一定的限制，仅部分属性被浏览器支持。虽然如此，但该属性还是非常的有意思，值得大家花点时间去探究，比如今天要聊的mask-composite属性就是非常有意思的一个属性。

在Vue中，Vue模板对应的就是Vue中的View（视图）部分，也是Vue重中之一，而在Vue中要了解Vue模板我们就需要从两个方面来着手，其一是Vue的模板语法，其二就是模板渲染。Vue模板语法是Vue中常用的技术之一，除非在应用程序中不用渲染视图或者你的程序直接采用的是渲染函数（render()）。相较而言，模板语法较简单一点，但对于模板的渲染（模板编译）就会更为复杂一些，如果需要了解模板渲染就需要对Vue的渲染函数，响应式原理之类的要有所了解。

好久没有整理有关于CSS方面的文章了，说实在心理还是痒痒的，但取舍有度。不过最近看了几篇有关于CSS的文章还是蛮有意思的。两篇是关于页面布局的，另外一篇是关于动画函数的。事实上，布局和动画在CSS中都是较为重要的部分。当然，今天要提的知识点并不是什么非常新的知识点，但也是有创意和创新的知识点。比如不通过媒体查询实现响应式布局，比如说容器单位构建强大的布局，比如说动画函数（缓动函数）的反转。听听这些是不是觉得非常有意思，如果你和我也一样，请继续往下阅读。

在刚接触Vue的时候，就知道 实例 在Vue中是一个重要的概念，在学习之后也整理了一篇有关于Vue实例和生命周期的学习笔记。经过一段时间的学习之后，重新再温习了一遍有关于Vue的实例，整理一下，提供给有需要的同学作为参考资料。

slot是Vue组件的一个重要机制，因为它使得完全解耦的组件之间可以灵活地被组合。在《Vue组件内容分发》和《Vue的作用域插槽》文章中我们深入的学习了slot怎么在Vue中的使用，但在Vue 3.0版本为slot引入了一套全新的模版语法。为了更好的从2.x过渡到3.0，Vue的v2.6版本引入了新的slot语法，即 v-slot。接下来我们来学习新指令v-slot的使用。

学习Vue也有一段时间了，在项目中使用Vue也有好几个了，但Vue组件间的状态管理（数据通信）一直是自己的死穴。对于Vue组件间的数据通信，无外呼是父组件向子组件、子组件向父组件、兄弟组件以及嵌套组件之间的数据通信。而且组件之间的通信方式也有很多种。@Gongph的《Vue 父子组件通信的十种方式》一文就详细的介绍了Vue组件，指的是父子组件之间的数据通信就有差不多十种方式。但很多时候我们组件之间的数据通信不仅仅是停留在父子组件之间的数据通信。比如说还有兄弟组件和嵌套组件之间的数据通信。

在Vue中的transition和animation都是一些很棒的东东。它们可以让我们的组件带有一定的动效效果。在《Vue的transition》和《Vue的animation》中分别学习了transition和animation在Vue组件中的运用。这两个特性可以让Web元元素可以像animation.css库中提供的效果一样，实现一些过渡甚至是简单的动画效果。让整个效果看起来很好。如果我们可以将它们封装到组件中，并且在多个项目中重用，是不是会给我们带来更多的益处呢？在前面两篇文章中，我们了解了在Vue中怎么使用transition和animation，今天我们来学习几种定义transtion的方法，并且深入研究它们可以真正重用的方法。

Web中对于Icon的使用已经是非常频繁的一件事情了，而且很有图标的使用会让你的Web应用程序或Web网页面变得更具可交互性和可使用性。早前在《Web中的图标》一文中和大家一起探讨了如何在Web中使用图标。其中不同的使用方式都具有各自的优势，但随着技术的革新，其中SVG的图标在Web中的使用也越来越频繁，并且其具备的优势也越来越明显。正因如此，在自己的项目中使用SVG的图标的场景也越来越多，因此，今天想和大家一起聊聊如何在Vue的项目中更好的使用SVG图标。

在CSS的世界中，总是有很多实验性的属性先行，正因为这些先行者在不断的探索新的特性，才让CSS越来越强大。而这些实验性的特性并没有立马得到众多浏览器的支持，为了能让这些实验性特性能在部分支持的浏览器上运行，同时又能让不支持的浏览器做相应的降级处理。那么我们就会需要根据相关的条件进行判断。这也就是条件CSS的由来。

作为一位Web开发人员而言，模态框（Modal）并不会陌生。就我个人而言，我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效。正好最近工作中也和Modal框杠上了。另外想更好的设计一个模态框用来满足业务需求的普遍性和实用性，甚至是达到可配置性。所以一直在探究模态框相关的知识，同时正好看到了@Ken Wheeler的教程，对于我这样的菜鸟，能很好的了角如何使用原生的JavaScript来构建一个可用的模态框插件，另外为以后如何使用Vue构建更为灵活的模态框组件打下坚实的基础。如果你对该文章感兴趣，或者你也正在加强JavaScript的学习和实战，欢迎继续往下阅读，或许对你有所帮助。