03《Vue 入门教程》Vue 实例

发布一下 2022年02月05日 09:11 0 0

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}代码块1234

注意一下，如果 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.titlevm.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>1234567891011121314151617181920212223242526

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

//使用 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 方法的使用。

本文地址：http://0561fc.cn/60482.html