如上图所示，在html中，我们只需要使用{{totalPrice}}这个计算属性就可以来表示最终的商品总额。我们不需要关注这个变量的数值变化，totalPrice这个变量的逻辑写在对应的computed计算属性中。
也许会有疑问，这个计算属性和定义一个method方法不是差不多么？这两者最大的区别是计算属性是基于它的依赖进行缓存的。计算属性只有在它的相关依赖发生变化时才会重新计算求值。在本例中，只有当选择商品的价格price和数量count发生变化时，这个计算属性totalPrice才会重新计算新的值。这就意味着，只要totalPrice这个值没有发生变化，多次访问该计算属性会立即返回之前的计算结果，而不必再次执行计算。
模版语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。Vue的模版语法包括了使用双大括号插入文本、使用v-html插入纯HTML内容、使用v-bind插入对象、类似angular的v-if、v-show、v-for指令、以及过滤器等等。
组件化
组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用。
举一个简单的组建例子，我们首先编写一个star组件，它就是一个普通的star.vue文件。它的作用就是简单实现了一个五角星。
如何在其他的vue文件中使用这个star组件呢？如下图所示，首先通过import引入star组件对象，并在想使用star组件的vue文件中声明注册star组件。现在就可以愉快的通过标签来在该vue文件中任意地方使用star组件了。在你想展示一个五角星的地方，使用一个star标签，就可以轻松完成这个功能。
组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。如本例所示，子组件star要显式的使用props选项声明它期待获得的数据。在这里就是指的“size”和“score”两个变量。我们可以通过父级给子组件star传入大小和数值这两个对象，来实现对子组件的定制化。
过渡效果
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，可以用简单的几行代码实现酷炫的过渡效果。Vue 提供了 transition 的封装组件，在使用v-if、v-show等方法使得transition内部dom元素发生变化时，可以给任何元素和组件添加 entering/leaving 过渡。