vue05.html 875 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模板</title>
  6. <!-- 引入文件 -->
  7. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  8. <style>
  9. .active {
  10. height: 200px;
  11. width: 200px;
  12. border: 1px solid red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="app">
  18. </div>
  19. </body>
  20. <script>
  21. const { createApp, ref ,onMounted ,onBeforeMount } = Vue;
  22. createApp({
  23. setup() {
  24. onBeforeMount( () =>{
  25. console.log(`the component is now onBeforeMount.`)
  26. })
  27. onMounted( () => {
  28. console.log(`the component is now mounted.`)
  29. //加载数据列表
  30. })
  31. }
  32. }).mount('#app'); //createApp创建对象 挂在到app
  33. </script>
  34. </html>