03、创建一个Vue实例

第一步、创建语法

创建一个Vue的实例很简单，如下所示：

<script>
  let vm = new Vue({})
</script>

通过关键语句 new Vue() 我们就可以创建一个 Vue 实例：vm 了。注意，我们只是给Vue()传了一个参数选项，是一个空对象，我们接着往下看。

第二步、设置数据

没错，我们就是利用上面的对象参数，来创建这个 Vue 实例 vm 的，比如：设置vm里面的数据。

let vm = new Vue({
  // 实例vm的数据
  data: {
    name: '张三',
    age: 18
  }
})

写法也非常简单，参数对象不在是一个空对象，它包含一个属性：data，而 data 的值也是一个对象，这个对象就是我们给 vm 实例设置的数据了。

第三步、挂载元素

创建一个实例 vm ，设置了 vm 的数据后，接下来就是该怎么把数据展示在视图上，这就要通过我们的挂载元素了。我们看看怎么用：

视图 view 部分：

<div id="app"></div>

视图（html部分）上我们有一个 id 为 “app” 的 div 元素。

let vm = new Vue({
  // 挂载元素
  el: '#app',
  // 实例vm的数据
  data: {
    name: '张三',
    age: 18
  }
})

我们可以看到参数中我们不但有 data ，还多了属性：el ，el 参数提供一个在页面上已经存在的 DOM 元素，作为我们 vm 的挂载目标。表示我们的实例 vm 和 id 为 app 的DOM节点就关联起来了。

第四步、渲染

实例 vm 创建好了，数据 data 有了，DOM 节点也关联起来了，最后一步，就是把 vm 的数据绑定到指定的视图上了，也就是数据渲染。

<div id="app">
  我是{{ name }}，今年{{ age }}岁了。
</div>

对，就是你看到的这么简单，我们只需要用一个双大括号：{{ }} 即可，你可以留意到，{{ name }} 和 {{ age }} 就是我们给实例 vm 设置的数据 name 和 age ，我们用{{ }}可以直接读取到它们的值。
我们访问页面，就会看到 vm 的数据 data 就会被成功地渲染出来：

渲染.png

就这样，我们就成功地创建了一个 Vue 实例，并把它的数据渲染在视图上了。