vue基础篇 - 实例对象的介绍「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。上一篇我

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。

上一篇我讲解了vue中的数据绑定下面和给大家讲一下vue的el和data两个vue的实例对象，首先我们需要知道vue中的实例对象有哪些，我们可以通过打印vue这个构造函数或者在官网上查询都可以知道vue的实例对象，下面我给大家进行代码的展示：

/* const v = new Vue({ data:{ name:'VUE' } }) console.log(v) */

通过打印vue的方式可以看到vue的全部实例对象，红色框里面的就是vue这个构造函数中的实例对象，所有带$符号的都是其他没有的就是vue的底层代码，暂时不需要去了解；

1635996943(1).png 我们也可以通过vue的官网进行查询vm. $data、vm.$ props、vm. $el、vm.$ options、vm. $parent、vm.$ root、vm. $children、vm.$ slots、vm. $scopedSlots、vm.$ refs、vm. $isServer、vm.$ attrs、vm.$listeners等的实例：

在vue中el和data是不可缺少的所以下面我和大家演示一下el和data的多种写法，让大家对el和data的印象加深；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'vue'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:'vue'
			} */

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'vue'
				}
			}
		})
	</script>
</html>

写法不同是可以进行代码的编写的所以下面我给大家写一下今天的总结： data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1).对象式 (2).函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 3.一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。