Vue 实例_Vue 入门教程-慕课网

此间少年_ · 更新于 2020-11-27

Vue的安装

Vue 常用指令

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。

实例演示

预览复制

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <div>
      {{ message }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Imooc !'
        }
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释:
JS 代码第 3-10 行，我们创建了一个 Vue 实例，将它挂载在 id 为 app 的 html 元素节点上。
HTML 代码第 2-4 行，我们定义了 id 为 app 的 DOM 元素。所以我们看到 id 为 app 的节点内 {{ message }} 被替换成了 Hello Imooc !，而未给定 id 的元素并未受到 Vue 的作用。

同样，我们可以使用 HTMLElement 的方式给 el 赋值：

实例演示

预览复制

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: document.getElementById('app'),
      data() {
        return {
          message: 'Hello Imooc !'
        }
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释:
JS 代码第 4 行，我们使用 HTMLElement 的方式给 el 赋值。

3.1.2 data 属性

data 属性表示 Vue 实例中的数据，data接收一个 Object 或者返回一个对象数据的函数 Function。当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到Vue 的响应式系统中。当这些属性的值发生改变时，视图也会同时更新。

data 为对象的示例：

实例演示

预览复制

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: {
        message: 'Hello Imooc !'
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

/修改 vue 实例上的 message 数据
vm.message = 'Hello 句号 ！'

代码解释：
JS 代码第 3-5 行，我们定义了 data 数据，在页面中可以看到已经显示出 message 的值。当我们打开控制台，修改 vm 上的 message 时，页面会同时做更新。

data 为函数的示例：

var vm = new Vue({
  el: "#app",
  data() {
    return {
    	message: 'Hello Imooc !'
    }
  }
})

TIPS：只有当实例被创建时就已经存在于 data 中的属性才是响应式的。

也就是说在实例创建之后添加的新的属性不是响应式的，比如：

实例演示

预览复制


<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message }} {{ date }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          message: 'Hello Imooc !'
        }
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

//修改 vue 实例上的 date 数据
vm.date = "2020-08-08"

代码解释：
在 HTML 代码第 2 行，我们使用了数据 date 和 message，但是在创建 Vue 实例的时候我们只初始化了 message 而没有 date 的值，当我们在控制台修改实例上的 date 属性时，视图并不会更新。

如果有一些属性在之后的过程中需要使用，那么你可以在创建Vue实例的时候设置一些初始值。比如：

data: {
  date: '',
  count: 0
}

注意一下，如果 data 中初始化的属性是一个 Object 类型的，那么你需要将 Object 的属性也同时初始化。例如：

实例演示

预览复制

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message.title }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          message: {}
        }
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

//修改 vue 实例上的 date 数据
vm.message.title = "Hello Imooc !"

代码解释：
在 HTML 代码第 2 行，我们使用了数据 message.title，但是在创建 Vue 实例的时候我们只初始化了 message 对象，但是该对象上并没有 title 属性，所以，当我们在控制台上修改 message.title 时，试图不会做更新。

我们只需要给 message 初始化一个 title：

实例演示

预览复制

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message.title }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          message: {
            title:''
          }
        }
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

// 修改 message.title
vm.message.title = "Hello Imooc !"
// 页面正常显示 Hello Imooc !

3.2 $set 方法的使用

前面我们提到了，想要在页面中使用数据，首先要在 data 中初始化。有些同学可能并不想在创建实例的时候就初始化这些属性。那么，我们可以利用 Vue 实例的 $set 方法来添加响应式数据，例如：

实例演示

预览复制

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message.title }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          message: {}
        }
      }
    })
  </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

//使用 vm.$set 方法修改数据
vm.$set(vm.message, 'title','Hello Imooc !')
// 页面正确显示 Hello Imooc !

代码解释：
HTML 代码第 2 行，我们使用了 message.title 的数据，但是，在创建 Vue 实例的时候并没有给 message 初始化 title 属性，所以我们通过 $set 的方式给 message 添加属性。

除了$set，Vue 实例还暴露了其他有用的实例属性与方法。它们都有前缀 $。这些实例方法我们会在后续的章节中逐步介绍，这里大家只需要对它有个印象。

Vue的实例并不只接收这两个选项，还有诸如methods、computed、watch、props等选项，这些选项我们在接下来的小节中会逐个详解。在这里，我们只需要先对Vue实例有一个初步的了解就可以了。

4. 小结

本小节对 Vue 实例进行了简单的介绍，主要有以下知识点：

vue 实例就是通过 Vue 函数创建返回的一个实例对象。该函数接收一个对象形式的参数；
介绍了 Vue 函数参数中的 el 和 data 的含义；
介绍了 Vue 实例上 $set 方法的使用。

Vue的安装

Vue 常用指令

我要提出意见反馈

我的购物车

已加入门课程

购物车里空空如也

Vue 入门教程

前端开发

JavaScript

JavaScript 入门教程

TypeScript 入门教程

Vue 入门教程

Ajax 入门教程

ES6-10 入门教程

Yarn 入门教程

ECharts 入门教程

HTML & CSS

CSS3 入门教程

雪碧图入门教程

移动端布局教程

Html5 入门教程

Sass 入门教程

HTML 入门教程

canvas 入门教程

uni-app 入门教程

服务端相关

服务器

Nginx 入门教程

HTTP 入门教程

Docker 入门教程

Shell 入门教程

Linux 入门教程

开发工具

Gradle 入门教程

Vim 编辑器教程

RESTful 规范教程

Dreamweaver 教程

Markdown 入门教程

Maven 入门教程

Eclipse 编辑器教程

GitHub 入门教程

Android Studio 编辑器教程

PyCharm 编辑器教程

Sublime Text 使用教程

Postman 教程

Git入门教程

热门服务端语言

C 语言入门教程

Go 入门教程

Kotlin 教程

Ruby 入门教程

ThinkPHP 入门教程

Java

基础应用

Java 入门教程

Android 入门教程

算法入门教程

数据结构入门教程

Lambda 表达式教程

Java 并发原理入门教程

设计模式入门教程

Java并发工具

JVM 入门教程

RabbitMQ 入门教程

网络编程入门教程

后端通用面试教程

框架应用

Spring Boot 入门教程

Spring 入门教程

Hibernate 入门教程

MyBatis 入门教程

Spring MVC 入门教程

Swagger 入门教程

Zookeeper 入门教程

Netty 教程

Spring Security

微服务

Spring Cloud Hystrix

Python

基础应用

Python 入门语法教程

Python 原生爬虫教程

Python 进阶应用教程