（06）Vue 入门——① Vue 实例 | Vue 基础理论实操

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
1. Vue 实例是什么？
2. 如何访问根实例？
3. 如何访问父实例？

[编号：vue_06]

🔗本阶段对应的“官方文档”阅读“Vue 实例”章节

🔗前置知识（先把下边文章整篇通读）：理解“构造函数”是什么——《面向对象编程：① 对象构造函数》

1 Vue 中的根实例

在实现“简易TodoList”的过程中，就已经提到过很多次“Vue 实例”。

❓什么是根实例？

答：通过 new 运算符创建的 Vue 实例就是根实例，整个程序都是以这个 Vue 实例作为入口开始执行的。

<head>
  <meta charset="UTF-8">
  <title>前端一万小时-Vue 实例</title>
  <script src="./vue.js"></script> <!-- ❗️在创建 Vue 实例之前，必须先引入 Vue.js 库！ -->
</head>
<body>
  
<div id="app"> <!-- 1️⃣页面上有一个 id 为 app 的 div； -->
  
    {{message}} <!-- 3️⃣-②：通过插值表达式调用数据内容。 -->
</div>

<script>
  var app = new Vue({ // 2️⃣-①：使用 new 运算符通过 Vue 这个类创建出 Vue 的实例；

    el: '#app', /*
    						2️⃣-②：el 负责定义 Vue 实例所接管的 DOM 最外层的标签，
                这里即让 Vue 实例接管 #app 这个 div 标签里所有 DOM 的显示；
                 */

    data: { // 3️⃣-①：data 存放数据；
      message: 'hello qdywxs'
    }
  })
</script>
</body>

保存，返回页面查看，可以看到 message 中的内容显示在了页面上：

这是因为 Vue 实例接管了 #app 这部分的 DOM，所以它会对 DOM 的内容进行分析。

当 Vue 发现 #app 中使用了 {{message}} 这样的插值表达式语法，就会到 data 中寻找 message 对应的数据 hello qdywxs ，用数据替换插值表达式。

同样的，当我们给 message 所在元素上绑定一个 click 事件时，当 Vue 对 DOM 内容进行分析，也会发现这一个 DOM 元素绑定了一个事件。于是它会到 methods 中找到事件触发后要执行的 handleClick 方法。

<div id="app">

  <div @click="handleClick"> <!-- 1️⃣通过 v-on（即 @ ） 绑定 click 事件，
														 事件触发后执行 handleClick 方法； -->
    
    {{message}}
  </div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello qdywxs'
    },
    
    methods: { // 2️⃣方法必须定义在 Vue 实例的 methods 中。
      handleClick() {
        alert('qdywxs')
      }
    }
  })
</script>

2 Vue 中每个组件都是实例

除了 Vue 的根实例以外，Vue 中的每个小组件也都是一个个 Vue 实例。

当创建一个小组件时，Vue 的底层会把它编译成一个 Vue 的实例。我们可以理解为：一个 Vue 的项目，是由很多小的 Vue 实例（组件）组成的。

<div id="app">
  <div @click="handleClick">
    {{message}}
  </div>

  <child></child> <!-- 3️⃣在根实例所接管的 #app 中通过标签的形式使用 child 组件。 -->

</div>

<script>
  Vue.component('child', { // 1️⃣通过 Vue.component() 定义一个名为 child 的组件；
    
    template: '<div>hi qdywxs</div>' // 2️⃣child 让它显示一个内容是“hi qdywxs” 的 div；
  })

  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello qdywxs'
    },
    methods: {
      handleClick() {
        alert('qdywxs')
      }
    }
  })
</script>

我们可以通过控制台在页面上查看到 Vue 实例：

1️⃣我们的根实例名为“app”，在控制台可以通过输入 app 获取到它； 2️⃣通过 app.$el 可以获取到实例所接管的 DOM 元素的最外层，这里即为 #app ； 3️⃣通过 app.$data 可以获取到数据 message ；

❗️在获取实例的 el 、 data 属性时， app. 后面都加了一个 $ 符。

当我们输入 app.$ 后，可以看到有很多其他的属性：

所以 Vue 实例上除了有 el 、 data 、 methods 这样的属性（或者说“方法”）之外，还有很多其他的属性。比如 watch 、 computed 等等，我们在后面的内容会涉及到。

祝好，qdywxs ♥ you！