Vue 2.0学习笔记

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中抓取结果。

Vue 2.0的学习笔记:Vue的Methods和事件处理

前面学习了,在Vue中,可以使用v-on给元素绑定事件,而且Methods可以在Vue中处理一些逻辑方面的事情。Vue事件监听的方式看上去有点违背分离的传统理念。而实际上Vue中所有事件处理方式和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难。

Vue 2.0的学习笔记:Vue的Methods

在前面的学习当中,学会了如何用文本插值输出数据。但如果我们需要根据某些规则或逻辑输出数据呢?在这种情况下,我们可以通地Vue中的计算属性,根据某些规则或逻辑输出数据。这种方式也很方便,但除了这些方式之外,还可以嵌入JavaScript的逻辑函数。有的时候我们还会从远程服务获取数据,使用前面提到的方式也是可以。那么,今天 我们学习一个新方法,使用methods属性向Vue实例引入新属性。该属性应该包含一个对象,其中键(key)为函数的名称,值(value)为函数本身。

Vue 2.0学习笔记:Vue的模板

学习Vue 2.0也有一段时间了,从前面的学习过程中,也知道在Vue中使用模板的基础知识。我们知道如何使用字符串插值在Vue中输出数据。其实在Vue的模板中,我们还可以做一些扩展,比如可以在字符串插值语法中使用简单的JavaScript表达式。之所以说简单的JavaScript表达式,是因为只能包含一个表达式,因此,不能使用循环或任何复杂的逻辑。不管怎么说,这样的逻辑不属于我们的模板,在Vue实例中放置一个方法会比较好。这我们后面会深入学习到这方面的知识点。

Vue 2.0学习笔记: Vue中的computed属性

Vue中的computed属性称为计算属性。在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算。也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护。

Vue 2.0学习笔记:v-bind

经过前面的学习,我们知道v-on可以实现事件绑定,v-model可以实现双向数据绑定。在Vue中除了这两个指令,还有一个v-bind指令。它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。简单说,v-bind是用来绑定HTML属性

Vue 2.0学习笔记:自定义表单组件

上一节中,通过v-model的学习,我们可以实现双向数据绑定的的效果。在整个教程中,我们看到的示例都是表单控件方面的。实际上v-model还可以和组件结合在一起实现双向数据的绑定效果。在Web的表单控件中,我们经常为了一些特殊的视觉效果,做自定义的表单风格,比如单选按钮、复选框和下拉选择框之类的。那么我们通过Vue来做这些表单控件的组件,会让我们变得更为轻松,而且一劳永逸。接下来我们看看怎么实现单选按钮和复选框的组件。

页面

返回顶部