对于 Vue.js 框架编程而言，当创建一个新的Vue实例对象时，其会
将数据（data）对象中的所有的property属性?入到Vue.js框架的响
应式系统当中去。该操作带来的最直接效果就是，当这些property属
性值发生改变时，视图（View）将会随之发生“响应”——也就是同
时更新为新匹配的属性值。以上关于Vue.js数据的描述听起来会感觉
比较晦涩，下面我们通过具体实例进行解释。
（1）在页面中定义一个层（<div>）元素，用于显示Vue组件定义
的对象，代码如下：
【代码8-1】（详见源代码vuedata目录中的vuedata. html文件 ）
【代码说明】
第 01 行 代 码 中 ， 定 义 了 <div> 元 素 的 id 属 性 （ “id-di?-
number”）。
第02行代码中，通过Vue.js框架的插值模板语法（{{ }}），引用
了一个对象（dNum）。
（2）通过js脚本代码定义一个对象（oNum），在该对象内定义一
个属性（n），并进行初始化操作，代码如下：
【代码8-2】（详见源代码vuedata目录中的vuedata.html文件）
（3）通过Vue脚本代码定义一个Vue对象（vm），将对象（oNum）
所定义的数据写进该Vue对象（vm），代码如下：
【代码8-3】（详见源代码vuedata目录中的vuedata.html文件）
【代码说明】
第01～06行代码中，通过“ne? Vue()”构造函数实例化Vue对象
（?m）。同时，这段代码创建了Vue对象的入口，并将该对象所定
义的内容渲染到页面中对应的DOM元素中。具体说明如下：
■第02行代码中，通过“el”属性绑定DOM元素（id =
‘id-di?-number’），该DOM元素定义在【代码8-1】中。
■第0?～05行代码中，通过“data”属性绑定数据操作。
其 中 ， 在 第 0? 行 代 码 中 定 义 了 一 个 ?ro?erty 属 性
（dNum），其将该属性值初始化为【代码8-2】中定义的
对象（oNum）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.1所示。
如图8.1中的箭头所示，【代码8-3】中定义的Vue对象成功渲染到
【代码8-1】中定义的页面D?M元素中。
这里需要特别关注的是，Vue对象中data属性的property属性的
“响应式”特性。也就是当这些数据发生改变时，页面视图会随之进
行重新渲染。为了验证这个Vue.js数据的特性，我们在页面中添?一
个文本输入框和一个关联按钮，通过人工输入修改property属性
（dNum）的值，并观察页面视图的变化。代码如下：
【代码8-4】（详见源代码vuedata目录中的vuedata.html文件）
【代码说明】
第0?行代码中，通过<in?ut ty?e=”text”>元素定义了一个文本输
入框。
第0?～08行代码中，<in?ut ty?e=”button”>元素定义了一个按
钮。
然后，定义上面按钮控件（id=’id-input-btn-vm’）的onclick方
法（onBtnVMClk()），以修改property属性（dNum）的值，代码如
下：
【代码8-5】（详见源代码vuedata目录中的vuedata.html文件）
【代码说明】
第0?行代码中，将从文本输入框中获取的用户输入值，赋值给?m
对象的?ro?erty属性（dNum）。
接下来，通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.2所示。
如图8.2中的箭头所示，【代码8-5】通过获取人工输入的数值并
赋值给property属性（dNum）后，页面视图中的D?M元素的内容也同步
进行了更新。注意，这个过程是通过修改vm对象实现的。那如果直接
修改【代码8-2】中定义的对象（oNum）呢？
为了验证这个Vue.js数据的特性，我们在页面中再添?一个文本
输入框和一个关联按钮，通过人工输入修改对象（oNum）的值，并观
察页面视图的变化。代码如下：
【代码8-6】（详见源代码vuedata目录中的vuedata.html文件）
【代码说明】
第0?行代码中，通过<in?ut ty?e=”text”>元素定义了一个文本输
入框。
第0?～08行代码中，<in?ut ty?e=”button”>元素定义了一个按
钮。
然后，定义上面按钮控件（id=’id-input-btn-data’）的onclick
方法（onBtnDataClk()），以修改对象（oNum）的值，代码如下：
【代码8-7】（详见源代码vuedata目录中的vuedata.html文件）
【代码说明】
第0?行代码中，将从文本输入框中获取的用户输入值，赋值给对
象（oNum）的属性（n）。
下面我们还是通过VS Code开发工具启动FireFox浏览器，运行测
试vuedata.html页面，效果如图8.3所示。
如图8.3中的箭头所示，【代码8-7】通过获取人工输入的数值并
赋值给对象（oNum）的属性（n）后，页面视图中的D?M元素的内容也
同步进行了更新。
提示
只有当Vue对象实例被创建时，就已经?在于data属性中的
property属性才是响应式的。如果在晚些时候才需要使用某个
property属性，那么还是需要在一开始初始化时定义好该?ro?erty
属性。即使一开始该property属性为空或不?在，那么也需要设置
一些初始值（比如：空字符串）。
