2.2　响应式声明渲染机制

Vue是一个响应式系统，模型（Model）层只是普通的JavaScript对象，修改它则视图（View）自动更新。Vue的工作原理是当把一个普通的JavaScript对象传给Vue实例的data选项时，Vue会遍历此对象的所有属性，在属性被访问和修改时通知变化，并把数据渲染进DOM。

2.2.1　响应式声明渲染机制简介

Vue.js允许采用简洁的模板语法声明式地将数据渲染进DOM的系统。图2-2所示的视图是来自状态的声明映射，状态发生变化，数据自动渲染。代码框架如例2-3所示。

图2-2　数据渲染

【例2-3】演示数据如何渲染到DOM。

例2-3中数据和DOM已经绑定在一起，所有元素都是响应式的。按F12键打开浏览器控制台，修改app.message="Hello Vue.js"，页面中<p>标签中的数据自动更新。

下面通过例2-4再次体验Vue的响应式声明渲染，其中使用了v-model绑定文本框，在文本框中的数据自动绑定到myData的message属性，同样，message属性的值也自动绑定到文本框中。

【例2-4】演示响应式声明渲染。

例2-4演示响应式声明渲染运行结果，如图2-3所示。

图2-3　响应式声明渲染

当把文本框中的值由Hello Vue！修改为Hello Vue.js！时，模型data属性的message值自动修改，如图2-4所示，在开发者工具控制台输入app.message，观察控制台发现app.message的值已经修改，在控制台修改app.message='自动更新'。这时DOM中也已经自动渲染成功，文本框中显示自动更新。

图2-4　响应式声明渲染数据更新

例2-4演示响应式声明渲染时可以使用Vue中的事件v-on：click来绑定事件，缩写形式@click，可以提前试一试，修改后的代码如下。关于Vue事件会在第4章讲解。

2.2.2　Vue属性绑定

通常如果页面需要超链接，初学者可能会这样写代码，如例2-5所示，运行后会发现并没有生成超链接，那如何显示超链接呢？这时候就需要使用Vue属性绑定。

【例2-5】演示属性绑定。

发现超链接有问题，这时候需要使用v-bind，修改代码再次运行后发现超链接已经可以跳转。

v-bind主要用于属性绑定，Vue官方提供了一个简写方式，例如：

例2-5中如果需要把bookName绑定到文本框该如何实现呢？还是需要用v-bind绑定属性。

要绑定一段HTML，可以使用v-html，运行后发现<p>标签中有一个完整的<a>标签。

以上简单介绍了如何给属性绑定对应的值，用到了v-bind、v-html。这些都是Vue中提供的指令，第3章会详细讲解。

2.2.3　Vue双向数据绑定

Vue是一个MVVM框架，即数据双向绑定，当数据发生变化的时候，视图也发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue的精髓之处了。值得注意的是，所说的数据双向绑定，一定是对于DOM元素来说的，非DOM元素不会涉及数据双向绑定。例2-6演示了数据的双向绑定。

【例2-6】演示数据如何双向绑定。

例2-6演示数据双向绑定的运行结果，如图2-5所示。

图2-5　数据双向绑定

通过结果发现数据实现了双向绑定，把data下的数据放到页面上，并且可以把data里的数据和页面上的元素产生一一对应的关系。绑定的方式有两种，一种是表达式“{{}}”，可以由模板引擎根据数据实时进行修正，Vue负责驱动模板把数据渲染到DOM上；一种是属性名也是一种指令，如v-model就是双向绑定。这样绑定完成后就省掉了频繁操作DOM的步骤，开发代码简单，效率高。