创建Vue实例对象，详解MVVM

本节正式进入 Vue.js 的讲解，首先需要安装 Vue.js，安装方式有两种，本节讲解第一种安装方式，即通过 CDN 安装，这种方式非常简单，只需要在文件中引入 CDN 网址，代码如下（另一种安装方式在后文中介绍）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 安装 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

上述代码中，script 的引用就是 Vue.js 的安装，有两个需要注意的事情。

  • Vue.js 的引用分为生产版本和开发版本，生产版本是最终上线的版本，代码会进行压缩，开发版本一般是供学习和测试使用。

  • 建议把 Vue.js 的引用位置放在 body 标签的最下方，不要放在 head 标签中。

引入 Vue.js 之后，内存中就多了 Vue 构造函数，此时就可以创建 Vue 实例了，并传入配置对象，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
    <!-- 安装 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        });
    </script>
</body>
</html>

上述代码是一个完整的 Vue 实例，分析上述代码可发现，通过 new Vue({}) 声明的 vm 实例就是 MVVM 中的 VM 层，负责 M 层和 V 层的调度。

配置对象中的 el 属性表示声明出来的 Vue 实例要控制页面上的哪块区域。这个实例中 el 的属性值是 #app，表示控制的页面区域，如下所示。

<div id="app"></div>

而这里的 HTML 代码就是 MVVM 中的 V 层视图层。

data 的属性值是一个对象，用来存储 V 层所用到的数据，所以 data 就是 MVVM 中的 M 层数据层。

data 中存储 msg 属性，这里要做的是把 msg 中的 “Hello World” 渲染到以下代码所示的区域。

<div id="app"></div>

在使用 Vue 后，无须再操作 DOM 元素，直接以插值表达式的形式输出 {{msg}} 即可。

{{}} 又被叫作插值表达式，可直接渲染 data 中的属性。

通过以上实例可以发现，我们只需要注意 data 中的数据，不需要考虑数据具体是怎么渲染到页面中的，因为 Vue 已经帮我们实现了，这也是 Vue 的核心思想之一，即数据驱动视图。

分析 vm 实例对象。打开浏览器，按 F12 键，选择控制台，在控制台中打印 vm 实例，打印的结果如下。

{
  "$attrs": {},
  "$children": [],
  "$createElement": "function $createElement(a, b, c, d)",
  "$el": "<div id=\"main\">",
  "$listeners": {},
  "$options": {
    "components": {},
    "directives": {},
    "el": "#main"
  },
  "$parent": undefined,
  "$refs": {},
  "$root": {
    "_uid": 0,
    "_isVue": true,
    "$options": {}
  },
  "$scopedSlots": {},
  "$slots": {},
  "$vnode": undefined,
  "_c": "function _c(a, b, c, d)",
  "_data": {
    "msg": {
      "getter": "Getter",
      "setter": "Setter"
    }
  },
  "_directInactive": false,
  "_events": {},
  "_hasHookEvent": false,
  "_inactive": null,
  "_isBeingDestroyed": false,
  "_isDestroyed": false,
  "_isMounted": true,
  "_isVue": true,
  "_renderProxy": {
    "<target>": {},
    "<handler>": {}
  },
  "_self": {
    "_uid": 0,
    "_isVue": true,
    "$options": {}
  },
  "_staticTrees": null,
  "_uid": 0,
  "_vnode": {
    "tag": "div",
    "data": {},
    "children": [{}]
  },
  "_watcher": {
    "deep": false,
    "user": false,
    "lazy": false
  },
  "_watchers": [{}],
  "msg": "Getter & Setter"
}

vm 是通过 new Vue({}) 创建出来的实例对象，实例对象中的属性可以分为以下三大类。

  • 第一类以 “$” 符号开头，表示 Vue 中的公有属性。

  • 第二类以下画线开头，表示 Vue 中的私有属性。

  • 第三类是 Vue 中 data 里面的自定义属性。