博客

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中构建延迟加载异步组件。

重用Vue组件中的逻辑

当你开始使用Vue创建应用程序时,你可以开始先创建组件,来构建应用程序的不同部分。你应该可以感受到Vue和Web组件结构体系的良好开发体验。随着项目的进行,你开始以某种方式构造应用程序组件,可能是按页面和组件。但随着项目的不断发展,你开始要在多个组件之间执行重复的逻辑。我们常常说不要做重复的事情(DRY)和让一切保持它的简单。这两个原则利于我们编写和维护应用程序。也许你已经知道一些有助于遵循这些原则的模式、库和技术。Vuex将帮助你从组件中提取状态逻辑,Vue路由器将对路由逻辑做同样的工作,但是组件呢?我们经常遇到这样的情况,需要重用属于组件的一些UI功能。例如,除了被锚定和定位到元素之外,弹出窗(Popover)和提示框(Tooltip)都可以在某个事件触发时共享打开和关闭的功能。

三角函数在前端动画中的应用

我是个很懒的人,开发过程中经常有意无意地刻意避开数学相关的知识,你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 CSS3 来实现timing-function 随意选用,最多也就调一下 cubic-bezier,找到看着舒服的就行。但是怎样让动画更顺滑,写出更贴近自然的动画,说实话以前我没怎么考虑过。每次当动效设计师提出,能不能这样那样的时候,我会理所当然地予以否决。所以有很长一段时间,我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

如何构建一个简单的摄像头组件

这篇文章主要跟着@David East的《HOW TO BUILD A SIMPLE CAMERA COMPONENT》 学习。学习如何使用MediaDevices API获取摄像头的访问权限,然后将相关的流通过video元素来播放。并且将视频流通过canvas元素转换为blobbase64格式的图片。并且依赖于自定义元素将这些功能封装成一个简单的摄像机组件。感兴趣的同学,请继续往下阅读。

CSS混合模式高级应用

首先要声明的是,我们在这篇文章中要了解的不是CSS混合模式如何使用,而是来一起探索CSS混合模式的一些高级运用以及它能做些什么,又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学,对于图层混合模式一定不会感到陌生,但对于CSS中的混合模式,估计还是有不少的同学会感到陌生或者好奇。在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用,而会探讨CSS的混合模式的一些高级运用,以及对应的效果。

DOM系列:DOM事件的传播

通过前面的DOM事件模型事件绑定的姿势两节的学习,我们对JavaScript中的DOM事件有了一定的基础。但忽略了有关事件如何被触发的重要细节。

页面

返回顶部