如颖随行|「Vue 入门系列」第一期，新手快速入门指南，初识 Vue( 二 ) 引言Vue是JavaScript开发人员非常喜欢

{{ message }} 双大括号这种方式叫做文本插值法。
文本插值法不但可以绑定 data 中的简单的数据，还可以绑定复杂的 JavaScript 表达式。
number + 1 ={{ number + 1 }} Is complete? {{ complete ? 'yes' : 'no' }} 反转 message 的结果：{{ message.split('').reverse().join('') }}
运行结果
有一点需要注意，文本插值法中的表达式，始终为单个表达式，这代表我们的语句和流程控制不会生效，请不要这么做。
{{ let age = 20 }}{{ if (ok) { return message } }}尽管在文本插值法中可以绑定 JavaScript 表达式，但大多数情况下，还是不推荐这么做，因为这看起来让模板有些乱。但这个问题可以用计算属性解决。
number + 1 ={{ numberPlus }} Is complete? {{ isComplete }} 反转 message 的结果：{{ strReverse }}正如您所见，模板简洁了许多，但运行结果一样。
计算属性，是传给 Vue 实例的一个 computed 选项，里面包含了一个方法列表。
这些方法名，就是写在模板插值法中的名字。计算属性一个显著的特点就是，它基于数据依赖进行缓存，换句话说，只要 data 选项中的数据变了，基于这些数据运算的计算属性就会跟着变化，并且缓存变化的结果。这大大提升了代码的可读性与性能。
【如颖随行|「Vue 入门系列」第一期，新手快速入门指南，初识 Vue】{{ fullName }}上面的代码，只要 firstName 或 lastName 任何一个属性变化，计算属性 fullName 就会跟着变。可以简单理解，计算属性，是要依赖一些已有的属性而生成并缓存一些新的属性，所以，计算属性的方法内，要有 return 关键字，以便给新属性返回一个可以缓存的值。
基于依赖的计算属性
关于文本插值法引出了计算属性的概念，但计算属性的优点不光如此，这里暂时不提。
其实，关于文本插值法还有一个需要注意的问题， {{}} 之间的数据会被解析成普通文本，而非 HTML 代码，如果需要解析成 HTML 代码，请用 v-html 指令。
{{ message }}
v-html 指令运行结果
通过运行结果可以看到 {{}} 双大括号解析的是普通文本，而 v-html 指令则可以输出 HTML 代码。
我们再关注一下 Vue 实例的 data 选项。
当一个 Vue 实例被创建时 (new Vue) ，这个实例的 data 选项中的属性，就被加入到 Vue 响应式系统中了，也就是说，此时， data 选项中的属性，已经进了“响应式的大门” ，已经被 Vue 响应系统接管，在这时，修改存在于 data 选项中的属性时，会触发视图 (页面) 的重新渲染，我们看到的页面就产生了变化。
而在创建 Vue 实例后再新添加的属性，则无法被 Vue 响应式系统监控到，视图自然也无法更新了。