上一节，我们学习了在Vue中如何通过v-if和v-show根据条件渲染所需要的DOM元素或者模板。在实际的项目中，我们很多时候会碰到将JSON数据中的数组或对象渲染出列表之类的元素。在Vue中，提供了一个v-for的指令，可以渲染列表。

Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，你也可以不用模板，直接写渲染函数render，使用可选的JSX语法。

JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。

通过前面的学习，我们可以顺利的在Vue中将数据源渲染到HTML的DOM元素中，但很多时候我们希望能控制数据源。也就是数据绑定，并且与其通讯。简单的说，怎么在Vue中实现数据的双向绑定。这种场景一般都是在表单的操作情景中。在Vue中可以使用v-model的指令来实现。不过这篇文章我们只是来学习v-model指令的使用，但不探究Vue数据双向绑定的原理。如果你对原理方面感兴趣，可以阅读这篇文章。

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

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

单个组件相对而言简单一点。在我看来，有些事情你需要知道才能让你开始。关于Vue组件的模板和脚本部分如何协同工作的。模板和脚本组成一个单元，并共享相同的数据。最好的学习就是通过一些实例来阐述，这样更易于交流。

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

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

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