Second, Vue grammar foundation
1. Basic parts of applications and components in Vue
code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Basic grammar</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Create a vUE application instance and name it "app"
// An argument is passed in. This argument is enclosed in {}, indicating how the outermost layer should be displayed
// This is the root component of the VUE application
MVVM design mode: M -> model data view -> View VM -> View data connection layer
// The following data is the data, which is defined by ourselves
// The following template is the view template, which we define ourselves
// The VM view data connection layer is done by the VUE component
const app = Vue.createApp({
data(){
return{
message: 'hello world'}},template: '<div>{{message}}</div>'
});
// Mount (bind) to tag root
// The return value of this line of code is the root component of the VUE application
// The VM is the root component of the application
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
2. Understand the Vue lifecycle function *
Life cycle diagram
The picture comes from the official document, the annotation is my reference online interpretation and English meaning to write, is not special professional, just for reference!
code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Basic grammar</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
message: 'hello world'}},// The function executed before the instance is created
beforeCreate(){
console.log(this.message, "beforeCreate");
},
// The function executed after the instance is created
created(){
console.log(this.message, "created");
},
// Execute after instance creation and before mount
beforeMount(){
console.log(document.getElementById("root").innerHTML,"beforeMount");
},
// Execute after the mount, at which point the data is bound to the view
mounted(){
console.log(document.getElementById("root").innerHTML,"mounted");
},
// The function that is executed before the page is updated when data changes
beforeUpdate(){
console.log(document.getElementById("root").innerHTML,"beforeUpdate");
},
// The function executed after the page is updated when the data changes
updated(){
console.log(document.getElementById("root").innerHTML,"updated");
},
// The function that is executed when the vUE application fails and before it is destroyed
beforeUnmount(){
console.log(document.getElementById("root").innerHTML,"updated");
},
// The function that is executed when the vUE application fails and is destroyed
unmounted(){
console.log(document.getElementById("root").innerHTML,"updated");
},
template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
About template
Refer to life cycle diagrams 7 and 8, compile if you have a template, and bind tags as templates if you don’t, so write like this!
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Basic grammar</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<! Write the page content here -->
<div>{{message}}</div>
</div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
message: 'hello world'}}// Delete the template here
// template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeLife cycle function diagram of Vue3
Vue3 compares all lifecycle hooks with Vue2
We can see that beforeCreate and Created have been replaced by setup (but can still be used in Vue3 because Vue3 is backward compatible, which means vue2 is actually used). Second, hook names add on; Vue3. X also adds hook functions onRenderTriggered and onrendertrickeda for debugging
