Vue2.0学习笔记:Vue中的Mixins

在项目开发的时候,常会碰到这样的一种现象:有两个组件非常相似,比如较为熟悉的ModalTooltipPopover,它们都具有同样的基本函数,而且它们之前也有足够的不同。很多时候,就让人很难做出选择:是把它们拆会成多个不同的组件呢?还是只使用一个组件,创建足够的属性来改变不同的情况。在Vue中,对于这样的场景,官方提供了一种叫混入(mixins)的特性。使用mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果被正确的使用,他们不会改变函数作用域外部的任何东西,所以多次执行,只要是同样的输入,总是能得到一样的值。既然Vue的mixins这么优秀,那应该怎么使用呢?今天我们的目的就是学习如何在Vue的项目中使用mixins

使用事件总线共享组件之间的Props

默认情况下,Vue组件之间的通讯是通过Props来完成的。Props是从父组件向子组件传递属性。Props总是从父组件向子组件传递。随着应用程序复杂度的增加,你会慢慢遇到所谓的Prop Drilling,这里有一篇文章介绍了这方面的东西,虽然是React方面的,但也适用于Vue。Prop Drilling是将props向下、向下、向下传递给子组件的想法 —— 正如你想象的那样,这通常是一个乏味的过程。因此,繁琐的Prop Drilling可能是一个复杂的潜在问题。另一个与不相关的组件之间的通讯有关。我们可以通过使用事件总线来解决这些问题。什么是事件总线?这个名字本身就是一个总结。这是一个组件将props从一个组件传递到另一个组件的一种运输方式,无论这些组件伴于树的哪个位置。

CSS border-radius 能做什么?

在CSS中,使用border-radius指定八个半径值时,可以创建不同的形状。先来看一个为该特性制定的工具@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后,她提到了一个在我脑海中挥之不去的CSS 属性:通过border-radius可以使图像有良好的形状效果。听完这个演讲之后,我认为你肯定可以创造出更多的圆圈,并开始深入挖掘使用border-radius可以做什么?

Vue中的作用域CSS和CSS模块的差异

现代Web开发中的CSS离完美还差得远,这并不奇怪。现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突:样式相互覆盖隐式地级联到我们未考虑到的元素。为了减轻CSS存在的主要痛点,我们在项目中普遍采用BEM的方法来。不过这只能解决CSS问题中的一小部分。对我们来说是幸运的,社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过CSS ModulesStyled ComponetnsGlamorousJSS。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感兴趣,你可以查看这篇文章:@Indrek Lasn详细介绍了CSS in JS的全部思想

Vue 2.0学习笔记:事件总线(EventBus)

许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用,但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习,Vue组件数据通讯常常会有父子组件,兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。

Vue组件通讯

使用Vue构建组件容易,但对于初学者要掌握Vue组件中的通讯还是有一定的难度。比如说,父组件如何向子组件通讯?子组件又是如何向父组件通讯?兄弟组件又是怎么通讯?这些方面都是有关于组件通讯相关的知识。而且掌握Vue组件之间的通讯方式还是掌握Vue组件的另一种能力。

Vue中的状态管理

Vue中管理应用程序的状态有多种不同的方法,了解状态管理也是学习Vue知识的基础部分,也是很重要的一部分。从这篇文章开始,我们来开始学习Vue应用程序中的状态管理。在这篇文章中会先简单的介绍Vue应用程序中状态管理的大多数方法。希望对Vue的学习者有所帮助。

探索Web上图片使用方式

图片在Web上的使用占比已经非常的高,特别是在手淘互动这样的环境之下,我们每一个项目的图片使用量都非常的大。如果能把图片用好,的确是件不容易的事情,而且面对的挑战也不小。经常会碰到有关于图片如何加载,如何适配,如何优化等等。另外在移动端开发中,很多同学在Web上使用图片的方法一般都是通过<img>标签和CSS的background-image属性来处理。也正因如此,很多同学却忘记了这两者应该如何?怎么使用又是最优的。甚至有很多前端同学都已经忘记了这两者的差异是什么?加上Web的技术不断革新,事实上除了前面提到的加载图片的方式之外,还有其他的方式,比如HTML5的<picture>(虽然这个元素标签曾经一度废弃过,但后来又添加回来了)。就算还是使用img标签,也有了新的优化,比如imgsrcset属性。那么面对这么多的变化,以及使用的场景,我们应该怎么来选择,才是最优的选择。今天这篇文章,我们就来一起探讨一下这些东西,希望大家会喜欢。

使用Intersection Observer API构建无限滚动组件

在开发过程中,经常会遇到要处理大量数据的情况,比如列表、搜索记录等,因此你需要一种方法让用户以块状显示这些数据,以便保持应用程序性能和数据的有序性。你可能会使用分页组件来处理,它可以轻松跳转,甚至一次跳转几个页面。当然,元素滚动是分页组件的另一种替代方案,它可以提供更好的用户体验,特别是在移动端和可触摸设备上。当用记在页面上滚动时,它提供了一个透明的分页,给人一种没有结尾列表的感觉。自从Intersection Observer API出现之后,构建无限滚动组件变得更简单。让我们看看如何通过这个API来构建无限滚动组件。

Vue中的异步组件

随着应用程序越来越大,你开始考虑优化应用程序,使其变得更快。在此过程中,你可能使用了拆分代码和延迟加载这两种方法,它们通过将代码块的加截推迟到需要的时候加载,从而使应用程序的初始包变得更小。延迟加载对于应用程序路由有很大的意义,并且有很大的影响,因为每个路由都是应用程序的不同部分。延迟加载有意义的另一种情况是组件延迟渲染。这些组件可以是tooltipspopovermodal等,当然这些组件也可以使用异步组件。让我们来看看如何在Vue中构建延迟加载异步组件。

页面

返回顶部