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

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

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

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

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

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

学习Vue有一段时间了，但真正的实战并不是很多。师父告诉我，要学好就得多动手。为了能把动手写的案例有一个集中的地方放置，我在Github上创建了一个仓库**VueStudy**。这里将会不断的添加一些练习过的案例，如果你感兴趣的话，欢迎提交你写过的案例。

作用域插槽（Scoped Slots）是Vue的一个很有用的特性。可以使组件更加通用和可复用。唯一的问题是他们很难理解！试图让你围绕着整明白父和子作用域的交织关系，就像是解决一个棘手的数学方式程一样。当你理解不了的时候，最好的一个方法就是试着用它来解决问题。在接下来的内容中，这篇文章将向大家演示如何使用作用域插槽来构建可重用的列表组件。

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

Vue中的计算属性是所有属性的计算，而这些计算都是变向的在过滤值，通过数据的不断变化计算出来不同的值和操作不同的方法. 而在Vue中，会使用到计算属性的场景常见的有：模板内的表达式、属性v-bind里可以进行的表达式和指令中可以进行的表达式。以上三者的主要优势是简洁。如果只是一个小操作，比如说一些简单的数值++，字符拼接，三元表达式，那么使用相当方便。当然，以上方式也有自己的劣势。一旦要处理的逻辑复杂，代码量就会变得大得多，而且难于维护。比如说用到if语句来控制流程。