Vue实例

422 2022-05-03 12:14:24

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 实例，并在创建实例的时候传入了一个选项对象，接下来我们逐个分析每个对象属性的意义。

el 属性

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

原文链接: https://www.yukx.com/vuejs/article/details/2312.html 优科学习网Vue实例

<<上一课程

下一课程>>