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 方法的使用。
- 还没有人评论,欢迎说说您的想法!