Vue learning - Lesson 2

Catalog

 

1. Create Vue instance and data operation

2. Implement life cycle hook

2.1 life cycle diagram

3. examples

1. Create Vue instance and data operation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<title>Vue1-2</title>
	</head>
	<body>
		<script src="https://unpkg.com/vue"></script>
			<div id="app">
				<p>{{ foo }}</p>
				<!--There foo Will not be updated! -->
				<button v-on:click="foo = 'baz'">Change It</button>
			</div>
		<script>
		
			//Define a data object and assign a value
			var data = { a:1 }		
			//Define a vue instance and put the data object into the vue instance
			var vm= new Vue({
				data : data
			})
			
			//Get the attributes of the vue instance and return the corresponding fields in the source data
			if(vm.a = data.a) alert("Equal!!");			// =>true 
			//Setting the property value of the object in the instance will also affect the value in the original object
			vm.a = 2;
			alert(data.a);
			//Vice versa
			data.a=3;
			alert(vm.a);
			
			
			var obj = {
				foo : 'bar'
			}
			<!--Object.freeze() Method can freeze an object. Freezing means that you cannot add new properties to the object, modify the value of its existing properties, delete the existing properties, and modify the enumerability, configurability, and writability of the existing properties of the object. This method returns the frozen object.-->
			Object.freeze(obj);
			new Vue({
				el: '#app',
				data : obj
			})
			<!-- ******************************************************************-->
			var data2 = {a:1}
			var vm2 = new Vue({
				el: '#example',
				data : data2
			})
			//Through the prefix $(prefix $, some useful properties and methods of vue itself),
			//Used to distinguish from user-defined properties
			if(vm2.$data == data) alert("Equal!!");
			if(vm2.$el == document.getElementById("example")) alert("id Equal..");
			//$watch is an instance method. It is an expression or evaluation property function that observes the change of Vue / / instance. The parameters obtained by the callback function are new and old values.
			//Expressions accept only supervised key paths. For more complex expressions, use a function instead.
			//(in short, it is to observe the change of a value. If it changes, the method in it will be called.)
			vm2.$watch('a',function(newValue,oldValue){
				//This callback will be called after vm2.a changes.
			})
		
		</script>
		
	</body>
</html>

2. Implement life cycle hook

Each Vue instance is created through a series of initialization processes -- for example, setting data listening, compiling templates, attaching instances to the DOM and updating the DOM when the data changes. At the same time, some functions called life cycle hooks will be run in the process, which gives users the opportunity to add their own code at different stages.

2.1 life cycle diagram

3. examples

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<title>Vue1-3</title>
	</head>
	<body>
		<script src="https://unpkg.com/vue"></script>
		<script>
			new Vue({
				data:{a:1},
				//The created hook executes the following methods after the vue instance is created
				created : function(){
					alert('a is '+ this.a);
				}
				//There are also some other hooks that are called at different stages of the instance life cycle, such as 
                                //mounted, updated, and destroyed.
				//this context of the lifecycle hook points to the Vue instance that called it.
			})
		</script>
		
	</body>
</html>

From https://cn.vuejs.org/v2/guide/instance.html

Tags: Vue

Posted on Fri, 07 Feb 2020 12:07:00 -0500 by SheepWoolie