1. 前言

本节开始我们将正式进行 Vue 基础知识的学习。本小节我们将先介绍什么是 Vue 实例,包括如何创建 Vue 实例,Vue 实例上的属性参数,以及如何使用 Vue 开始工作。Vue 实例上的属性和方法很多,本小节我们不会详细介绍所有的属性和方法,同学们目前只需要了解什么是 Vue 实例以及如何创建它。

2. 慕课解释

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 — 官方定义

Vue 实例是通过 Vue 函数传入对应 options 参数创建出的一个实例对象。

3. 创建 Vue 实例

Vue 实例的创建是通过 new Vue(options) 来实现的,options 是创建 vue 实例传递的参数。它是一个对象:

//最简单的 options 对象示例:
{
  el: "#app",
  data() {
    return {}
  },
}

接下来我们用一个简单的例子来学习如何创建 vue 实例:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app"
  })
</script>

代码解释
JS 代码第 3-10 行,我们使用 Vue 函数创建了一个实例对象,在调用函数时我们传入了一个对象参数,该对象只有一个 el 属性。
在之前的小节中我们学习到Vue是一个MVVM框架,所以在日常开发中我们通常将 Vue 实例的变量名取为 vm。当然,这并不是必须的,你也可以给他其他任意的变量名。

3.1 vue 实例参数

在上述的例子中,我们首先使用 Vue 函数创建一个新的 Vue 实例,并在创建实例的时候传入了一个选项对象,接下来我们逐个分析每个对象属性的意义。

3.1.1 el 属性

el 属性表示 Vue 实例要挂载的节点,该属性的值可以是一个 CSS 选择器,也可以是一个 HTMLElement。

实例演示
预览 复制