This is the sixth day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

First of all, we need to know what the instance objects in vUE are. We can print the vUE constructor or query on the official website to know the instance objects of Vue. Let me show you the code below:

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

By printing vue, you can see all vue instance objects. The red box is the instance object in the vue constructor, and all the ones with the $sign are the other ones.

We can also query vm through vUE’s official website.
d a t a , v m . The data, the vm. Props, vm.
e l , v m . El, vm. The options, the vm.
p a r e n t , v m . The parent, the vm. The root, the vm.
c h i l d r e n , v m . The children, the vm. Slots, vm.
s c o p e d S l o t s , v m . ScopedSlots, vm. Refs, vm.
i s S e r v e r , v m . IsServer, vm. Examples of attrs, vm.$listeners, etc:

In VUE, EL and data are indispensable, so I will show you a variety of ways to write EL and data, so that you can deepen your impression of EL and data;

<! DOCTYPE html><html>
	<head>
		<meta charset="UTF-8" />
		<title>Two ways of writing EL and data</title>
		<! Vue -->
		<script type="text/javascript" src=".. /js/vue.js"></script>
	</head>
	<body>
		<! -- Get a container ready -->
		<div id="root">
			<h1>Hello, {{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.

		// two ways of writing el
		/ * const v = new Vue ({/ / el: '# root, / / the first writing data: {name:' Vue '}}) console. The log (v) v. $mount (' # root) / / the second writing * /

		// Two ways of writing data
		new Vue({
			el:'#root'.// The first way to write data is as an object
			/* data:{ name:'vue' } */

			// The second way to write data is as a function
			data(){
				console.log('@ @ @'.this) // This is the Vue instance object
				return{
					name:'vue'}}})</script>
</html>
Copy the code

Data and EL 2 ways to write 1. El has 2 ways to write (1). New Vue when configure el attribute. $mount(‘#root’); $mount(‘#root’); 2. Data has two writing methods (1). Object type (2). How to choose functional type: at present, which writing method can be used, when learning the component in the future, data must use functional type, otherwise an error will be reported. 3. An important rule: for vUe-managed functions, do not write arrow functions. Once arrow functions are written, this is no longer a Vue instance.