2.Vue实例_el: '#app-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45938466/article/details/116531902

本文详细介绍了Vue实例的创建过程，包括如何通过Vue函数创建实例并设置`el`和`data`属性。Vue实例的`el`属性用于指定挂载的DOM元素，`data`属性则用于定义实例的初始数据。此外，文章还讨论了如何使用`$set`方法动态添加响应式属性，确保视图更新。通过实例代码展示了Vue实例的基本用法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue实例

大纲

什么是Vue实例
如何创建Vue实例
Vue实例上的属性参数
如何使用Vue开始工作

什么是Vue实例

官方定义：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

解释：Vue 实例是通过 Vue 函数传入对应 options 参数创建出的一个实例对象

如何创建Vue实例

Vue 实例的创建是通过 new Vue(options) 来实现的，options 是创建 vue 实例传递的参数。它是一个对象

//最简单的 options 对象示例：
{
  el: "#app",
  data() {
    return {}
  },
}

具体实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>入门案例</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- {{成为插值表达式}} -->
		<div id="app">
			{{content}}
		</div>
		
		<script>
			/* 使用js实现功能 */
			/* let div=document.getElementById('app');
			div.innerHTML="Hello Vue!";
			 */
			//1.构建vue的实例
			let app=new Vue({//new Vue()实例化一个Vue应用程序
				el:'#app',//el指定vue的实例接管的元素对象。#app表示id选择器。el是element的缩写，指定被Vue管理的Dom节点的入口。通过选择器进行选择。必须是一个普通的HTML的标签节点，通常为div。
				data:{//vue实例提供的数据。data:指定初始化数据，在Vue管理的Dom节点下，可以通过插值表达式（模板语法）进行使用。
					content:"Hello Vue!"
				}
			})
			//说明：
			//1）Vue实例只能管理el指定的元素
			//2）el的值不能指定到HTML或者body标签上面
		</script>
	</body>
</html>

Vue实例上的属性参数

Vue的实例参数

el属性

el属性表示Vue实例要挂载的节点，该属性的值可以是一个CSS选择器，也可以是HTMLElement

el: '#app'//一个CSS选择器
el: document.getElementById('app')//HTMLElement

data属性

data属性表示Vue实例中的数据，data接收一个object或者返回一个对象数据的函数Function.

当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，试图也会同时更新。

//data 为对象
 data: {
        message: 'Hello Imooc !'
      }
//修改 vue 实例上的 message 数据
vm.message = 'Hello 句号 ！'

//data 为函数
  data() {
    return {
    	message: 'Hello Imooc !'
    }
  }

!!!只有当实例被创建时就已经存在于 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">
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message }} {{ date }}
    </div>
  	<script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          message: 'Hello Imooc !'
        }
      }
    })
    //修改 vue 实例上的 date 数据
	vm.date = "2020-08-08"
  	</script>
  </body>
</html>

如上，我们使用了数据 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>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      {{ message.title }}
    </div>
  	<script type="text/javascript">
        var vm = new Vue({
          el: "#app",
          data() {
            return {
              message: {}
            }
          }
        })
        //修改 vue 实例上的 date 数据
		vm.message.title = "Hello Imooc !"

  	</script>
  </body>
</html>

如上，我们使用了数据 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>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      {{ message.title }}
    </div>
  	<script type="text/javascript">
        var vm = new Vue({
          el: "#app",
          data() {
            return {
              message: {
                  title:''
              }
            }
          }
        })
        //修改 vue 实例上的 date 数据
		vm.message.title = "Hello Imooc !"
  	</script>
  </body>
</html>

$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>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      {{ message.title }}
    </div>
  	<script type="text/javascript">
        var vm = new Vue({
          el: "#app",
          data() {
            return {
              message: {
                  title:''
              }
            }
          }
        })
        //使用 vm.$set 方法修改数据
        vm.$set(vm.message, 'title','Hello Imooc !')
        // 页面正确显示 Hello Imooc ! 
  	</script>
  </body>
</html>