Vue

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

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

使用Vue创建自定义表单inputs

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

Vue 2.0学习笔记:不同场景下组件间的数据通讯

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

Vue 2.0学习笔记:实现组件数据的双向绑定

通过上一节的学习,我们了解到了在Vue的组件中数据传递:prop向下传递,事件向上传递。意思是父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。但Vue中,props是单向数据绑定,虽然在Vue 1.0版本中,通过.sync能实现双向数据绑定。但.sync在几个版本中被移除,尽管在2.3版本重新引入.sync修饰符,可这次引入只是作为一个编译时的语法糖存在。如果直接使用.sync修饰符来做双向数据绑定,会报警告信息。那么我们如何在组件中实现双向数据绑定呢?这一节我们就来学习这方面的相关知识。

Vue 2.0学习笔记:组件数据传递

通过上一节中的学习,咱们了解了在Vue中怎么创建组件和使用组件。在项目中使用组件,目的一般就是提高代码复用率,增强模块化,从而降低开发成本。在文章结尾处,我们提到了Vue中组合组件,就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢?这就是这一节将要了解和学习的内容。

Vue 2.0学习笔记:创建Button组件

上一节中,咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例,了解了怎么注册全局组件和局部组件。并且通过这些基础知识,可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋,和我们想像的组件相差甚远。那么今天我们来看看,怎么在Vue中创建一个按钮组件。

Vue 2.0学习笔记:组件的使用

从这一节开始正式进入对Vue 2.0组件的系统学习。在Vue中,组件是最强大的功能之一。而且Vue组件涉及到的知识点也非常的多,比如组件的使用,prop、事件、slots以及动态动组等等。在一节的内容中无法全部涵盖这些知识点。所以将会分几节内容来整理Vue组件中的学习笔记。

Vue 2.0学习笔记:使用Vue创建Modal组件

Modal弹框在Web应用或者Web页面上非常常见,很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒,思考了一下,能不能写一个组件,比如说使用Vue创建一个组件,一个Modal组件,让其能在各个Web页面或者应用上使用。在这篇文章中,学习一下如何使用transitionslots来创建可重用的Modal组件。

使用SVG制作进度条之二

在上一节中,学习了怎么利用SVG的stroke-dasharraystroke-dashoffset来制作进度条。记得在文章末尾留了一个悬念,说这一节中,要聊聊怎么用Vue来把这个SVG的进度封装成组件。咱们先不聊Vue怎么把这个封装成组件(我搜索了一下,有现在所这方面组件,而且做得蛮好的,接下来先学习一下)。今天接着聊上一节中的进度条怎么来实现。不过略有不同。不同点来自于网上一位朋友向我提的一个问题。

如何在Vue项目中使用vw实现移动端适配

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案,都还存在一定的缺陷。言外之意,还没有哪一个方案是完美的。事实上真的不完美?其实不然。最近为了新项目中能更完美的使用vw来做移动端的适配。探讨出一种能解决不兼容viewport单位的方案。今天整理一下,与大家一起分享。如果方案中存在一定的缺陷,欢迎大家一起拍正。

页面

返回顶部