Vue

从JavaScript属性描述器剖析Vue.js响应式视图

学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切皆对象,基本可以描述对象在JavaScript中的地位,而且JavaScript中对象的强大也使其地位名副其实,本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践,然后对Vue.js的响应式原理进行剖析。

Vue响应式及其缺陷

我们喜欢Vue的原因之之就是其响应式系统。如果改变一个数据值,它会触发一个页面的更新来反映这个变化。当你创建数据属性,计算属性和绑定属性等,Vue会自动配置响应式。这让事情变得简单,但这种简单却又会让我们掉到陷阱中,就像自动汽车一样,自动响应让我们变得懒惰,当它不工作的时候,我们并不知道是为什么?

Vue 2.0的学习笔记: Vue中的响应式

上一节学习了Vue中的代理,知道了Vue中代理数据和方法,今天我们接着来了解Vue中的响应式。我们将使用上一篇中的示例来继续介绍Vue中响应式相关的知识。同样的,将大部分的时间用在浏览器的控制台上。

Vue 2.0的学习笔记: Vue中的代理Proxy

通过一段时间的学习,我们知道如何直接访问数据属性、方法、计算属性和观察者,而这些都没有任何的前缀。现在,我们终于可以更详细地了解一下这幕后发生了什么?

Vue 2.0的学习笔记: Vue实例和生命周期

Vue实例是进入Vue的第一步,创建一个Vue的实例也是学习Vue的起点。实际上,Vue框架的入口就是Vue实例,其实就是框架中的View Model,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发。那么我们就从MVVM模型的概念开始,进入有关于Vue实例和生命周期的学习之旅行。

深入理解Vue.js响应式原理

本人是Java背景,许多年前刚接触JavaScript时有点怪怪的,因为它没有 getterssetters。随着时间的推移,我开始喜欢上这个缺失的特性,因为相比Java大量的 gettersetter,它让代码更简洁。

Vue 2.0的学习笔记:在Vue中使用样式

到目前为止,学习Vue的时候也写了相当的示例,但老实说,这些示例在视觉上并没有什么吸引人的地方。今天我们将学习如何将样式运用到我们的元素中,让事情变得更加有趣。首先我们将通过将内联样式添加到HTML的元素中,其实也就是我们以前所说的内联样式。其实在学习v-bind的时候,我们已经或多或少的接触了,如何给元素添加内联样式或者绑定类名添加样式。但这可能不够系统,为了更好的学习这方面的知识,这篇文章专门是学习这方面知识而做的笔记。希望对和我一样的初学者有所帮助。

Vue 2.0的学习笔记:Vue的过滤器

在这篇文章里,我们将讨论一个叫过滤器的东西。过滤器提供了一种执行文本转换的方法,比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用,也可以在v-bind指令的表达式中使用。接下来,来学习Vue中有关于过滤器更多的知识。如何创建和使用它们。感兴趣的同学,接着一起往下看吧。

在Vue中何时使用方法、计算属性或观察者

这意味着它能够对诸如用户输入和数据更改之类的事情做出反应。我建议阅读Reactive系统,以便更好地理解在数据更改时的Vue中的引擎机制。在Vue中有三种方法可以让你的组件使用Vue的响应性。这些是methodscomputedwatch。如果没有仔细去了解,可能看起来是可以互换的(其实在某些方面的是这样的),但是每个方法都有其最佳的使用场景。为了说明这些,我将制作一个小的应用程序,允许老师在他们的课堂上输入学生的考试分数,查看他们的平均成绩,并建立一个自动保存功能。

Vue 2.0的学习笔记:Vue的观察者

有时你可能想要观察数据的变化和反应。通常,我们会使用计算属性(computed,但是有些场景需要实现定制的监视程序。在我们讨论何使使用观察者之前,让我们先看一个如何使用它们的例子。我们将构建一个Live搜索,当我们在文本框输入关键词时,它将返回搜索结果。我们使用JavaScript的setTimeout函数来模拟从API中抓取结果。

页面

返回顶部