vue learns the use of record value life cycle
1. Understand the life cycle
1. What is the life cycle
From the creation, running, and destruction of Vue instances, there are always various events, which are collectively referred to as the life cycle!
2. vue life cycle hook function
Each Vue instance goes through a series of initialization processes when it is created - for example, it needs to set up data listeners, compile templates, mount the instance to the DOM and update the DOM when the data changes, etc. At the same time, some functions called lifecycle hooks are also run during this process, which gives users the opportunity to add their own code at different stages.
lifecycle functions = lifecycle events = lifecycle hooks
2. vue life cycle
1.beforCreate
This is the first lifecycle function we encounter, meaning it will be executed before the instance is fully created
Note: When the beforeCreate life cycle function is executed, the data in data and methods have not yet been initialized
2.created
In created, data and methods have been initialized!
// If you want to call the methods in methods, or operate the data in data, the earliest, you can only operate in created
3.beforeMount
This is the third lifecycle function encountered, indicating that the template has been edited in memory, but the template has not been rendered to the page
4.mounted
This is the fourth life cycle function encountered, which means that the template in memory has been actually mounted to the page, and the user can already see the rendered page.
Note: mounted is the last life cycle function during instance creation. When mounted is executed, it means that the instance has been completely created. At this time, if there is no other operation, the instance will lie quietly in our memory in, motionless
5.beforeUpdate
At this time, it means that our interface has not been updated. When beforeUpdate is executed, the data displayed on the page is still old. At this time, the data data is the latest, and the page has not been synchronized with the latest data.
6.updated
When the updated event is executed, the page and data data have been kept in sync, and they are all up-to-date
7.beforeDestroy
At this time, the vue instance is ready to be destroyed, but the destruction program has not yet been executed. The data in the instance is still there, and the elements can be manipulated.
8.destroyed
At this time, the strength has been completely destroyed, the data in data and methods has been destroyed, and operations cannot be performed.
<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="Revise msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
// Create Vue instance, get ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log('executed show method')
}
},
beforeCreate() { // This is the first lifecycle function we encounter, meaning it is executed before the instance is fully created
// console.log(this.msg)
// this.show()
// Note: When the beforeCreate life cycle function is executed, the data in data and methods has not been initialized
},
created() { // This is the second lifecycle function encountered
// console.log(this.msg)
// this.show()
// In created, data and methods have been initialized!
// If you want to call methods in methods, or manipulate data in data, at the earliest, you can only operate in created
},
beforeMount() { // This is the third lifecycle function encountered, indicating that the template has been edited in memory, but the template has not been rendered to the page
// console.log(document.getElementById('h3').innerText)
// When beforeMount is executed, the elements in the page have not been really replaced, just some template strings written before
},
mounted() { // This is the fourth life cycle function encountered, which means that the template in memory has been actually mounted to the page, and the user can already see the rendered page.
// console.log(document.getElementById('h3').innerText)
// Note: mounted is the last life cycle function during instance creation. When mounted is executed, it means that the instance has been completely created. At this time, if there is no other operation, the instance will lie quietly in our memory.
},
// Next are the two events in the run
beforeUpdate() { // At this time, it means that our interface has not been updated [has the data been updated? The data must have been updated]
/* console.log('The content of the element on the interface: ' + document.getElementById('h3').innerText)
console.log('data The msg data in is: ' + this.msg) */
// Conclusion: When beforeUpdate is executed, the data displayed in the page is still old. At this time, the data data is the latest, and the page has not been synchronized with the latest data.
},
updated() {
console.log('Contents of elements on the interface:' + document.getElementById('h3').innerText)
console.log('data middle msg The data is:' + this.msg)
// When the updated event is executed, the page and data data have been kept in sync, and they are all up-to-date
}
});
</script>
</body>
</html>Summarize
Hint: Here's a summary of the article:
For example: the above is what we are going to talk about today. This article only briefly introduces the use of pandas, and pandas provides a large number of functions and methods that enable us to process data quickly and easily.