Vue

Vue 2.0学习笔记:Vue的animation

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成,具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制,对于一些复杂的动效,还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来,实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation

Vue 2.0学习笔记:Vue的transition

动效在Web中一直是一个有争议的问题。动效做得好有助于在你的Web程序上锦上添花,甚至是留住你的用户,也可以具有较好的用户体验;反之,如果动效运用的不好,会给用户带来一种反感,让用户迅速地离开你的应用。怎么提供更友好的动效,并不是今天我们要讨论的重点,我们要讨论的是:在Vue应用程序中如何添加动效?在Vue中,提供了多种方法来给你的运用程序添加动效,比如CSS的transitionanimation动效,以及在Vue的生命周期的钩子函数中操作DOM。甚至你还要以使用第三方动画库,比如GSAPVelocity.js来制作动效。

Vue 2.0学习笔记:如何创建Vue插件

Vue插件是向应用程序添加全局特性的一种强大而又简单的方法。它有多种用途,从分发应用程序范围的组件到向应用程序添加路由和不可变数据存储等附加功能。从概念上讲,Vue插件是非常简单。它实际上只是一个带有install函数的对象,它接受两个参数:全局的Vue对象一个包含用户定义选项的对象。然而,一个像这样简单的Vue插件仍然可以得到相当大的效果。

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

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

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 2.0学习笔记:Vue的render函数

前几天想学学Vue中怎么编写可复用的组件,提到要对Vue的render函数有所了解。可仔细一想,对于Vue的render函数自己只是看了官方的一些介绍,并未深入一点去了解这方面的知识。为了更好的学习后续的知识,又折回来了解Vue中的render函数,这一切主要都是为了后续能更好的学习Vue的知识。

Vue 2.0学习笔记:Vue.extend构造器的延伸

前段时间花了不少的时间在学习和了解Vue的组件,虽然中间浅尝了Vue组件的基础,体验了其魅力,但还是有很多深层的东西未掌握,也还不能非常灵活的使用Vue的组件。但这一切并不重要,随着后面的学习,我想会对Vue越来越熟悉。这两天在看Vue中的Vue.extend构造器,今天简单的对这方面的东西做个笔记。

使用Vue构建视频播放列表

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

页面

返回顶部