1、前言
学习真的是一件很有意义的事情，学习一个感兴趣的方面的知识能让每天的工作也变得轻松，和一群志同道合的小伙伴一起学习进步的速度也是飞速的前进。
2、学习内容
什么是 Vue 实例?
如何创建 Vue 实例;
Vue 实例上的属性参数;
如何使用 Vue 开始工作。
3、什么是vue实例
每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例。
Tips：Vue 实例是通过 Vue 函数传入对应 options 参数创建出的一个实例对象。
4、创建vue实例
Vue 实例的创建是通过 new Vue(options) 来实现的，options 是创建 vue 实例传递的参数。它是一个对象：
//最简单的 options 对象示例：
{
el: "#app",
data() {
return {}
},
}下面创建 vue 实例：
var vm = new Vue({
// 选项
})一个 Vue 实例，其实正是一个MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名。
4.1、vue 实例参数
在上面创建的实例中的例子，我们首先使用 Vue 函数创建一个新的 Vue 实例，并在创建实例的时候传入了一个选项对象，接下来我们逐个分析每个对象属性的意义。
4.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://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Jum !'
}
}
})
</script>
</html>
代码解释:
JS 代码：创建了一个 Vue 实例，将它挂载在 id 为 app 的 html 元素节点上。
HTML 代码：定义了 id 为 app 的 DOM 元素。所以我们看到 id 为 app 的节点内 { { message }} 被替换成了 Hello Jum !，而未给定 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://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: document.getElementById('app'),
data() {
return {
message: 'Hello Jum !'
}
}
})
</script>
</html>
代码解释:
JS 代码：使用 HTMLElement 的方式给 el 赋值。
4.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://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: 'Hello Jum !'
}
})
</script>
</html>代码解释：
JS 代码：定义了 data 数据，在页面中可以看到已经显示出 message 的值。当我们打开控制台，修改 vm 上的 message 时，页面会同时做更新。
data 为函数的示例：
var vm = new Vue({
el: "#app",
data() {
return {
message: 'Hello Jum !'
}
}
})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://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: 'Hello Jum !'
}
}
})
</script>
</html>代码解释：
在 HTML 代码：使用了数据 date 和 message，但是在创建 Vue 实例的时候我们只初始化了 message 而没有 date 的值，当我们在控制台修改实例上的 date 属性时，视图并不会更新。
注意一下，如果 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://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: {}
}
}
})
</script>
</html>代码解释：
在 HTML 代码：使用了数据 message.title，但是在创建 Vue 实例的时候我们只初始化了 message 对象，但是该对象上并没有 title 属性，所以，当我们在控制台上修改 message.title 时，试图不会做更新。
4.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://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: {}
}
}
})
</script>
</html>代码解释：
HTML 代码：使用了 message.title 的数据，但是，在创建 Vue 实例的时候并没有给 message 初始化 title 属性，所以我们通过 $set 的方式给 message 添加属性。
除了$set，Vue 实例还暴露了其他有用的实例属性与方法。它们都有前缀 $。这些实例方法我们会在后续的章节中逐步介绍，这里大家只需要对它有个印象。
Vue的实例并不只接收这两个选项，还有诸如methods、computed、watch、props等选项，这些选项我们在接下来的小节中会逐个详解。在这里，我们只需要先对Vue实例有一个初步的了解就可以了。