4.2.1 实例与数据

Vue 实例是 Vue 框架的入口，也是前端的 ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然也有自身的一系列选项。

在 main.js 中，可以看到如示例 2 所示的代码。

示例 2

new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

当创建一个 Vue 实例时，需要传入一个选项对象。下面介绍一下选项对象中的配置项。

• el：提供一个在页面上己存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 css 选择器，也可以是一个 HTMLElement 实例。示例 2 中是把示例挂载到 id 为 app 的元素中。
• router：这里是省略写法，正常应该是 router:router，因为属性名和属性值一样，所以省略为 router，代表传入路由的实例对象，把配置的路由功能运用到整个项目中。
• components：包含 Vue 实例可用组件的哈希表。
• template： 一个字符串模板，作为 Vue 实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

关于 Vue 实例介绍完之后，接下来看一下数据（data）的内容。在单文件组件中，data 必须是一个函数，它返回一个对象，这个返回的对象的数据供组件实现。

使用 Vue-cli 新建一个项目，打开项目模板自带的单文件组件 HelloWorld.vue，如示例 3 所示，这里主要展示核心代码。

示例3

<template>
   <div>
       <h1>{{ msg }} </h1>
   </div>
</template>
 
<script>
export default {
   name: 'APP',
   data() {
      return {
          msg: '黄子涵'
      }
   }
}
</script>
 
<style scoped>
</style>

使用命令提示符窗口切换到项目目录下，运行“npm run dev”命令，启动项目，浏览器运行效果如下图所示。

可以发现返回的对象的数据 msg，通过 HTML 部分的 h1 标签中的 {{ msg }} 获得了 msg 变量的值并进行了显示。那么这里的双层大括号嵌套为什么可以取得变量的值呢，官方称这种双层大括号嵌套为插值表达式 。