大家好，欢迎来到新一期的VueJS教程，我是哈默老师，这一期给大家讲解的是Vue实例。主要讲的是什么是Vue实例，以及它是怎么帮助我们把数据显示到页面上的。
初始代码
首先我们来看一个实际的例子。
左边有一个div，div里有h1来作为标题，右边JS文件中定义了一个变量product，值为Balls。
问题
现在要解决的问题是我们要把变量product保存的值显示到index.html中的h1标签中。
我们分为下面的几个步骤。
首先，我们要引入VueJS的cdn文件到我们项目中。
BootCDN里找到VueJS框架的地址并复制
粘贴地址，引入VueJS框架的CDN地址
接下来，在我们的index.js文件中，我们会定义下列代码。
var app = new Vue() 创建Vue实例
同时，在index.html中，我们会使用JS表达式，就像这样。
index.html中，我们使用{{}}语法来展示product数据。
这时候，在我们的浏览器页面上就会出现Balls。
浏览器上，我们就看到了我们定义的Balls数据。
欧耶！这样一来，我们就实现了最开始的目标：把product变量保存的值展现到浏览器页面上。但是我们是怎么做到的呢？不妨来分析一下。
什么是Vue实例？
我们在index.js中定义了一个Vue实例，在这个Vue实例中我们可以传递很多很多不同的配置项。这样的配置就让我们的Vue实例有了不同的能力，比如保存数据(用data配置)和实现功能(用methods等定义)。
var app = new Vue()这一行代码，就定义了我们的(根)实例。
接下来我们可以在Vue()这个函数的参数里传递参数，作为配置项，如下图。
给new Vue()根实例填写配置项options。
将Vue实例与HTML元素进行关联
Vue实例可以通过el配置项跟某个HTML元素建立关联，关联了之后我们就可以在对应的HTML元素里展示我们下一个配置项data里的数据。
配置项el用来配置与哪个HTML元素进行关联，以图中为例，Vue实例与id为app的元素进行了关联。
保存数据
Vue实例里面另一个配置项data就是用来保存数据的，具体的方式如下图。
配置项data用来保存数据，我们这里保存了2个数据，product和drinks。
展示到页面上
如果想要让我们data里的product或者drinks展示到页面上的话，在index.html中，我们需要使用{{}}这种语法，如下图。
{{}}语法用来展示对应的数据，这里展示的是product。
此时，浏览器页面上展示的是Balls。
浏览器页面上展示product保存的值。
我们可以改成其他任意的数据，比如drinks。
{{}}里我们改成drinks。
这个时候，我们再来看到浏览器上。
浏览器页面上，展示出了drinks保存的值。
响应式
之所以Vue能展示我们定义在data里的product，是因为Vue是响应式的。换句话说，所有在index.html中使用到product的地方，都会与data里的product相关联。这就意味着，不仅仅Vue能把data里的product展示到页面上，而且一旦data里的product值发生了改变，页面上的展示的内容也会改变。有点懵我讲的是什么意思？看下下面的图片。
通过app.drinks，我们可以访问到定义在Vue实例data上的属性。
我们尝试改变drinks保存的值。
通过重新给app.drinks赋值来改变drinks保存的值。
浏览器上显示的内容也相应改变，这就是我们说的响应式，数据改变，页面上的内容也相应改变。
以上就是我们今天这个教程的所有内容。我们来做个简单回顾。
我们学习了什么是Vue实例，以及它是如何把data里的数据展示到页面上的。Vue实例可以与某个HTML元素相关联。Vue实例的data里保存的数据可以通过{{}}的语法展示到页面上。Vue是响应式的。谢谢大家花时间阅读这篇教程，如果觉得好的话，可以评论，点赞，转发，收藏一下！我们下期再见！
