Catalog
1. Create Vue instance and data operation
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 = 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
<!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:, //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>