4.2.1 实例与数据

2022-06-17 21:02:28 阅读：147 来源： 互联网

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 变量的值并进行了显示。那么这里的双层大括号嵌套为什么可以取得变量的值呢，官方称这种双层大括号嵌套为插值表达式。

标签：Vue,示例,4.2,实例,msg,router,数据,模板
来源： https://www.cnblogs.com/Huang-zihan/p/16387041.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

4.2.1 实例与数据

示例 2

示例3