第二节 实例化Vue对象

摘要：上节我们简单介绍了Vue.js是什么以及如何引入CDN，本节将要介绍使用CDN后如何来实例化对应的Vue对象。

首先新建一个index.html文件，以CDN方式引入Vue.js，如下图：

现在我们就可以使用Vue了，在这里我们新建一个app.js来实例化Vue对象，然后在index.html中引入app.js。

主要步骤如下：

1、创建实例

如上图，通过new Vue()就已经创建好了一个Vue实例，而且参数是一个对象。

2、获取根容器

el代表element，指需要获取的元素，一定是html中的根容器元素。这是什么意思呢？在Vue中其实是对DOM进行操作，不会在html中写大量结构，html中只有一个根容器，通过添加一些方法、属性往根容器里面填充内容。根容器也就是图中箭头所指的div，显然el操作的内容就是“#vue-app”。

3、设置数据

data用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。比如name为“米修在线”，job为“web前端开发”等。

4、渲染显示html代码：

保存运行后的效果图

可见，我们想要显示data中的name是通过{{}}实现的，花括号在这里是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。

那么如果当前app.js中的内容放在根容器之外，会有怎样的效果呢？

测试可以发现，并不能拿到我们想要的内容。所以内容仅限于根容器，置于范围之外是没有效果的。

到这里，应该对实例化Vue对象有所了解了吧！下节内容我们将会介绍更多的数据类型和对应的方法。