1.3　实例化Vue对象、数据和方法

1.3.1　实例化Vue对象

在使用Vue.js的时候都是通过构造函数Vue()创建一个Vue的根实例，每一个new Vue()都是一个Vue构造函数实例，这个过程叫函数的实例化。

Vue构造器要求实例化时需要传入一个选项对象，选项对象包括挂载元素（el）、数据（data）、方法（methods）、模板（tamplate）、生命周期钩子函数等选项。例1-1演示创建Vue实例的过程。

【例1-1】演示创建Vue实例。

运行结果：乐美课堂！

注意　如果把<div>{{name}}</div>标签放到div层外面就不能渲染数据，要求所有内容必须编写在容器中。

代码解析：（1）整个div标签里的是一个模板语法，在“{{}}”里的property是一个模板变量或模板表达式；（2）第一个script标签引入Vue.js文件；（3）第二个script标签里书写JavaScript代码，创建Vue实例，调用Vue的构造方法，在构造方法中el对应div标签的id选择器，name是data对象里的一个属性，并且和div标签里的{{name}}对应。

最后使用浏览器运行本程序，界面渲染的是data对象里的name属性的值“乐美课堂！”。

1.3.2　Vue数据和方法

实例化Vue对象需要在data中定义数据，data可以是一个JavaScript对象。下面修改例1-1中data的JavaScript对象，增加属性age、email。

修改代码后就可以在浏览器中看到最新的结果。同时age、email的值已插入到<h1>、<p>标签中。

上面已经介绍了挂载元素（el）、数据（data），下面我们再来介绍另一个属性方法（methods），在methods中定义方法，Vue允许在HTML中调用这些方法。

如上在methods中定义了一个say方法，在根容器app中调用say方法使用｛｛say()｝｝。

运行后就可以看到方法已经被调用，数据正常显示在界面中。那数据是在什么时候挂载到DOM中的呢？下面我们就来讨论一下。

1.3.3　将数据挂载到DOM页面

这里通过一个示例分析Vue何时把数据挂载到DOM页面上，何时更新DOM数据。例1-2演示了数据如何挂载到DOM。

【例1-2】将数据挂载到DOM。

运行结果如图1-11所示。

图1-11　挂载数据

当用户单击“更新”按钮时，修改app.message的值，从开发者工具控制台可看到updated方法被调用了，数据已经被重新挂载到DOM中，如图1-12所示。

图1-12　更新DOM

下面再来看一个有趣的示例——例1-3，你会有不一样的发现。

【例1-3】演示插值。

运行结果：Hello Vue.js！

修改代码第9行为：

依然可以正常地渲染出数据来，是不是很方便？这就是Vue的魔力，可以插值，大家可以自己试一试在jQuery中实现（一定要写例子比较）。比较后你会发现Vue的魅力。思考：第16行到第19行的代码中共有几个JavaScript对象？