Verify two doubts a and b:
a. Is the window.onload in <script src="./main.js"></script> executed after all the html is loaded, or is it executed before the position in the html is loaded?
b. What is the difference between window.onload in <script src="./main.js"></script>?
in conclusion:
a.
answer: Executed after all html is loaded.
b.
Answer: The difference is that window.onload executes the content in window.onload after all documents of the html page are loaded. Therefore, no matter where the main.js with window.onload is introduced in the html, the error that the html element cannot be found will not occur. The js file without window.onload needs to be imported after the part of the html code associated with it, otherwise, there will be an error that the html element cannot be found.
The following is the whole process of verification:
Code structure preview
main.js :
window.onload=function(){ var app = new Vue ({ el:"#app-4", data:{ everyone:[{ text:"first one" },{ text:"second one" },{ text:"third one" }] } }) alert("app did!") }
index.html :
<html> <head> <title>xx</title> <script src="./vue.js"></script> <script src="./main.js"></script> <a href="./vue.js"></a> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> </body> </html>
Execution process (listed in the actual execution order in chrome)
1.
2.
Description: It is to go to window.onload in main.js first, and then display the rest of the html.
========================================================================================================
// Now slightly adjust the position of the <script src="./main.js"></script> code in html, and add a line of Dom loading in <div>html for the sake of prudence. . . </div>
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <a href="./vue.js"></a> </head> <body> Loading of Dom in < div > html. . . </ div > <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script src="./main.js"></script> </body> </html>
1.
2.
Description: The main.js with window.onload is imported everywhere . [Note: There will be no error that the html element cannot be found ]
=========================================================================
The above description is when there is window.onload in main.js.
=========================================================================
// Now, remove window.onload!!!
=========================================================================
The following is when there is no window.onload in main.js.
=========================================================================
main.js :
// window.onload=function(){ var app = new Vue ({ el:"#app-4", data:{ everyone:[{ text:"first one" },{ text:"second one" },{ text:"third one" }] } }) alert("app did!") // }
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <script src="./main.js"></script> <a href="./vue.js"></a> </head> <body> Loading of Dom in < div > html. . . </ div > <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> </body> </html>
1.
2.
Description: The content in main.js loaded first, the html has not been loaded at this time (the content to be displayed later has not been loaded) [Note: At this time, there is an error that the html element cannot be found (2. Figure) ]
=============================================================
// Adjust the code position of <script src="./main.js"></script> in index.html
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <a href="./vue.js"></a> </head> <body> Loading of Dom in < div > html. . . </ div > <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script src="./main.js"></script> </body> </html>
1.
2.
Description: HTML is loaded (the content to be displayed later has not been loaded), and then the content in main.js is loaded [ At this time, the rendering order is consistent with the scene when there is window.onload ]
