Vue

使用Vue构建视频播放列表

这周有关于CSSConf Australia大会的视频已经放出来了。花了一天的时间看了一下视频,有些话题还是很有意思的。不过咱们今天要聊的不是这个大会中的事情。这不是在学Vue吗?总想给自己找点活干,练习练习Vue。我就在想,是不是可以把该大会的在YouTube上的视频列表效果给模拟出来。

列表渲染和Vue的v-for指令

Web渲染是Web开发中最常用的实战之一。动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息。在我们使用的每个Web应用程序中,都可以看到很多内容列表被用于Web应用程序当中。在这篇文章中,我们将收集有关于Vue中的v-for指令生生动态列表的理解,并通过一些示例来说明为什么在这样做的时候应该使用key属性。由于我们将在开始编写代码时全面地解释一些事情,本文假设你对Vue或其他JavaScript框架有一定的了解。

使用FileReader API创建一个Vue的文件阅读器伟德1946手机版

有时候我们需要从文件中读取数据。在以前,你需要将其发送到服务器,然后返回所需的数据。问题是,现在我们还可以使用FileReader API直接访问浏览器中的文件。如果我们只是想读取一个文本文件,以便在UI级别上做一些无关紧要的事情,那么就不需要将文件发送到服务器。下面的示例将实现从一个文件中读取相关的数据填充到一个textarea中。

Vue中的无渲染伟德1946手机版

不知道您是否以前有过在第三方伟德1946手机版库中提取过伟德1946手机版的经历,在提取伟德1946手机版的过程中发现需要做一些小的调整,而且也避不开提取整个包。比如像自定义的下拉框,日历或自完匹配等伟德1946手机版,而这些伟德1946手机版可能非常的复杂,需要处理许多意想不到的边界情况。

使用Vue构建可重用的分页伟德1946手机版

Web应用程序中资源分页不仅对性能很有帮助,而且从用户体验的角度来说也是非常有用的。在这篇文章中,将了解如何使用Vue创建动态和可用的分页伟德1946手机版。分页伟德1946手机版应该允许用户访问第一个和最后一个页面,向前和向后移动,并直接切换到近距离的页面。大多数应用程序在用户每次更改页面时都会发出API请求。我们需要确保伟德1946手机版允许这样做,但是我们不希望在伟德1946手机版内发出这样的请求。这样,我们将确保伟德1946手机版在整个应用程序中是可重用的,并且请求都是在操作或服务层中进行的。我们可以通过使用用户单击的页面的数字触发事件来实现此目的。

Vue 2.0学习笔记:Vue伟德1946手机版内容分发(slot)

在实际项目开发当中,时常会把父伟德1946手机版的内容与子伟德1946手机版自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为slot(插槽)。其主要参照了当前Web Components规范草案,使用特殊的<slot>元素作为原始内容的插槽。今天主要来学习如何在Vue中使用slot的功能。

使用Vue制作切口盒子伟德1946手机版

今天看到@Chris Coyier刚发的一篇帖子,使用CSS怎么写一个切口盒子(Notched Boxes)?其实这个效果早在@Lea Verou的CSS Secrets一书中有一个专门的小节介绍CSS怎么实现这个斜切口的效果。所以说这不是什么新东西。不过接下来的内容和前面还是略有不同。

快速构建一个圆形的进度条

在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载。从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果。如果我们使用的是开箱即用的解决方案,它为我们提供了当前的进度,比如Jam3所提供的预加载程序包,那么构建一个加载指示器就变得更容易了。为此,我们将制作一个带有动画的环形(圆形)的进度条,然后将其包装成一个伟德1946手机版,再提供给用户使用。

使用Vue创建自定义表单inputs

基于伟德1946手机版的库或者框架(例如Vue)让我们在开发可复用的伟德1946手机版带来了极大的方便。这些伟德1946手机版可以非常简单的在独立的应用程序中被使用,并且最终呈现的效果一致。

Vue 2.0学习笔记:不同场景下伟德1946手机版间的数据通讯

通过前面的学习,对于Vue中伟德1946手机版的数据交流有了一定的了解。实际上在Vue中不同场景之下伟德1946手机版之间的数据通讯是不一样的,在业务中常见的伟德1946手机版通讯的场景主要有父子伟德1946手机版之间的通讯、兄弟伟德1946手机版间的通讯和全局伟德1946手机版的通讯等三种。只不过全局伟德1946手机版的通讯不是我们这章要阐述的范围,他涉及到Vuex。接下来分别看看父子伟德1946手机版和兄弟伟德1946手机版之间的通讯方式和实现方法。

页面

返回顶部