在刚接触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的学习和实战，欢迎继续往下阅读，或许对你有所帮助。

CSS 的值和单位是 CSS 另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说，对于 CSS 中的值和单位应该不会感到陌生，但大部分同学应该都会把精力集中于单位这一块，事实上也是如此，在这篇文章中，我们所涉及到的大部分内容也是聊单位这一块，对于值这一部分只会花一点点内容略为带过。

变量对于CSS而言是这两年大家关注的一个话题。对于变量而言，最早是出于CSS的一些处理器语言当中，比如Sass、LESS之类的。随着CSS的发展，变量的概念也被引入到CSS中。时至今日，在CSS中的变量不被称作变量，而被称为CSS自定义属性。该特性让我们维护CSS、编写CSS变得更易。而事实上呢？在CSS最早的变量之一是currentColor。该特性也可以更好的帮助我们编写CSS和扩展CSS。那么今天我们来开另一个话题，currentColor和CSS自定义属性又有何差异呢？接下来的内容，我们就来一起探讨这方面的细节。currentColor和自定义属性之间还是存在一些有趣的区别。这两个都是CSS中动态属性的例子，但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同，接下来的内容将向大家揭开。

用户界面是最直观的呈现给用户，而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且，UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一，而不是事后的想法。可是呢？事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图，并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时，很多同学都认为，动画通常在用户体验方面仅仅是锦上添花，并且被认为是不必要的、过渡的或太复杂的，无法实现的，也是因为这些原因，UI动画在很多Web应用中被忽略了。更糟糕的是，缺乏意义的动画会给自己产品体验方面带来损害。